@extends('layouts.admin')
@section('page_header')
     <div class="page-header" style="margin-top:0; margin-bottom:20px;">
          <h1 class="page-title my-auto">Vehicles</h1>
          <div>
               <ol class="breadcrumb mb-0 align-items-center">
                    <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Vehicles</li>
                    <li class="breadcrumb-item">
                         <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#vehicleCreateModal">
                              <i class="fe fe-plus me-1"></i> New Vehicle
                         </button>
                    </li>
               </ol>
          </div>
     </div>
@endsection
@section('content')
     <div class="row">
          <div class="col-12 col-sm-12">
               <div class="card">
                    <div class="card-body product-table">
                         <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

                              @php
                                   $perPageSelected = (int) ($filters['per_page'] ?? request('per_page', 10));
                                   if (!in_array($perPageSelected, [10,25,50,100], true)) { $perPageSelected = 10; }
                                   $qValue = $filters['q'] ?? request('q', '');
                              @endphp

                              <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($perPageSelected===10)>10</option>
                                        <option value="25"  @selected($perPageSelected===25)>25</option>
                                        <option value="50"  @selected($perPageSelected===50)>50</option>
                                        <option value="100" @selected($perPageSelected===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 plate, brand, model..." value="{{ $qValue }}">
                                   </div>
                              </div>
                         </form>

                         <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>Plate ID</th>
                                                       <th>Brand / Model</th>
                                                       <th>Year</th>
                                                       <th>Fuel Type</th>
                                                       <th>Transmission</th>
                                                       <th>Avg. Consumption</th>
                                                       <th>Status</th>
                                                       <th>Action</th>
                                                  </tr>
                                             </thead>
                                             <tbody>
                                                  @forelse($vehicles as $v)
                                                  @php
                                                       $status = strtolower(trim((string) ($v->status ?? '')));
                                                       $statusBadge = [
                                                            'active'   => 'bg-success-transparent text-success',
                                                            'inactive' => 'bg-secondary-transparent text-secondary',
                                                            'service'  => 'bg-warning-transparent text-warning',
                                                            'blocked'  => 'bg-danger-transparent text-danger',
                                                            'retired'  => 'bg-dark-transparent text-dark',
                                                       ];
                                                       $classes = $statusBadge[$status] ?? 'bg-secondary-transparent text-secondary';
                                                       $label   = ucfirst($status ?: 'inactive');
                                                  @endphp
                                                       <tr>
                                                            <td><h6 class="mb-0 fs-14 fw-semibold">{{ $v->plate }}</h6></td>
                                                            <td>
                                                                 <div class="d-flex">
                                                                      <img class="avatar-sm" src="{{ $v->brand_logo_url }}" width="20" />
                                                                      <h6 class="ms-3 my-auto fs-14 fw-semibold">{{ $v->brand.' - '.$v->model }}</h6>
                                                                 </div>
                                                            </td>
                                                            <td>{{ $v->year }}</td>
                                                            <td>{{ $v->fuel_type }}</td>
                                                            <td>{{ $v->transmission }}</td>
                                                            <td><h6 class="mb-0 fs-14 fw-semibold">{{ $v->avg_consumption_l_per_100km }}</h6></td>
                                                            <td>
                                                                 <span class="badge {{ $classes }} rounded-pill p-2 px-3">{{ $label }}</span>
                                                            </td>
                                                            <td>
                                                                 <div class="g-2 d-flex align-items-center gap-1">
                                                                      {{-- EDIT --}}
                                                                      <button type="button"
                                                                           class="btn text-primary btn-sm js-edit-vehicle"
                                                                           title="Edit"
                                                                           data-update-url="{{ route('web.vehicles.update', $v) }}"
                                                                           data-plate="{{ $v->plate }}"
                                                                           data-brand="{{ $v->brand }}"
                                                                           data-model="{{ $v->model }}"
                                                                           data-year="{{ $v->year }}"
                                                                           data-fuel_type="{{ $v->fuel_type }}"
                                                                           data-transmission="{{ $v->transmission }}"
                                                                           data-avg="{{ $v->avg_consumption_l_per_100km }}"
                                                                           data-odo="{{ $v->odometer_current }}"
                                                                           data-logo="{{ $v->brand_logo_url }}"
                                                                           data-status="{{ $v->status }}">
                                                                           <span class="fe fe-edit fs-14"></span>
                                                                      </button>

                                                                      {{-- DELETE --}}
                                                                      <button type="button"
                                                                           class="btn text-danger btn-sm js-delete-vehicle"
                                                                           title="Delete"
                                                                           data-delete-url="{{ route('web.vehicles.destroy', $v) }}"
                                                                           data-name="{{ $v->plate }}">
                                                                           <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>

                         <div class="row mt-3 align-items-center">
                              <div class="col-sm-12 col-md-6 my-auto">
                                   @if($vehicles->total() > 0)
                                        <span>Showing {{ $vehicles->firstItem() }} to {{ $vehicles->lastItem() }} of {{ $vehicles->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">
                                        {{ $vehicles->appends(request()->except('page'))->onEachSide(1)->links('vendor.pagination.sash') }}
                                   </nav>
                              </div>
                         </div>

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

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

     <!-- Create Modal -->
     <div class="modal fade" id="vehicleCreateModal" tabindex="-1" aria-hidden="true">
          <div class="modal-dialog modal-lg modal-dialog-scrollable">
               <form class="modal-content" method="POST" action="{{ route('web.vehicles.store') }}">
                    @csrf
                    <div class="modal-header">
                         <h5 class="modal-title">New Vehicle</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">Plate <span class="text-danger">*</span></label>
                                   <input type="text" name="plate" class="form-control" required>
                              </div>
                              <div class="col-md-4">
                                   <label class="form-label">Brand</label>
                                   <input type="text" name="brand" class="form-control">
                              </div>
                              <div class="col-md-4">
                                   <label class="form-label">Model</label>
                                   <input type="text" name="model" class="form-control">
                              </div>

                              <div class="col-md-3">
                                   <label class="form-label">Year</label>
                                   <input type="number" name="year" class="form-control" min="1980" max="2100">
                              </div>
                              <div class="col-md-3">
                                   <label class="form-label">Fuel Type</label>
                                   <select name="fuel_type" class="form-select">
                                        <option value="">—</option>
                                        <option value="petrol">Petrol</option>
                                        <option value="diesel">Diesel</option>
                                        <option value="hybrid">Hybrid</option>
                                        <option value="electric">Electric</option>
                                        <option value="lpg">LPG</option>
                                   </select>
                              </div>
                              <div class="col-md-3">
                                   <label class="form-label">Transmission</label>
                                   <select name="transmission" class="form-select">
                                        <option value="">—</option>
                                        <option value="manual">Manual</option>
                                        <option value="automatic">Automatic</option>
                                   </select>
                              </div>
                              <div class="col-md-3">
                                   <label class="form-label">AVG Consumption (L/100km)</label>
                                   <input type="number" step="0.01" name="avg_consumption_l_per_100km" class="form-control">
                              </div>

                              <div class="col-md-4">
                                   <label class="form-label">Odometer (km)</label>
                                   <input type="number" name="odometer_km" class="form-control" min="0">
                              </div>
                              <div class="col-md-8">
                                   <label class="form-label">Brand Logo URL</label>
                                   <input type="url" name="brand_logo_url" class="form-control" placeholder="https://...">
                              </div>

                              <div class="col-md-4">
                                   <label class="form-label">Status <span class="text-danger">*</span></label>
                                   <select name="status" class="form-select" required>
                                        <option value="active">active</option>
                                        <option value="inactive">inactive</option>
                                        <option value="service">service</option>
                                        <option value="blocked">blocked</option>
                                        <option value="retired">retired</option>
                                   </select>
                              </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="vehicleEditModal" tabindex="-1" aria-hidden="true">
          <div class="modal-dialog modal-lg modal-dialog-scrollable">
               <form class="modal-content" method="POST" id="vehicleEditForm" action="#">
                    @csrf
                    @method('PUT')
                    <div class="modal-header">
                         <h5 class="modal-title">Update Vehicle</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">Plate <span class="text-danger">*</span></label>
                                   <input type="text" name="plate" class="form-control" required>
                              </div>
                              <div class="col-md-4">
                                   <label class="form-label">Brand</label>
                                   <input type="text" name="brand" class="form-control">
                              </div>
                              <div class="col-md-4">
                                   <label class="form-label">Model</label>
                                   <input type="text" name="model" class="form-control">
                              </div>

                              <div class="col-md-3">
                                   <label class="form-label">Year</label>
                                   <input type="number" name="year" class="form-control" min="1980" max="2100">
                              </div>
                              <div class="col-md-3">
                                   <label class="form-label">Fuel Type</label>
                                   <select name="fuel_type" class="form-select">
                                        <option value="">—</option>
                                        <option value="petrol">Petrol</option>
                                        <option value="diesel">Diesel</option>
                                        <option value="hybrid">Hybrid</option>
                                        <option value="electric">Electric</option>
                                        <option value="lpg">LPG</option>
                                   </select>
                              </div>
                              <div class="col-md-3">
                                   <label class="form-label">Transmission</label>
                                   <select name="transmission" class="form-select">
                                        <option value="">—</option>
                                        <option value="manual">Manual</option>
                                        <option value="automatic">Automatic</option>
                                   </select>
                              </div>
                              <div class="col-md-3">
                                   <label class="form-label">AVG Consumption (L/100km)</label>
                                   <input type="number" step="0.01" name="avg_consumption_l_per_100km" class="form-control">
                              </div>

                              <div class="col-md-4">
                                   <label class="form-label">Odometer (km)</label>
                                   <input type="number" name="odometer_current" class="form-control" min="0">
                              </div>
                              <div class="col-md-8">
                                   <label class="form-label">Brand Logo URL</label>
                                   <input type="url" name="brand_logo_url" class="form-control" placeholder="https://...">
                              </div>

                              <div class="col-md-4">
                                   <label class="form-label">Status <span class="text-danger">*</span></label>
                                   <select name="status" class="form-select" required>
                                        <option value="active">active</option>
                                        <option value="inactive">inactive</option>
                                        <option value="service">service</option>
                                        <option value="blocked">blocked</option>
                                        <option value="retired">retired</option>
                                   </select>
                              </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>

     {{-- SweetAlert2 --}}
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script>
          document.addEventListener('DOMContentLoaded', () => {
               const editForm  = document.getElementById('vehicleEditForm');
               const editModal = document.getElementById('vehicleEditModal');

               // EDIT: alanları doldur + modalı programatik aç
               document.querySelectorAll('.js-edit-vehicle').forEach(btn => {
                    btn.addEventListener('click', () => {
                         editForm.action = btn.dataset.updateUrl || '#';
                         editForm.querySelector('[name="plate"]').value  = btn.dataset.plate || '';
                         editForm.querySelector('[name="brand"]').value  = btn.dataset.brand || '';
                         editForm.querySelector('[name="model"]').value  = btn.dataset.model || '';
                         editForm.querySelector('[name="year"]').value   = btn.dataset.year || '';
                         editForm.querySelector('[name="fuel_type"]').value = btn.dataset.fuel_type || '';
                         editForm.querySelector('[name="transmission"]').value = btn.dataset.transmission || '';
                         editForm.querySelector('[name="avg_consumption_l_per_100km"]').value = btn.dataset.avg || '';
                         editForm.querySelector('[name="odometer_current"]').value = btn.dataset.odo || '';
                         editForm.querySelector('[name="brand_logo_url"]').value = btn.dataset.logo || '';
                         editForm.querySelector('[name="status"]').value = btn.dataset.status || 'inactive';

                         if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
                              bootstrap.Modal.getOrCreateInstance(editModal).show();
                         } else {
                         // Fallback (bundle eksikse)
                              editModal.classList.add('show'); editModal.style.display = 'block';
                         }
                    });
               });

               // DELETE: SweetAlert onayı + form submit
               document.querySelectorAll('.js-delete-vehicle').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">Araç: <b>${name}</b></div>`,
                              icon: 'warning',
                              showCancelButton: true,
                              confirmButtonText: 'Evet, sil',
                              cancelButtonText: 'Vazgeç',
                              reverseButtons: true
                         }).then(result => {
                              if (result.isConfirmed) {
                                   const form = document.createElement('form');
                                   form.method = 'POST';
                                   form.action = delUrl;
                                   form.innerHTML = `@csrf @method('DELETE')`;
                                   document.body.appendChild(form);
                                   form.submit();
                              }
                         });
                    });
               });

               // FLASH toast örneği (isteğe bağlı)
               @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>
@endsection