@extends('layouts.admin')

@section('page_header')
<div class="page-header" style="margin-top:0; margin-bottom:20px;">
     <h1 class="page-title my-auto">Reservations</h1>
     <div>
          <ol class="breadcrumb mb-0 align-items-center">
               <li class="breadcrumb-item"><a href="{{ route('web.dashboard') }}">Dashboard</a></li>
               <li class="breadcrumb-item active" aria-current="page">Reservations</li>
               <li class="breadcrumb-item">
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#reservationCreateModal">
                         <i class="fe fe-plus me-1"></i> New Reservation
                    </button>
               </li>
               @isset($exportable)
                    <li class="breadcrumb-item ms-2">
                         <a href="{{ route('web.reservations.export') }}" class="btn btn-outline-primary btn-sm">
                              <i class="fe fe-download me-1"></i> Export
                         </a>
                    </li>
               @endisset
          </ol>
     </div>
</div>
@endsection

@section('content')
@php
     $statusBadge = [
          'pending'   => 'bg-warning-transparent text-warning',
          'approved'  => 'bg-success-transparent text-success',
          'rejected'  => 'bg-danger-transparent text-danger',
          'cancelled' => 'bg-light-transparent text-dark',
          'expired'   => 'bg-dark-transparent text-dark',
          'completed' => 'bg-primary-transparent text-primary',
     ];
     $perSelected = (int) ($filters['per_page'] ?? request('per_page', 10));
     if (!in_array($perSelected, [10,25,50,100], true)) $perSelected = 10;
     $qValue = $filters['q'] ?? '';
     $fuelOptions        = ['Boş','4/1','4/2','4/3','Dolu'];
     $cleanlinessOptions = ['Temiz','Normal','Kirli'];
@endphp

<div class="row">
     <div class="col-12 col-sm-12">
          <div class="card">
               <div class="card-body product-table">

                    {{-- FILTER BAR --}}
                    <form method="GET" class="row g-2 justify-content-between mb-3">
                         @foreach(request()->except(['per_page','q','page']) as $k => $v)
                              <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                         @endforeach

                         <div class="col-sm-12 col-md-2 d-flex gap-2 align-items-center">
                              <label class="form-label mb-1">Show</label>
                              <select name="per_page" class="form-control form-control-sm select-entries" onchange="this.form.submit()">
                                   <option value="10"  @selected($perSelected===10)>10</option>
                                   <option value="25"  @selected($perSelected===25)>25</option>
                                   <option value="50"  @selected($perSelected===50)>50</option>
                                   <option value="100" @selected($perSelected===100)>100</option>
                              </select>
                              <small class="text-muted">Entries</small>
                         </div>

                         <div class="col-sm-12 col-md-6 d-flex gap-2 justify-content-end">
                              <label class="form-label mb-1">Search</label>
                              <div class="d-flex gap-2">
                                   <input type="search" name="q" class="form-control form-control-sm" placeholder="Search id, user, plate, purpose..." value="{{ $qValue }}">
                              </div>
                         </div>
                    </form>

                    {{-- TABLE --}}
                    <div class="row">
                         <div class="border-0">
                              <div class="table-responsive">
                                   <table class="table table-bordered text-nowrap mb-0">
                                        <thead class="border-top">
                                             <tr>
                                                  <!-- <th class="text-center">ID</th> -->
                                                  <th>User</th>
                                                  <th>Purpose</th>
                                                  <th>Vehicle</th>
                                                  <th>Start</th>
                                                  <th>End</th>
                                                  <th class="text-center">Status</th>
                                                  <th class="text-center">Action</th>
                                             </tr>
                                        </thead>
                                        <tbody>
                                             @forelse($reservations as $r)
                                                  @php $cls = $statusBadge[$r->status] ?? 'bg-secondary-transparent text-secondary'; @endphp
                                                  <tr>
                                                       <!-- <td class="text-center"><h6 class="mb-0 fs-14 fw-semibold">{{ $r->id }}</h6></td> -->
                                                       <td class="fw-semibold">{{ $r->user->name ?? '-' }}</td>
                                                       <td class="text-truncate" style="max-width:280px;">{{ $r->purpose }}</td>
                                                       <td>{{ $r->vehicle->plate ?? '-' }}</td>
                                                       <td>{{ optional($r->start_at)?->timezone(config('app.display_timezone'))->format('d.m.Y H:i') }}</td>
                                                       <td>{{ $r->end_at ? $r->end_at->timezone(config('app.display_timezone'))->format('d.m.Y H:i') : '—' }}</td>
                                                       <td class="text-center"><span class="badge {{ $cls }} rounded-pill p-2 px-3">{{ ucfirst($r->status) }}</span></td>
                                                       <td class="text-center">
                                                            <div class="g-2 d-flex justify-content-center gap-1">
                                                                 {{-- VIEW (only completed) --}}
                                                                 @if($r->status === 'completed')
                                                                      <button type="button"
                                                                           class="btn text-info btn-sm js-view-reservation"
                                                                           title="Detay"
                                                                           data-bs-toggle="modal" data-bs-target="#reservationShowModal"
                                                                           data-id="{{ $r->id }}"
                                                                           data-user="{{ $r->user->name ?? '-' }}"
                                                                           data-vehicle="{{ $r->vehicle->plate ?? '-' }}"
                                                                           data-start="{{ optional($r->start_at)->format('d.m.Y H:i') }}"
                                                                           data-end="{{ optional($r->end_at)->format('d.m.Y H:i') }}"
                                                                           data-purpose="{{ e($r->purpose) }}"
                                                                           data-status="{{ $r->status }}"
                                                                           data-pickup-km="{{ $r->pickupKm }}"
                                                                           data-return-km="{{ $r->returnKm }}"
                                                                           data-fuel="{{ $r->fuelLevel }}"
                                                                           data-cleanliness="{{ $r->cleanliness }}"
                                                                           data-creator="{{ $r->creator->name ?? '-' }}"
                                                                           data-approver="{{ $r->approver->name ?? '-' }}"
                                                                           data-photos='@json(
                                                                                ($r->photos ?? collect())->map(function($p){
                                                                                     $src = $p->url ?? (\Storage::url($p->path ?? '') ?: null);
                                                                                     $thumb = $p->thumb_url ?? $src;
                                                                                     return ["src"=>$src, "thumb"=>$thumb, "caption"=>($p->caption ?? '')];
                                                                                })->values()
                                                                           )'>
                                                                           <span class="fe fe-eye fs-14"></span>
                                                                      </button>
                                                                 @endif

                                                                 {{-- EDIT --}}
                                                                 <button type="button"
                                                                      class="btn text-primary btn-sm js-edit-reservation"
                                                                      title="Edit"
                                                                      data-update-url="{{ route('web.reservations.update', $r) }}"
                                                                      data-user-id="{{ $r->user_id }}"
                                                                      data-vehicle-id="{{ $r->vehicle_id }}"
                                                                      data-start-at="{{ optional($r->start_at)->format('Y-m-d\TH:i') }}"
                                                                      data-end-at="{{ optional($r->end_at)->format('Y-m-d\TH:i') }}"
                                                                      data-purpose="{{ $r->purpose }}"
                                                                      data-status="{{ $r->status }}"
                                                                      data-rejection-reason="{{ $r->rejection_reason }}"
                                                                      data-pickup-km="{{ $r->pickupKm }}"
                                                                      data-return-km="{{ $r->returnKm }}"
                                                                      data-cleanliness="{{ $r->cleanliness }}"
                                                                      data-fuel-level="{{ $r->fuelLevel }}"
                                                                      data-bs-toggle="modal" data-bs-target="#reservationEditModal">
                                                                      <span class="fe fe-edit fs-14"></span>
                                                                 </button>

                                                                 {{-- DELETE --}}
                                                                 <button type="button"
                                                                      class="btn text-danger btn-sm js-delete-reservation"
                                                                      title="Delete"
                                                                      data-delete-url="{{ route('web.reservations.destroy', $r) }}"
                                                                      data-name="#{{ $r->id }}">
                                                                      <span class="fe fe-trash-2 fs-14"></span>
                                                                 </button>
                                                            </div>
                                                       </td>
                                                  </tr>
                                             @empty
                                                  <tr><td colspan="8" class="text-center text-muted p-4">- No records found -</td></tr>
                                             @endforelse
                                        </tbody>
                                   </table>
                              </div>
                         </div>
                    </div>

                    {{-- PAGINATION --}}
                    <div class="row mt-3 align-items-center">
                         <div class="col-sm-12 col-md-6 my-auto">
                              @if($reservations->total() > 0)
                                   <span>Showing {{ $reservations->firstItem() }} to {{ $reservations->lastItem() }} of {{ $reservations->total() }} entries</span>
                              @else
                                   <span>Showing 0 to 0 of 0 entries</span>
                              @endif
                         </div>
                         <div class="col-sm-12 col-md-6">
                              <nav aria-label="Page navigation" class="d-flex justify-content-end">
                                   {{ $reservations->appends(request()->except('page'))->onEachSide(1)->links('vendor.pagination.sash') }}
                              </nav>
                         </div>
                    </div>

               </div>
          </div>
     </div>
