@extends('crm.master')

@section('title', 'Customers')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="customers-report">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
      <h4 class="mb-0">
        Customers
      </h4>
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <a href="{{ route('crm.customers.export') }}" class="btn btn-sm btn-outline-secondary">
          <i class="ti tabler-download me-1"></i> Export
        </a>
        <a href="{{ route('crm.customers.create') }}" class="btn btn-sm btn-primary">
          <i class="ti tabler-plus me-1"></i> New
        </a>
      </div>
    </div>

    <div class="card report-filter-card mb-3">
      <div class="card-body py-3">
        <form action="{{ route('crm.customers.index') }}" method="GET" class="row g-2 align-items-end">
          <div class="col-md-2">
            <label class="form-label small mb-1">Status</label>
            <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="">All</option>
              <option value="active" {{ $filters['status'] === 'active' ? 'selected' : '' }}>Active</option>
              <option value="inactive" {{ $filters['status'] === 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label small mb-1">Countries</label>
            <select name="country" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="">All</option>
              @foreach($countries as $country)
                <option value="{{ $country->country }}" {{ $filters['country'] === $country->country ? 'selected' : '' }}>
                  {{ $country->country }} ({{ $country->total }})
                </option>
              @endforeach
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label small mb-1">Customer A-Z</label>
            <select name="chr" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="">All</option>
              @foreach(range('A', 'Z') as $letter)
                <option value="{{ $letter }}" {{ $filters['chr'] === $letter ? 'selected' : '' }}>{{ $letter }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-4">
            <label class="form-label small mb-1">Search Customers</label>
            <div class="input-group input-group-sm">
              <input type="text" name="q" value="{{ $filters['q'] }}" class="form-control" placeholder="Name, email, phone...">
              <button class="btn btn-outline-secondary" type="submit">
                <i class="ti tabler-search"></i>
              </button>
            </div>
          </div>

          <div class="col-md-2 text-md-end">
            <label class="form-label small mb-1 d-block">&nbsp;</label>
            <a href="{{ route('crm.customers.index') }}" class="btn btn-sm btn-outline-secondary">
              Clear
            </a>
          </div>
        </form>
      </div>
    </div>

    <div class="card customers-grid-card crm-grid-card">
      <div class="card-body p-0">
        <div class="table-responsive crm-grid-wrap">
          <table class="table table-sm mb-0 customers-grid crm-grid-table">
            <thead>
              <tr>
                <th class="ps-3">Customer</th>
                <th>Customer ID</th>
                <th>Bookings</th>
                <th>Total</th>
                <th>Last Booking</th>
                <th>Status</th>
                <th>Location</th>
                <th>Created</th>
              </tr>
            </thead>
            <tbody>
              @forelse($customers as $customer)
                @php
                  $latestBooking = $customer->bookings->sortByDesc('start_datetime')->first();
                @endphp
                <tr>
                  <td class="ps-3">
                    <div class="customer-name-cell">
                      <a href="{{ route('crm.customers.show', $customer->hash_id) }}" class="fw-semibold text-body">
                        {{ $customer->name }}
                      </a>
                      @if($customer->email)
                        <em>{{ $customer->email }}</em>
                      @endif
                    </div>
                  </td>
                  <td>{{ $customer->hash_id }}</td>
                  <td>
                    @if($customer->bookings_count)
                      <a href="{{ route('crm.bookings.index', ['search' => $customer->email ?: $customer->name]) }}">
                        {{ $customer->bookings_count }}
                      </a>
                    @else
                      0
                    @endif
                  </td>
                  <td>${{ number_format((float) ($customer->bookings_total ?? 0), 2) }}</td>
                  <td>
                    @if($customer->last_booking_at)
                      {{ \Carbon\Carbon::parse($customer->last_booking_at)->format('M j') }}
                      @if($latestBooking)
                        <em>
                          <a href="{{ route('crm.booking.confirmation', $latestBooking->booking_number) }}">{{ $latestBooking->booking_number }}</a>
                        </em>
                      @endif
                    @else
                      <span class="text-muted">-</span>
                    @endif
                  </td>
                  <td>
                    <span class="badge {{ $customer->status === 'active' ? 'bg-label-success' : 'bg-label-secondary' }}">
                      {{ ucfirst($customer->status ?: 'inactive') }}
                    </span>
                  </td>
                  <td>
                    @if($customer->address || $customer->city || $customer->country)
                      <div class="location-cell">
                        @if($customer->address)<div>{{ $customer->address }}</div>@endif
                        @if($customer->city || $customer->state || $customer->postal_code)
                          <div>{{ trim(collect([$customer->city, $customer->state, $customer->postal_code])->filter()->implode(', '), ', ') }}</div>
                        @endif
                        @if($customer->country)<div>{{ $customer->country }}</div>@endif
                      </div>
                    @else
                      <span class="text-muted">-</span>
                    @endif
                  </td>
                  <td>{{ $customer->created_at?->format('M j, Y') }}</td>
                </tr>
              @empty
                <tr>
                  <td colspan="8" class="text-center text-muted py-5">
                    No customers found.
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      @if($customers->hasPages())
        <div class="card-footer bg-white">
          {{ $customers->links() }}
        </div>
      @endif
    </div>
  </div>
</div>
@endsection

<style>
.report-filter-card {
  border: 1px solid #e4e8ef;
}

.customer-name-cell em,
.location-cell,
.customers-grid td em {
  display: block;
  color: #7b8794;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.location-cell div {
  margin-bottom: 0.1rem;
}
</style>