@extends('cms.layout')
@section('cms')
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="mb-0">Offices</h2>
    <a href="{{ route('cms.offices.create') }}" class="btn btn-primary btn-sm">Add</a>
  </div>

  @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
  @endif

  <div class="card shadow-sm mb-3">
    <div class="card-body py-3">
      <div class="d-flex flex-wrap align-items-center mb-2">
        <form method="get" class="ms-auto" style="min-width:280px">
          <div class="input-group input-group-sm">
            <input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="name, address, city or country">
            <button class="btn btn-outline-secondary" type="submit">Search</button>
          </div>
        </form>
      </div>
      <form method="get" class="row align-items-end g-2">
        <div class="col-sm-6 col-md-3 col-lg-2">
          <label class="form-label small mb-1">City</label>
          <select name="city" class="form-select form-select-sm">
            <option value="">All</option>
            @foreach($cities as $c)
              <option value="{{ $c }}" {{ ($city??'')===$c?'selected':'' }}>{{ $c }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-2">
          <label class="form-label small mb-1">Country</label>
          <select name="country" class="form-select form-select-sm">
            <option value="">All</option>
            @foreach($countries as $co)
              <option value="{{ $co }}" {{ ($country??'')===$co?'selected':'' }}>{{ $co }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-2">
          <label class="form-label small mb-1">Sort</label>
          <select name="sort" class="form-select form-select-sm">
            <option value="name_asc" {{ ($sort??'')==='name_asc'?'selected':'' }}>Name A→Z</option>
            <option value="name_desc" {{ ($sort??'')==='name_desc'?'selected':'' }}>Name Z→A</option>
            <option value="city_asc" {{ ($sort??'')==='city_asc'?'selected':'' }}>City A→Z</option>
            <option value="city_desc" {{ ($sort??'')==='city_desc'?'selected':'' }}>City Z→A</option>
          </select>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-2">
          <label class="form-label small mb-1">Per page</label>
          <select name="per_page" class="form-select form-select-sm">
            @foreach([20,50,100] as $pp)
              <option value="{{ $pp }}" {{ (int)$perPage===$pp?'selected':'' }}>{{ $pp }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4 text-end ms-auto">
          <button class="btn btn-sm btn-primary me-1">Apply</button>
          <a href="{{ route('cms.offices.index') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body table-responsive p-0">
      <table class="table table-striped table-hover mb-0">
        <thead>
          <tr>
            <th class="text-muted">#</th>
            <th>Name</th>
            <th>City</th>
            <th>Country</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @forelse($items as $it)
            <tr>
              <td class="text-muted small">{{ $it->id }}</td>
              <td>{{ $it->name }}</td>
              <td>{{ $it->city }}</td>
              <td>{{ $it->country }}</td>
              <td class="text-end">
                <a href="{{ route('cms.offices.edit',$it) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                <form action="{{ route('cms.offices.destroy',$it) }}" method="post" class="d-inline" onsubmit="return confirm('Delete this office?')">
                  @csrf @method('DELETE')
                  <button class="btn btn-sm btn-outline-danger">Delete</button>
                </form>
              </td>
            </tr>
          @empty
            <tr><td colspan="5" class="text-center text-muted p-4">No offices.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
    <div class="card-footer">{{ $items->links() }}</div>
  </div>
</div>
@endsection