@extends('business.layouts.app')

@section('content')
<main class="main-content" x-data="vehiclesCrud()">
    <div class="d-block d-md-flex justify-content-between">
        <div class="row align-items-center mb-5">
            <div class="col">
                <div class="d-flex align-items-center">
                    <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                        <i class="ph-duotone ph-garage fs-3"></i>
                    </div>
                    <div>
                        <h4 class="fw-bold text-dark mb-0">Vehicles</h4>
                        <p class="text-muted mb-0 small">Manage Vehicles available in current Branch.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        @php
            $stats = [
                ['label' => 'Total', 'value' => $total, 'color' => 'primary', 'icon' => 'ph-flag-banner'],
                ['label' => 'Available', 'value' => $available, 'color' => 'success', 'icon' => 'ph-check-circle'],
                ['label' => 'On-Duty', 'value' => $onDuty, 'color' => 'danger', 'icon' => 'ph-road-horizon'],
                ['label' => 'In-Service', 'value' => $inService, 'color' => 'secondary', 'icon' => 'ph-wrench'],
            ];
        @endphp

        @foreach($stats as $stat)
        <div class="col-6 col-md-4 col-lg-2">
            <div class="card h-100 shadow-none border bg-opacity-10 bg-{{ $stat['color'] }} text-{{ $stat['color'] }}">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar avatar-sm me-2">
                            <span class="avatar-initial rounded-3 p-1">
                                <i class="icon-base ph-bold {{ $stat['icon'] }}"></i>
                            </span>
                        </div>
                        <small class="text-uppercase fw-semibold">{{ $stat['label'] }}</small>
                    </div>
                    <div class="d-flex align-items-baseline">
                        <h4 class="mb-0 fw-bold">{{ $stat['value'] }}</h4>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    {{-- Vehicles Management Table --}}
    <div class="card saas-card p-0">
        <div class="card-header pt-4">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-end gap-3">

                <div class="w-100" style="max-width: 100px">
                    <label class="form-label">Show</label>
                    <select class="form-control form-select" 
                    x-model="per_page" @change="changePerPage()">
                        <template x-for="page in recordsPerPage">
                            <option x-text="page" :value="page"></option>
                        </template>
                    </select>
                </div>

                {{-- Left Side: Search Bar --}}
                <div class="w-100" style="max-width: 400px">
                    <label class="form-label">Search</label>
                    <div class="input-group input-group-merge">
                        <span class="input-group-text border-end-0 ps-3" id="search-icon">
                            <i class="ph-bold ph-magnifying-glass text-muted"></i>
                        </span>
                        <input type="text" 
                        class="form-control border-start-0 ps-2" 
                        x-model="filters.search"
                        @input.debounce.500ms="performSearch()"
                        placeholder="Search by Name, or Contact...">
                    </div>
                </div>


                {{-- Right Side: Action Buttons --}}
                <div class="d-flex align-items-center flex-wrap gap-2 justify-content-end w-100">
                    
                    <button type="button" 
                            x-show="filters.search !== '' || per_page != 10" 
                            x-cloak
                            @click="resetFilters()" 
                            class="btn btn-outline-danger border-danger border-opacity-25 btn-icon" 
                            data-bs-toggle="tooltip" 
                            title="Clear Filters">
                        <i class="ph-bold ph-funnel-x"></i>
                    </button>

                    <button @click="openModal(null)" class="btn btn-primary shadow-sm">
                        <i class="ph-bold ph-plus-circle me-2"></i> Add Vehicle
                    </button>
                </div>

            </div>
        </div>
        <div class="table-responsive text-nowrap">
            <table class="table table-custom table-hover">
                <thead>
                    <tr>
                        <th>Vehicle #</th>
                        <th>Vehicle Type</th>
                        <th>Vehicle Capacity</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    <template x-for="vehicle in vehicles" :key="vehicle.id">
                        <tr x-show="!isLoading">
                            <td>
                                <span class="fw-semibold" x-text="vehicle.registration_number ?? '--'"></span><br>
                                <small class="fw-medium text-secondary" x-text="vehicle.name ?? '--'"></small>
                            </td>
                            <td x-text="vehicle.vehicle_type?.name ?? '--'"></td>
                            <td x-text="vehicle.vehicle_capacity?.name ?? '--'"></td>
                            <td>
                                <span class="badge bg-opacity-10 px-3 bg-primary text-primary" x-text="vehicle.status"></span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    {{-- <a :href="'/vehicles/' + vehicle.id" data-bs-toggle="tooltip" class="btn btn-icon" data-bs-placement="top" aria-label="Preview Vehicle" data-bs-original-title="Preview Vehicle">
                                        <i class="icon-base ph ph-eye icon-md"></i>
                                    </a> --}}
                                    <a href="javascript:void(0)" class="text-decoration-none m-1" @click="openModal(vehicle)">
                                        <i class="icon-base ph ph-pencil-simple"></i>
                                    </a>
                                    <a href="javascript:void(0)" class="m-1 text-decoration-none text-danger" @click="deleteVehicle(vehicle.id)">
                                        <i class="icon-base ph ph-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="isLoading === true">
                        <td class="text-center" colspan="5">
                            <div class="me-2 spinner-border spinner-border-sm text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            please wait...
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td class="px-3" colspan="6">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted small">
                                    <template x-if="pagination.total > 0">
                                        <span>
                                            Showing <span class="fw-semibold" x-text="pagination.from"></span> 
                                            to <span class="fw-semibold" x-text="pagination.to"></span> 
                                            of <span class="fw-semibold" x-text="pagination.total"></span> entries
                                        </span>
                                    </template>
                                    <template x-if="pagination.total === 0 && !isLoading">
                                        <span>No entries found</span>
                                    </template>
                                </div>

                                <nav aria-label="Page navigation">
                                    <ul class="pagination saas-pagination mb-0">
                                        <li class="page-item first" :class="{ 'disabled': pagination.current_page === 1 }">
                                            <a class="page-link" 
                                            x-init="new bootstrap.Tooltip($el)"
                                            data-bs-toggle="tooltip" data-bs-offset="0,4" 
                                            data-bs-placement="top" data-bs-html="true" 
                                            title="Move to first page"
                                            href="javascript:void(0);" @click="getVehicles(1)">
                                                <i class="icon-base ph ph-caret-double-left icon-sm"></i>
                                            </a>
                                        </li>

                                        <template x-for="(link, index) in pagination.links" :key="index">
                                            <li class="page-item" 
                                                :class="{ 
                                                    'active': link.active, 
                                                    'disabled': !link.url,
                                                    'prev': link.label.includes('Previous'),
                                                    'next': link.label.includes('Next')
                                                }">
                                                <a class="page-link" 
                                                x-init="new bootstrap.Tooltip($el)"
                                                data-bs-toggle="tooltip" data-bs-offset="0,4" 
                                                data-bs-placement="top" data-bs-html="true" 
                                                title="Move to next page"
                                                :title="renderPaginationTooltip(link.label)"
                                                href="javascript:void(0);" 
                                                @click="getVehicles(link.url ? new URL(link.url).searchParams.get('page') : pagination.current_page)"
                                                x-html="renderPaginationLabel(link.label)">
                                                </a>
                                            </li>
                                        </template>

                                        <li class="page-item last" :class="{ 'disabled': pagination.current_page === pagination.last_page }">
                                            <a class="page-link" 
                                            x-init="new bootstrap.Tooltip($el)"
                                            data-bs-toggle="tooltip" data-bs-offset="0,4" 
                                            data-bs-placement="top" data-bs-html="true" 
                                            title="Move to last page"
                                            href="javascript:void(0);" @click="getVehicles(pagination.last_page)">
                                                <i class="icon-base ph ph-caret-double-right icon-sm"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    {{-- Vehicle Management Modal --}}
    <div class="modal fade" id="vehicleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <div class="modal-header">
                    <div class="modal-title d-flex align-items-center">
                        <i class="fs-4 text-primary ph-duotone ph-garage me-2"></i>
                        <h5 class="mb-0" x-text="isEdit ? 'Edit Vehicle' : 'Create Vehicle'"></h5>

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

                <form @submit.prevent="submitForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <h5 class="mb-0">Basic Info</h5>

                            <!-- Registration Number -->
                            <div class="col-md-3">
                                <label class="form-label">Registration Number<span class="fs-6 text-danger">*</span></label>
                                <input type="text"
                                    x-model="form.registration_number"
                                    class="form-control"
                                    :class="{ 'is-invalid': errors.registration_number }"
                                    @input="formatReg()"
                                    placeholder="TN01AB1234">
                                <div class="invalid-feedback" x-text="errors.registration_number?.[0]"></div>
                            </div>

                            <!-- Name -->
                            <div class="col-md-3">
                                <label class="form-label">Name<span class="fs-6 text-danger">*</span></label>
                                <input type="text"
                                    x-model="form.name"
                                    class="form-control"
                                    placeholder="vehicle's name"
                                    :class="{ 'is-invalid': errors.name }"
                                    @input="delete errors.name">
                                <div class="invalid-feedback" x-text="errors.name?.[0]"></div>
                            </div>

                            <!-- Vehicle Type -->
                            <div class="col-md-3">
                                <label class="form-label">Vehicle Type<span class="fs-6 text-danger">*</span></label>
                                <select x-model="form.vehicle_type"
                                    class="form-select"
                                    :class="{ 'is-invalid': errors.vehicle_type }"
                                    @change="delete errors.vehicle_type">
                                    <option value="">Select</option>
                                    <template x-for="vehicleType in vehicleTypes" :key="vehicleType.id">
                                        <option x-text="vehicleType.name" :value="vehicleType.name"></option>
                                    </template>
                                </select>
                                <div class="invalid-feedback" x-text="errors.vehicle_type?.[0]"></div>
                            </div>

                            <!-- Vehicle Capacity -->
                            <div class="col-md-3">
                                <label class="form-label">Vehicle Capacity</label>
                                <select class="form-control form-select"
                                x-model="form.unit"
                                :class="{ 'is-invalid': errors.unit }">
                                  <option value="">Select Unit</option>
                                  <template x-for="unit in vehicleCapacities" :key="unit.id">
                                      <option x-text="unit.name" :value="unit.name"></option>
                                  </template>
                                </select>
                                <div class="invalid-feedback" x-text="errors.unit?.[0]"></div>
                            </div>

                            <!-- Status -->
                            <div class="col-md-4">
                                <label class="form-label">Status</label>
                                <select x-model="form.status" class="form-select">
                                  <template x-for="status in vehicleStatuses">
                                    <option x-text="status" :value="status"></option>
                                  </template>
                                </select>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" x-text="isEdit ? 'Update Vehicle' : 'Save Vehicle'"></button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</main>
