@extends('admin.layouts.main')
@php
  $page_name = 'Customers';
@endphp
@section('content')
  <div class="card">
    <div class="card-body">
      <h4>All Customers</h4>

      <form method="GET" action="{{ route('admin.customers') }}" class="row g-3 mb-3">
        <div class="col-md-3">
          <input type="text" name="name" class="form-control" placeholder="Search by name"
            value="{{ request('name') }}">
        </div>
        <div class="col-md-3">
          <input type="text" name="mobile" class="form-control" placeholder="Search by mobile"
            value="{{ request('mobile') }}">
        </div>
        <div class="col-md-2">
          <select name="active" class="form-control">
            <option value="">All Status</option>
            <option value="1" {{ request('active') === '1' ? 'selected' : '' }}>Active</option>
            <option value="0" {{ request('active') === '0' ? 'selected' : '' }}>Inactive</option>
          </select>
        </div>
        <div class="col-md-2">
          <select name="micro_site" class="form-control">
            <option value="">All Microsites</option>
            @foreach ($microsites as $site)
              <option value="{{ $site->id }}" {{ request('micro_site') == $site->id ? 'selected' : '' }}>
                {{ $site->company_name }}
              </option>
            @endforeach
          </select>
        </div>
        <div class="col-md-2">
          <button type="submit" class="btn btn-primary">Search</button>
          <a href="{{ route('admin.customers') }}" class="btn btn-secondary">Reset</a>
        </div>
      </form>


      <!-- Table -->
      <div class="table-responsive">
        <table class="table table-bordered align-middle">
          <thead>
            <tr>
              <th>Name</th>
              <th>Mobile</th>
              <th>Wallet</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            @forelse ($customers as $customer)
              <tr>
                <td>{{ $customer->name }}</td>
                <td>{{ $customer->mobile }}</td>
                <td>₹{{ $customer->wallet }}</td>
                <td>
                  {{-- Microsite Info --}}
                  @if ($customer->microsite)
                    <div class="mb-2">
                      <strong>Microsite:</strong> {{ $customer->microsite->company_name }}
                    </div>
                  @endif

                  {{-- Action Links --}}
                  <div class="mb-2">
                    <a href="{{ route('admin.customers.wallet', enc($customer->id)) }}"
                      class="btn btn-outline-primary btn-sm me-1">Wallet</a>
                    <a href="{{ route('admin.all.orders') }}?user={{ $customer->id }}"
                      class="btn btn-outline-info btn-sm me-1">Orders</a>
                    <a href="{{ route('admin.customers.coins', enc($customer->id)) }}"
                      class="btn btn-outline-success btn-sm">Coins</a>
                  </div>

                  {{-- Activation Toggle Button --}}
                  <div class="mb-2">
                    <button class="btn btn-sm {{ $customer->active ? 'btn-danger' : 'btn-success' }} open-confirm-modal"
                      data-user-id="{{ $customer->id }}"
                      data-action-url="{{ route('admin.customers.toggleActivation') }}"
                      data-message="Are you sure you want to {{ $customer->active ? 'deactivate' : 'activate' }} this user?">
                      {{ $customer->active ? 'Deactivate' : 'Activate' }}
                    </button>
                  </div>

                  {{-- Remove from Microsite Button --}}
                  @if ($customer->micro_site)
                    <div>
                      <button class="btn btn-warning btn-sm open-confirm-modal" data-user-id="{{ $customer->id }}"
                        data-action-url="{{ route('admin.customers.removeMicrosite') }}"
                        data-message="Are you sure you want to remove this user from microsite?">
                        Remove from Microsite
                      </button>
                    </div>
                  @endif
                  <a href="{{ route('admin.customers.profile', $customer->id) }}" class="btn btn-info btn-sm">
                    View Profile
                  </a>

                </td>

              </tr>
            @empty
              <tr>
                <td colspan="4" class="text-center">No customers found.</td>
              </tr>
            @endforelse
          </tbody>

        </table>
      </div>

      <!-- 📄 Pagination -->
      <div class=" mt-3">
        {{ $customers->appends(request()->query())->links('pagination::bootstrap-5') }}
      </div>

      <!-- Confirmation Modal -->
      <div class="modal fade" id="confirmActionModal" tabindex="-1" aria-labelledby="confirmActionLabel"
        aria-hidden="true">
        <div class="modal-dialog">
          <form method="POST" id="confirmActionForm">
            @csrf
            <input type="hidden" name="user_id" id="confirmUserId">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="confirmActionLabel">Confirm Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body" id="confirmActionMessage">
                <!-- Message will be inserted dynamically -->
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-danger" id="confirmActionBtn">Yes, Proceed</button>
              </div>
            </div>
          </form>
        </div>
      </div>


      <!-- Remove from Microsite Modal -->
      <div class="modal fade" id="confirmRemoveMicrositeModal" tabindex="-1" aria-labelledby="confirmRemoveLabel"
        aria-hidden="true">
        <div class="modal-dialog">
          <form method="POST" action="{{ route('admin.customers.removeMicrosite') }}">
            @csrf
            <input type="hidden" name="user_id" id="removeMicrositeUserId">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Remove from Microsite</h5>
              </div>
              <div class="modal-body">
                Are you sure you want to remove this user from the microsite?
              </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-danger">Remove</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              </div>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
@endsection
@push('script')
  <script>
    const deactivateModal = document.getElementById('confirmDeactivateModal');
    deactivateModal.addEventListener('show.bs.modal', function(event) {
      const button = event.relatedTarget;
      const userId = button.getAttribute('data-id');
      document.getElementById('deactivateUserId').value = userId;
    });

    const removeMicrositeModal = document.getElementById('confirmRemoveMicrositeModal');
    removeMicrositeModal.addEventListener('show.bs.modal', function(event) {
      const button = event.relatedTarget;
      const userId = button.getAttribute('data-id');
      document.getElementById('removeMicrositeUserId').value = userId;
    });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const modal = new bootstrap.Modal(document.getElementById('confirmActionModal'));

      document.querySelectorAll('.open-confirm-modal').forEach(button => {
        button.addEventListener('click', function() {
          const userId = this.getAttribute('data-user-id');
          const actionUrl = this.getAttribute('data-action-url');
          const message = this.getAttribute('data-message');

          document.getElementById('confirmUserId').value = userId;
          document.getElementById('confirmActionForm').action = actionUrl;
          document.getElementById('confirmActionMessage').textContent = message;

          modal.show();
        });
      });
    });
  </script>
@endpush