</div>

{{-- SweetAlert2 + Lightbox --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>


{{-- CREATE MODAL --}}
<div class="modal fade" id="reservationCreateModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog modal-lg modal-dialog-scrollable">
          <form class="modal-content" method="POST" action="{{ route('web.reservations.store') }}">
               @csrf
               <div class="modal-header">
                    <h5 class="modal-title">New Reservation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>

               <div class="modal-body">
                    <div class="row g-3">
                         <div class="col-md-4">
                              <label class="form-label">Driver</label>
                              <select name="user_id" class="form-select" required>
                                   <option value="">Seçiniz</option>
                                   @foreach($users as $id => $name) <option value="{{ $id }}">{{ $name }}</option> @endforeach
                              </select>
                         </div>
                         <div class="col-md-4">
                              <label class="form-label">Vehicle</label>
                              <select name="vehicle_id" class="form-select" required>
                                   <option value="">Choose</option>
                                   @foreach($vehicles as $id => $plate) <option value="{{ $id }}">{{ $plate }}</option> @endforeach
                              </select>
                         </div>
                         <div class="col-md-4">
                              <label class="form-label">Status</label>
                              <select name="status" class="form-select" required>
                                   <option value="pending">pending</option>
                                   <option value="approved">approved</option>
                                   <option value="rejected">rejected</option>
                                   <option value="cancelled">cancelled</option>
                                   <option value="expired">expired</option>
                                   <option value="completed">completed</option>
                              </select>
                         </div>

                         <div class="col-md-6">
                              <label class="form-label">Start</label>
                              <input type="datetime-local" name="start_at" class="form-control" required>
                         </div>
                         <div class="col-md-6">
                              <label class="form-label">End</label>
                              <input type="datetime-local" name="end_at" class="form-control">
                         </div>

                         <div class="col-12">
                              <label class="form-label">Description</label>
                              <textarea name="purpose" class="form-control" rows="2" placeholder="Toplantı, saha ziyareti vb."></textarea>
                         </div>

                         <div class="col-md-6">
                              <label class="form-label">Pickup KM</label>
                              <input type="number" name="pickupKm" class="form-control" min="0" required>
                         </div>
                         <div class="col-md-6">
                              <label class="form-label">Return KM</label>
                              <input type="number" name="returnKm" class="form-control" min="0">
                         </div>

                         <div class="col-md-6">
                              <label class="form-label d-block mb-2">Fuel</label>
                              <div class="btn-group flex-wrap" role="group" aria-label="Yakıt">
                                   @foreach($fuelOptions as $i => $opt)
                                        @php $id = "create_fuel_$i"; @endphp
                                        <input class="btn-check" type="radio" name="fuelLevel" id="{{ $id }}" value="{{ $opt }}" @checked($opt==='4/2')>
                                        <label class="btn btn-outline-dark btn-sm mb-2" for="{{ $id }}">{{ $opt }}</label>
                                   @endforeach
                              </div>
                         </div>

                         <div class="col-md-6">
                              <label class="form-label d-block mb-2">Cleanliness</label>
                              <div class="btn-group flex-wrap" role="group" aria-label="Temizlik">
                                   @foreach($cleanlinessOptions as $i => $opt)
                                        @php $id = "create_clean_$i"; @endphp
                                        <input class="btn-check" type="radio" name="cleanliness" id="{{ $id }}" value="{{ $opt }}" @checked($opt==='Normal')>
                                        <label class="btn btn-outline-dark btn-sm mb-2" for="{{ $id }}">{{ $opt }}</label>
                                   @endforeach
                              </div>
                         </div>
                    </div>
               </div>
               <div class="modal-footer">
                    <button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="submit"><i class="fe fe-save me-1"></i> Save</button>
               </div>
          </form>
     </div>
</div>

{{-- EDIT MODAL --}}
<div class="modal fade" id="reservationEditModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog modal-lg modal-dialog-scrollable">
          <form class="modal-content" method="PUT" id="reservationEditForm" action="#">
               @csrf
               <div class="modal-header">
                    <h5 class="modal-title">Update Reservation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>

               <div class="modal-body">
                    <div class="row g-3">
                         <div class="col-md-4">
                              <label class="form-label">Driver</label>
                              <select name="user_id" class="form-select" required>
                                   @foreach($users as $id => $name) <option value="{{ $id }}">{{ $name }}</option> @endforeach
                              </select>
                         </div>
                         <div class="col-md-4">
                              <label class="form-label">Vehicle</label>
                              <select name="vehicle_id" class="form-select" required>
                                   @foreach($vehicles as $id => $plate) <option value="{{ $id }}">{{ $plate }}</option> @endforeach
                              </select>
                         </div>
                         <div class="col-md-4">
                              <label class="form-label">Status</label>
                              <select name="status" class="form-select" required id="edit_status">
                                   <option value="pending">pending</option>
                                   <option value="approved">approved</option>
                                   <option value="rejected">rejected</option>
                                   <option value="cancelled">cancelled</option>
                                   <option value="expired">expired</option>
                                   <option value="completed">completed</option>
                              </select>
                         </div>

                         <div class="col-md-6">
                              <label class="form-label">Start</label>
                              <input type="datetime-local" name="start_at" class="form-control" required>
                         </div>
                         <div class="col-md-6">
                              <label class="form-label">End</label>
                              <input type="datetime-local" name="end_at" class="form-control">
                         </div>

                         <div class="col-12">
                              <label class="form-label">Description</label>
                              <textarea name="purpose" class="form-control" rows="2"></textarea>
                         </div>

                         <div class="col-md-6">
                              <label class="form-label">Pickup KM</label>
                              <input type="number" name="pickupKm" class="form-control" min="0">
                         </div>
                         <div class="col-md-6">
                              <label class="form-label">Return KM</label>
                              <input type="number" name="returnKm" class="form-control" min="0">
                         </div>
                         <div class="col-md-6">
                              <label class="form-label d-block mb-2">Fuel</label>
                              <div class="btn-group flex-wrap" role="group" aria-label="Yakıt">
                                   @foreach($fuelOptions as $i => $opt)
                                        @php $id = "edit_fuel_$i"; @endphp
                                        <input class="btn-check" type="radio" name="fuelLevel" id="{{ $id }}" value="{{ $opt }}">
                                        <label class="btn btn-outline-dark btn-sm mb-2" for="{{ $id }}">{{ $opt }}</label>
                                   @endforeach
                              </div>
                         </div>

                         <div class="col-md-6">
                              <label class="form-label d-block mb-2">Cleanliness</label>
                              <div class="btn-group flex-wrap" role="group" aria-label="Temizlik">
                                   @foreach($cleanlinessOptions as $i => $opt)
                                        @php $id = "edit_clean_$i"; @endphp
                                        <input class="btn-check" type="radio" name="cleanliness" id="{{ $id }}" value="{{ $opt }}">
                                        <label class="btn btn-outline-dark btn-sm mb-2" for="{{ $id }}">{{ $opt }}</label>
                                   @endforeach
                              </div>
                         </div>
                    </div>
               </div>
               <div class="modal-footer">
                    <button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="submit"><i class="fe fe-save me-1"></i> Save</button>
               </div>
          </form>
     </div>
</div>

{{-- SHOW (DETAIL) MODAL --}}
<div class="modal fade" id="reservationShowModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog modal-lg modal-dialog-scrollable">
          <div class="modal-content">
               <div class="modal-header">
                    <h5 class="modal-title">
                         Reservation Detail <span class="text-muted ms-2" id="show_id"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Kapat"></button>
               </div>

               <div class="modal-body">
                    <div class="row g-3">
                         <div class="col-12 col-lg-12">
                              <div class="table-responsive">
                                   <table class="table table-sm mb-0">
                                        <tbody>
                                             <tr><th class="w-35">Driver</th><td id="show_user">-</td></tr>
                                             <tr><th>Vehicle</th><td id="show_vehicle">-</td></tr>
                                             <tr><th>Start</th><td id="show_start">-</td></tr>
                                             <tr><th>End</th><td id="show_end">-</td></tr>
                                             <tr><th>Pickup Km</th><td id="show_pickup">-</td></tr>
                                             <tr><th>Return Km</th><td id="show_return">-</td></tr>
                                             <tr><th>Fuel</th><td id="show_fuel">-</td></tr>
                                             <tr><th>Cleanliness</th><td id="show_clean">-</td></tr>
                                             <tr><th>Status</th><td id="show_status">-</td></tr>
                                             <tr><th>Created By</th><td id="show_creator">-</td></tr>
                                             <tr><th>Approved By</th><td id="show_approver">-</td></tr>
                                        </tbody>
                                   </table>
                              </div>
                         </div>

                         <div class="col-12 col-lg-12">
                              <label class="form-label mb-2">Description</label>
                              <div class="p-2 border rounded bg-light" id="show_purpose" style="min-height:72px;">-</div>
                         </div>

                         <div class="col-12">
                              <label class="form-label mb-2">Photos</label>
                              <div id="show_photos" class="d-flex flex-wrap gap-2"></div>
                              <div id="show_no_photos" class="text-muted">No photos.</div>
                         </div>
                    </div>
               </div>

               <div class="modal-footer">
                    <button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button>
               </div>
          </div>
     </div>
</div>

{{-- Page JS --}}
<script>
     document.addEventListener('DOMContentLoaded', () => {
          const editForm  = document.getElementById('reservationEditForm');
          const editModal = document.getElementById('reservationEditModal');

          // Radio pill seçici
          const setRadio = (form, name, value) => {
               form.querySelectorAll(`input[name="${name}"]`)
                    .forEach(r => r.checked = (r.value === (value ?? '')));
          };

          const setIfExists = (selector, value) => {
               const el = editForm.querySelector(selector);
               if (el) el.value = value ?? '';
          };

          // EDIT: doldur + aç
          document.querySelectorAll('.js-edit-reservation').forEach(btn => {
               btn.addEventListener('click', () => {
                    const d = btn.dataset; // camelCase: userId, vehicleId, startAt, endAt, pickupKm, returnKm, fuelLevel, cleanliness...
                    editForm.action = d.updateUrl || '#';

                    setIfExists('[name="user_id"]',    d.userId);
                    setIfExists('[name="vehicle_id"]', d.vehicleId);
                    setIfExists('[name="start_at"]',   d.startAt);
                    setIfExists('[name="end_at"]',     d.endAt);
                    setIfExists('[name="purpose"]',    d.purpose);
                    setIfExists('[name="status"]',     d.status);
                    setIfExists('[name="pickupKm"]',   d.pickupKm);
                    setIfExists('[name="returnKm"]',   d.returnKm);
                    setRadio(editForm, 'fuelLevel',   d.fuelLevel);
                    setRadio(editForm, 'cleanliness', d.cleanliness);

                    if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                    bootstrap.Modal.getOrCreateInstance(editModal).show();
                    }
               });
          });

          // DELETE: SweetAlert
          document.querySelectorAll('.js-delete-reservation').forEach(btn => {
               btn.addEventListener('click', () => {
                    const delUrl = btn.dataset.deleteUrl;
                    const name   = btn.dataset.name || 'record';

                    Swal.fire({
                         title: 'Silmek istediğine emin misin?',
                         html: `<div class="text-muted">Rezervasyon: <b>${name}</b></div>`,
                         icon: 'warning',
                         showCancelButton: true,
                         confirmButtonText: 'Evet, sil',
                         cancelButtonText: 'Vazgeç',
                         reverseButtons: true
                    }).then(result => {
                         if (result.isConfirmed) {
                              const f = document.createElement('form');
                              f.method = 'POST'; f.action = delUrl;
                              f.innerHTML = `@csrf @method('DELETE')`;
                              document.body.appendChild(f); f.submit();
                         }
                    });
               });
          });

          // VIEW (DETAIL) + LIGHTBOX
          let glx = null;
          const $ = (sel) => document.querySelector(sel);

          const renderPhotos = (list, galleryId) => {
               const wrap  = $('#show_photos');
               const empty = $('#show_no_photos');
               wrap.innerHTML = '';

               const photos = (Array.isArray(list) ? list : []).filter(p => p && p.src);
               if (!photos.length) {
                    empty.style.display = '';
                    if (glx && glx.destroy) glx.destroy();
                    return;
               }
               empty.style.display = 'none';

               photos.forEach((p, i) => {
                    const a = document.createElement('a');
                    a.href = p.src;
                    a.className = 'glightbox';
                    a.setAttribute('data-gallery', galleryId);
                    a.setAttribute('data-title', p.caption || '');
                    a.innerHTML = `<img src="${p.thumb || p.src}" class="rounded border" style="width:96px;height:96px;object-fit:cover" alt="photo-${i}">`;
                    wrap.appendChild(a);
               });

               if (glx && glx.destroy) glx.destroy();
               glx = GLightbox({ selector: `.glightbox[data-gallery="${galleryId}"]` });
          };

          document.querySelectorAll('.js-view-reservation').forEach(btn => {
               btn.addEventListener('click', () => {
                    const d = btn.dataset;
                    $('#show_id').textContent       = `#${d.id ?? ''}`;
                    $('#show_user').textContent     = d.user ?? '-';
                    $('#show_vehicle').textContent  = d.vehicle ?? '-';
                    $('#show_start').textContent    = d.start ?? '-';
                    $('#show_end').textContent      = d.end ?? '-';
                    $('#show_pickup').textContent   = d.pickupKm ?? '-';
                    $('#show_return').textContent   = d.returnKm ?? '-';
                    $('#show_fuel').textContent     = d.fuel ?? '-';
                    $('#show_clean').textContent    = d.cleanliness ?? '-';
                    $('#show_status').textContent   = d.status ?? '-';
                    $('#show_creator').textContent  = d.creator ?? '-';
                    $('#show_approver').textContent = d.approver ?? '-';
                    $('#show_purpose').textContent  = d.purpose ?? '-';

                    let photos = [];
                    try { photos = JSON.parse(d.photos || '[]'); } catch(e) { photos = []; }
                    renderPhotos(photos, `res-${d.id || 'x'}`);
               });
          });

          // Flash toast
          @if(session('status'))
               Swal.fire({icon:'success', title: @json(session('status')), timer:2200, showConfirmButton:false });
          @endif
          @if ($errors->any())
               Swal.fire({icon:'error', title:'Form hatası', html:`{!! implode('<br>', $errors->all()) !!}`});
          @endif
     });
</script>

{{-- Search debounce --}}
<script>
     const q = document.querySelector('input[name="q"]');
     if (q) { 
          let t; 
          q.addEventListener('input', () => { 
               clearTimeout(t); 
               t = setTimeout(() => q.form.requestSubmit(), 500);
          });
     }
</script>
@endsection