@endsection

@push('inline-scripts')
    <script>
        function vehiclesCrud() {
            return {
                // vehicle create / edit
                bsModal: null,
                isEdit: false,
                errors: {},
                form: {
                    id: null,
                    registration_number: '',
                    name: '',
                    business_vehicle_type_id: null,
                    business_vehicle_capacity_id: null,
                    status: "AVAILABLE",
                },
                // vehicles data
                vehicles: [],
                per_page: 10,
                recordsPerPage: [10, 25, 50, 75, 100],
                vehicleStatuses: ['AVAILABLE', 'ON-DUTY', 'IN-SERVICE', 'UNAVAILABLE', 'BLACKLISTED'],
                vehicleTypes: [],
                vehicleCapacities: [],
                pagination: {
                    current_page: 1,
                    last_page: 1,
                    links: [],
                    from: 0,
                    to: 0,
                    total: 0
                },
                filters: {
                    search: '',
                },
                isLoading: false,

                /// format vehicle registration number
                formatReg() {
                    delete this.errors.registration_number;

                    // 1. Strip non-alphanumeric and force Uppercase (limit to 10 chars)
                    let val = this.form.registration_number
                        .replace(/[^a-zA-Z0-9]/g, '')
                        .toUpperCase()
                        .substring(0, 10);

                    // 2. Apply dynamic spacing using Regex
                    // This captures: State(2) District(2) Series(1-2) Number(1-4)
                    let match = val.match(/^([A-Z]{0,2})(\d{0,2})([A-Z]{0,2})(\d{0,4})/);
                    
                    if (match) {
                        // Extract the groups (match[0] is the full string, 1-4 are the groups)
                        let parts = [];
                        for (let i = 1; i <= 4; i++) {
                            if (match[i]) parts.push(match[i]);
                        }
                        
                        // Join with a single space
                        this.form.registration_number = parts.join(' ');
                    } else {
                        this.form.registration_number = val;
                    }
                },

                init() {
                  this.bsModal = new bootstrap.Modal(document.getElementById('vehicleModal'));
                  // Set initial search from URL if present
                  this.filters.search = new URLSearchParams(window.location.search).get('search') || '';
                  this.fetchVehicleTypes();
                  this.fetchVehicleCapacities();
                  this.getVehicles(); // fetch vehicles data
                },

                // --- MODAL LOGIC ---
                async openModal(vehicle) {
                    // clear errors when opening modal
                    this.errors = {};

                    if(vehicle) {
                        this.isEdit = true;
                        // Set basic info
                        this.form = { ...vehicle };
                    } else {
                        this.isEdit = false;
                        this.form = {
                            id: null,
                            registration_number: '',
                            name: '',
                            business_vehicle_type_id: null,
                            business_vehicle_capacity_id: null,
                            status: "AVAILABLE",
                        };
                    }
                    this.bsModal.show();
                },

                // --- DATA MANIPULATION LOGIC ---

                // Helper to clean up Laravel's pagination labels
                renderPaginationLabel(label) {
                    if (label.includes('Previous')) {
                        return '<i class="icon-base ph ph-caret-left icon-sm"></i>';
                    }
                    if (label.includes('Next')) {
                        return '<i class="icon-base ph ph-caret-right icon-sm"></i>';
                    }
                    return label;
                },

                renderPaginationTooltip(label) {
                    let pref = "Move to ";
                    if (label.includes('Previous')) {
                        pref += 'previous page';
                    }
                    else if (label.includes('Next')) {
                        pref += 'next page';
                    }
                    else {
                        pref += 'page '+label;
                    }
                    return pref;
                },

                fetchVehicleTypes()
                {
                    axios.get('/dropdown/businessVehicleTypes')
                        .then(res => {
                            this.vehicleTypes = res.data.data;
                        });
                },

                fetchVehicleCapacities()
                {
                    axios.get('/dropdown/businessVehicleCapacities')
                        .then(res => {
                            this.vehicleCapacities = res.data.data;
                        });
                },

                getVehicles(page = 1) {
                    this.isLoading = true;
                    this.pagination.current_page = page;

                    // Optional: Sync search term to URL bar without reloading
                    const url = new URL(window.location.href);
                    if(this.filters.search) {
                        url.searchParams.set('search', this.filters.search);
                    } else {
                        url.searchParams.delete('search');
                    }
                    window.history.replaceState({}, '', url);

                    axios.get('/data/vehicles', {
                        params: {
                            ownership_type: this.ownershipType,
                            search: this.filters.search,
                            page: page,
                            per_page: this.per_page // Send the count to backend
                        },
                    })
                    .then(res => {
                        this.vehicles = res.data.data;
                        // Capture the full pagination object
                        this.pagination.current_page = res.data.meta.current_page;
                        this.pagination.last_page = res.data.meta.last_page;
                        this.pagination.links = res.data.meta.links;
                        this.pagination.from = res.data.meta.from || 0;
                        this.pagination.to = res.data.meta.to || 0;
                        this.pagination.total = res.data.meta.total || 0;
                    })
                    .finally(() => {
                        this.isLoading = false;
                    });
                },

                // Triggered by search input
                performSearch() {
                    this.getVehicles(1); // Reset to page 1 on search
                },
                // Triggered when dropdown changes
                changePerPage() {
                    this.getVehicles(1); // Always reset to page 1 when changing count
                },
                resetFilters() {
                    // 1. Reset the search string
                    this.filters.search = '';
                    
                    // 2. Reset the per_page count (optional, keep if you want a full reset)
                    this.per_page = 10;
                    
                    // 3. Clear the URL search params so the browser bar matches the state
                    const url = new URL(window.location.href);
                    url.searchParams.delete('search');
                    window.history.replaceState({}, '', url);

                    // 4. Re-fetch the first page of results
                    this.getVehicles(1);
                },

                submitForm() {
                    // clear previous errors before new request
                    this.errors = {};
    
                    let formData = new FormData();
                    formData.append('registration_number', this.form.registration_number);
                    formData.append('name', this.form.name);
                    formData.append('business_vehicle_type_id', this.form.business_vehicle_type_id);
                    formData.append('business_vehicle_capacity_id', this.form.business_vehicle_capacity_id);
                    formData.append('status', this.form.status);
    
                    let request;
                    if(this.isEdit) {
                        request = axios.patch(`/vehicles/${this.form.id}`, formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        });
                    } else {
                        request = axios.post('/vehicles', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        });
                    }
    
                    // Execute the request
                    request
                        .then(res => {
                            // Successful request
                            this.bsModal.hide();
                            this.getVehicles();
                            // Success notification
                            showToast(this.isEdit ? 'Vehicle updated!' : 'Vehicle created!');
                        })
                        .catch(error => {
                            if(error.response && error.response.status === 422) {
                                console.log(error.response.data);
                                this.errors = error.response.data.errors;
                                // Error Notification
                                showToast('Please fix the validation errors!', 'error');
                            } else {
                                console.error(error);
                                showToast('Something went wrong! Please try again later...', 'error');
                            }
                        });
                },

                deleteVehicle(id) {
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // User clicked "Yes" - Proceed with Delete
                            axios.delete(`/vehicles/${id}`)
                                .then(() => {
                                    this.vehicles = this.vehicles.filter(b => b.id !== id);
                                    showToast('Vehicle deleted!');
                                })
                                .catch(err => {
                                    console.error(err);
                                    showToast('Failed to delete vehicle!');
                                });
                        }
                    });
                }
            };
        }
    </script>
@endpush