@extends('layouts.app')

@section('title', 'Fleet Registry')

@section('content')
<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <h4 class="mb-0 fw-bold">Fleet Registry</h4>
        <p class="text-muted small mb-0">Manage and monitor your enterprise vehicle fleet.</p>
    </div>
    <button class="btn btn-primary shadow-sm btn-sm px-3" data-bs-toggle="modal" data-bs-target="#addVehicleModal">
        <i class="bi bi-plus-lg me-1"></i> Register Vehicle
    </button>
</div>

@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4">
        {{ session('success') }}
    </div>
@endif

<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100">
            <span class="text-muted small fw-bold text-uppercase opacity-75">Total Vehicles</span>
            <h2 class="mb-0 fw-bold mt-2">{{ $fleets->count() }}</h2>
            <div class="mt-2 small text-success"><i class="bi bi-check-circle-fill"></i> Operational</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100">
            <span class="text-muted small fw-bold text-uppercase opacity-75">Active</span>
            <h2 class="mb-0 fw-bold mt-2">{{ $fleets->where('status', 'Active')->count() }}</h2>
            <div class="mt-2 small text-primary"><i class="bi bi-truck"></i> Ready</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100">
            <span class="text-muted small fw-bold text-uppercase opacity-75">Maintenance</span>
            <h2 class="mb-0 fw-bold mt-2">{{ $fleets->where('status', 'Maintenance')->count() }}</h2>
            <div class="mt-2 small text-warning"><i class="bi bi-tools"></i> Service</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm rounded-4 p-3 h-100">
            <span class="text-muted small fw-bold text-uppercase opacity-75">Inactive</span>
            <h2 class="mb-0 fw-bold mt-2">{{ $fleets->where('status', 'Inactive')->count() }}</h2>
            <div class="mt-2 small text-danger"><i class="bi bi-geo-alt-fill"></i> Offline</div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4 border-0 py-3 text-uppercase small fw-bold text-muted">Vehicle Number</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Driver Name</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Vehicle Type</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted">Status</th>
                        <th class="border-0 py-3 text-uppercase small fw-bold text-muted text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($fleets as $fleet)
                    <tr>
                        <td class="ps-4 fw-bold">{{ $fleet->vehicle_number }}</td>
                        <td>{{ $fleet->driver_name }}</td>
                        <td>{{ $fleet->vehicle_type }}</td>
                        <td>
                            <span class="badge bg-{{ $fleet->status == 'Active' ? 'success' : ($fleet->status == 'Maintenance' ? 'warning' : 'secondary') }}-subtle text-{{ $fleet->status == 'Active' ? 'success' : ($fleet->status == 'Maintenance' ? 'warning' : 'secondary') }} rounded-pill px-3">
                                {{ $fleet->status }}
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            <div class="d-flex gap-2 justify-content-end">
                                <button class="btn btn-light btn-sm rounded-3" data-bs-toggle="modal" data-bs-target="#editVehicleModal{{ $fleet->id }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <form action="{{ route('fleet.destroy', $fleet->id) }}" method="POST" onsubmit="return confirm('Delete this vehicle?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-light btn-sm rounded-3 text-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            </div>

                            <!-- Edit Modal -->
                            <div class="modal fade text-start" id="editVehicleModal{{ $fleet->id }}" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content border-0 shadow-lg rounded-4">
                                        <form action="{{ route('fleet.update', $fleet->id) }}" method="POST">
                                            @csrf
                                            @method('PUT')
                                            <div class="modal-header border-0 p-4">
                                                <h5 class="fw-bold mb-0">Edit Vehicle</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body p-4 pt-0">
                                                <div class="mb-3">
                                                    <label class="form-label small fw-bold">Vehicle Number</label>
                                                    <input type="text" name="vehicle_number" class="form-control rounded-3" value="{{ $fleet->vehicle_number }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label small fw-bold">Driver Name</label>
                                                    <input type="text" name="driver_name" class="form-control rounded-3" value="{{ $fleet->driver_name }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label small fw-bold">Vehicle Type</label>
                                                    <select name="vehicle_type" class="form-select rounded-3" required>
                                                        <option value="Heavy Truck" {{ $fleet->vehicle_type == 'Heavy Truck' ? 'selected' : '' }}>Heavy Truck</option>
                                                        <option value="Delivery Van" {{ $fleet->vehicle_type == 'Delivery Van' ? 'selected' : '' }}>Delivery Van</option>
                                                        <option value="Container Truck" {{ $fleet->vehicle_type == 'Container Truck' ? 'selected' : '' }}>Container Truck</option>
                                                    </select>
                                                </div>
                                                <div class="mb-0">
                                                    <label class="form-label small fw-bold">Status</label>
                                                    <select name="status" class="form-select rounded-3" required>
                                                        <option value="Active" {{ $fleet->status == 'Active' ? 'selected' : '' }}>Active</option>
                                                        <option value="Maintenance" {{ $fleet->status == 'Maintenance' ? 'selected' : '' }}>Maintenance</option>
                                                        <option value="Inactive" {{ $fleet->status == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="modal-footer border-0 p-4 pt-0">
                                                <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-primary rounded-3 px-4">Save Changes</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="py-5 text-center text-muted small">No vehicles registered. Click "Register Vehicle" to start.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="addVehicleModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <form action="{{ route('fleet.store') }}" method="POST">
                @csrf
                <div class="modal-header border-0 p-4">
                    <h5 class="fw-bold mb-0">Register New Vehicle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 pt-0">
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Vehicle Number</label>
                        <input type="text" name="vehicle_number" class="form-control rounded-3" placeholder="e.g. TR-2042" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Driver Name</label>
                        <input type="text" name="driver_name" class="form-control rounded-3" placeholder="Full name" required>
                    </div>
                    <div class="mb-0">
                        <label class="form-label small fw-bold">Vehicle Type</label>
                        <select name="vehicle_type" class="form-select rounded-3" required>
                            <option value="Heavy Truck">Heavy Truck</option>
                            <option value="Delivery Van">Delivery Van</option>
                            <option value="Container Truck">Container Truck</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-3 px-4">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection