@extends('layouts.app')


@section('content')

<div class="d-flex justify-content-between align-items-center mb-3">

    <h5 class="mb-0" style="font-weight:600;">
        <i class="fas fa-car me-2" style="color:var(--admin-primary)"></i>
        Vehicles
    </h5>

    <a href="{{ route('vehicles.create') }}" class="btn-admin-accent">
        <i class="fas fa-plus me-1"></i> Add Vehicle
    </a>

</div>


<div class="admin-card">

    <div class="admin-card-body">


        <!-- Category Filter -->
        <form method="GET"
              action="{{ route('vehicles.index') }}"
              class="mb-3">

            <div class="row">

                <div class="col-md-4">

                    <label class="form-label">
                        Filter by Category
                    </label>

                    <select name="category_id"
                            class="form-control"
                            onchange="this.form.submit()">

                        <option value="">
                            All Categories
                        </option>

                        @foreach($categories as $category)

                            <option value="{{ $category->id }}"
                                {{ request('category_id') == $category->id ? 'selected' : '' }}>

                                {{ $category->name }}

                            </option>

                        @endforeach

                    </select>

                </div>

                <div class="col-md-2 d-flex align-items-end">

                    @if(request('category_id'))

                        <a href="{{ route('vehicles.index') }}"
                           class="btn-admin-outline">

                            <i class="fas fa-times me-1"></i>
                            Clear

                        </a>

                    @endif

                </div>

            </div>

        </form>


        @if($vehicles->count() > 0)


        <div style="overflow-x:auto;">

            <table class="admin-table">

                <thead>

                    <tr>

                      

                        <th>Name</th>

                        <th>Category</th>

                        <th>Vehicle Type</th>

                       

                        <th>Departure</th>

                        <th>Return</th>

                        <th>Price</th>

                        <th>Status</th>

                        <th class="text-end" width="120">
                            Actions
                        </th>

                    </tr>

                </thead>


                <tbody>

                @foreach($vehicles as $vehicle)

                    <tr>

                      


                        <!-- Name -->
                        <td>
                            <strong>
                                {{ $vehicle->name }}
                            </strong>
                        </td>


                        <!-- Category -->
                        <td>
                            {{ $vehicle->category->name ?? '-' }}
                        </td>


                        <!-- Vehicle Type -->
                        <td>
                            {{ $vehicle->vehicle_type ?? '-' }}
                        </td>


                      

                        <!-- Departure Time -->
                        <td>

                            @if($vehicle->departure_time)

                                {{ \Carbon\Carbon::parse($vehicle->departure_time)->format('h:i A') }}

                            @else

                                -

                            @endif

                        </td>


                        <!-- Return Time -->
                        <td>

                            @if($vehicle->return_time)

                                {{ \Carbon\Carbon::parse($vehicle->return_time)->format('h:i A') }}

                            @else

                                -

                            @endif

                        </td>


                        <!-- Price -->
                        <td>
                            ₹{{ number_format($vehicle->price ?? 0, 2) }}
                        </td>


                        <!-- Status -->
                        <td>

                            @if($vehicle->status == 1)

                                <span class="badge bg-success">
                                    Active
                                </span>

                            @else

                                <span class="badge bg-secondary">
                                    Inactive
                                </span>

                            @endif

                        </td>


                        <!-- Actions -->
                        <td class="text-end">

                            <div class="d-flex justify-content-end gap-1">

                                <a href="{{ route('vehicles.edit', $vehicle->id) }}"
                                   class="btn-admin-sm btn-admin-edit">

                                    <i class="fas fa-pen"></i>

                                </a>


                                <button class="btn-admin-sm btn-admin-delete"
                                        onclick="handleDelete({{ $vehicle->id }})">

                                    <i class="fas fa-trash"></i>

                                </button>

                            </div>

                        </td>

                    </tr>

                @endforeach

                </tbody>

            </table>

        </div>


        <!-- Delete Modal -->

        <div class="modal fade admin-modal"
             id="deleteModal"
             tabindex="-1">

            <div class="modal-dialog modal-dialog-centered modal-sm">

                <form action=""
                      method="POST"
                      id="deleteVehicleForm">

                    @csrf

                    @method('DELETE')


                    <div class="modal-content">

                        <div class="modal-header">

                            <h5 class="modal-title">
                                Delete Vehicle
                            </h5>

                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal">
                            </button>

                        </div>


                        <div class="modal-body text-center">

                            <div class="icon-warn">

                                <i class="fas fa-exclamation-triangle"></i>

                            </div>

                            <p>
                                Are you sure you want to delete this vehicle?
                            </p>

                        </div>


                        <div class="modal-footer">

                            <button type="button"
                                    class="btn-admin-outline"
                                    data-bs-dismiss="modal">

                                Cancel

                            </button>


                            <button type="submit"
                                    class="btn-admin-sm btn-admin-delete">

                                <i class="fas fa-trash me-1"></i>
                                Delete

                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>


        @else

        <div class="admin-empty">

            <i class="fas fa-car-side"></i>

            <h5>No Vehicles Yet</h5>

            <p>
                Create your first vehicle to manage taxi services.
            </p>

        </div>

        @endif


    </div>

</div>

@endsection


@section('scripts')

<script>

function handleDelete(id)
{
    let form = document.getElementById('deleteVehicleForm');

    form.action = '{{ url("vehicles") }}/' + id;

    new bootstrap.Modal(
        document.getElementById('deleteModal')
    ).show();
}

</script>

@endsection