@extends('admin.layouts.master')
@section('title', 'Reserve Parking | Vogue Technics')

@section('styles')
    <style>
        .parking-page {
            border-radius: 1.5rem;
        }

        .parking-shell-card {
            background:
                radial-gradient(circle at top left, rgba(var(--bs-success-rgb), 0.09), transparent 28%),
                radial-gradient(circle at top right, rgba(var(--bs-danger-rgb), 0.08), transparent 22%),
                var(--bs-card-bg);
            border: 1px solid var(--bs-border-color);
            border-radius: 1.5rem;
            box-shadow: var(--bs-box-shadow-sm);
        }

        .parking-summary-badge {
            font-size: 0.82rem;
            padding: 0.65rem 0.95rem;
        }

        .parking-card {
            position: relative;
            border-radius: 1.25rem;
            padding: 1.25rem;
            height: 100%;
            color: var(--bs-heading-color);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .parking-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--bs-box-shadow);
        }

        .parking-card-available {
            border: 1px solid rgba(var(--bs-success-rgb), 0.28);
            background: linear-gradient(180deg, rgba(var(--bs-success-rgb), 0.14), rgba(var(--bs-body-bg-rgb), 0.92));
        }

        .parking-card-reserved {
            border: 1px solid rgba(var(--bs-danger-rgb), 0.26) !important;
            background: linear-gradient(180deg, rgba(var(--bs-danger-rgb), 0.16), rgba(var(--bs-body-bg-rgb), 0.92));
        }

        .parking-card-reserved .text-primary {
            color: var(--bs-danger) !important;
        }

        .parking-card-detail {
            background-color: rgba(var(--bs-body-color-rgb), 0.03);
            border: 1px solid var(--bs-border-color);
        }

        .parking-info-card {
            background-color: rgba(var(--bs-body-color-rgb), 0.025);
            border: 1px solid var(--bs-border-color-translucent);
        }

        .parking-slot-number {
            font-size: 1rem;
            letter-spacing: 0.08em;
            color: var(--bs-heading-color);
        }

        .parking-vrm-pill {
            font-size: 0.78rem;
            letter-spacing: 0.08em;
        }

        [data-bs-theme="dark"] .parking-shell-card {
            box-shadow: none;
        }

        [data-bs-theme="dark"] .parking-card-available {
            background: linear-gradient(180deg, rgba(var(--bs-success-rgb), 0.16), rgba(var(--bs-body-bg-rgb), 0.98));
        }

        [data-bs-theme="dark"] .parking-card-reserved {
            background: linear-gradient(180deg, rgba(var(--bs-danger-rgb), 0.18), rgba(var(--bs-body-bg-rgb), 0.98));
        }

        [data-bs-theme="dark"] .parking-card-detail,
        [data-bs-theme="dark"] .parking-info-card {
            background-color: rgba(255, 255, 255, 0.03);
        }
    </style>
@endsection

@section('content')
    <section>
        <div class="parking-page">
            <div class="card border-0 parking-shell-card">
                <div class="card-header py-3 border-bottom">
                    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
                        <div>
                            <h4 class="card-title mb-1">Reserve Parking</h4>
                            <p class="text-body-secondary mb-0">Overview of all 60 parking slots and their current reservation state.</p>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge rounded-pill bg-label-success text-success parking-summary-badge">Available : {{ $availableCount }}</span>
                            <span class="badge rounded-pill bg-label-warning text-warning parking-summary-badge">Reserved : {{ $reservedCount }}</span>
                            <span class="badge rounded-pill bg-label-info text-info parking-summary-badge">Capacity : {{ $capacity }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body mt-2">
                    <div class="row g-4">
                        @foreach ($parkingSlots as $slot)
                            @php
                                $reservation = $slot['reservation'];
                                $quote = $reservation?->quote;
                                $vehicle = $quote?->vehicle;
                                $displayVrm = $vehicle?->vrm ?: $quote?->vrm;
                            @endphp
                            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                                @if ($reservation)
                                    <button type="button"
                                        class="parking-card parking-card-reserved slot-reserved cursor-pointer w-100 text-center border-0"
                                        data-url="{{ route('quotes.reserve-parking.show', $reservation) }}">
                                        <div class="parking-slot-number fw-bold mb-3">P-{{ $slot['slot_number'] }}</div>
                                        <div class="mb-3">
                                            <i class="icon-base ti tabler-car icon-xl text-primary"></i>
                                        </div>
                                        <div class="fw-semibold">
                                            <span class="badge rounded-pill bg-label-danger text-danger parking-vrm-pill">
                                                {{ $displayVrm ?: 'Reserved' }}
                                            </span>
                                        </div>
                                    </button>
                                @else
                                    <div class="parking-card parking-card-available text-center">
                                        <div class="parking-slot-number fw-bold mb-3">P-{{ $slot['slot_number'] }}</div>
                                        <div class="mb-3">
                                            <i class="icon-base ti tabler-parking icon-xl text-success"></i>
                                        </div>
                                        <div class="fw-semibold">
                                            <span class="badge rounded-pill bg-label-success text-success">
                                                Available
                                            </span>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="parkingDetailModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Parking Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="parkingDeleteUrl">
                        <div id="parkingDetailLoading" class="text-center py-4 d-none">
                            <div class="spinner-border text-primary mb-3" role="status"></div>
                            <p class="mb-0 text-body-secondary">Fetching parking details...</p>
                        </div>

                        <div id="parkingDetailError" class="alert alert-danger d-none"></div>

                        <div id="parkingDetailContent">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <div class="parking-card-detail rounded-3 p-3 h-100">
                                        <div class="small text-body-secondary mb-1">Parking Slot</div>
                                        <div class="fw-semibold" id="parkingSlotNumber">-</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="parking-card-detail rounded-3 p-3 h-100">
                                        <div class="small text-body-secondary mb-1">Quote Number</div>
                                        <div class="fw-semibold" id="parkingQuoteNumber">-</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="parking-card-detail rounded-3 p-3 h-100">
                                        <div class="small text-body-secondary mb-1">VRM</div>
                                        <div class="fw-semibold" id="parkingVehicleVrm">-</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="parking-card-detail rounded-3 p-3 h-100">
                                        <div class="small text-body-secondary mb-1">Reserved By</div>
                                        <div class="fw-semibold" id="parkingByName">-</div>
                                    </div>
                                </div>
                                {{-- <div class="col-md-3">
                                    <div class="parking-card-detail rounded-3 p-3 h-100">
                                        <div class="small text-body-secondary mb-1">Booking Date</div>
                                        <div class="fw-semibold" id="parkingDateText">-</div>
                                    </div>
                                </div> --}}

                                <div class="col-12">
                                    <div class="card parking-info-card shadow-none">
                                        <div class="card-body">
                                            <h6 class="mb-3">Customer Information</h6>
                                            <div class="row g-3">
                                                <div class="col-12 col-md-4">
                                                    <div class="small text-body-secondary mb-1">Name</div>
                                                    <div class="fw-semibold" id="parkingCustomerName">-</div>
                                                </div>
                                                <div class="col-12 col-md-4">
                                                    <div class="small text-body-secondary mb-1">Email</div>
                                                    <div class="fw-semibold" id="parkingCustomerEmail">-</div>
                                                </div>
                                                <div class="col-12 col-md-4">
                                                    <div class="small text-body-secondary mb-1">Phone</div>
                                                    <div class="fw-semibold" id="parkingCustomerPhone">-</div>
                                                </div>
                                                <div class="col-12 col-md-4">
                                                    <div class="small text-body-secondary mb-1">City / PostCode</div>
                                                    <div class="fw-semibold" id="parkingCustomerCity">-</div>
                                                </div>
                                                <div class="col-12 col-md-8">
                                                    <div class="small text-body-secondary mb-1">Address</div>
                                                    <div class="fw-semibold" id="parkingCustomerAddress">-</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="card parking-info-card shadow-none">
                                        <div class="card-body">
                                            <h6 class="mb-3">Vehicle Information</h6>
                                            <div class="row g-3">
                                                <div class="col-12">
                                                    <div class="small text-body-secondary mb-1">Vehicle</div>
                                                    <div class="fw-semibold" id="parkingVehicleName">-</div>
                                                </div>
                                                <div class="col-12 col-md-4">
                                                    <div class="small text-body-secondary mb-1">Engine Code</div>
                                                    <div class="fw-semibold" id="parkingEngineCode">-</div>
                                                </div>
                                                <div class="col-12 col-md-2">
                                                    <div class="small text-body-secondary mb-1">Fuel Type</div>
                                                    <div class="fw-semibold" id="parkingFuelType">-</div>
                                                </div>
                                                <div class="col-12 col-md-2">
                                                    <div class="small text-body-secondary mb-1">Engine Size</div>
                                                    <div class="fw-semibold" id="parkingEngineSize">-</div>
                                                </div>
                                                <div class="col-12 col-md-4">
                                                    <div class="small text-body-secondary mb-1">VIN</div>
                                                    <div class="fw-semibold" id="parkingVin">-</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" id="removeParkingButton">
                            <span class="remove-parking-button-text">Remove From Parking</span>
                            <span class="remove-parking-button-loader d-none ms-2">
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            </span>
                        </button>
                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            const parkingDetailModalElement = document.getElementById('parkingDetailModal');
            const parkingDetailModal = new bootstrap.Modal(parkingDetailModalElement);

            function setParkingDetailState(isLoading, errorMessage = '') {
                $('#parkingDetailLoading').toggleClass('d-none', !isLoading);
                $('#parkingDetailContent').toggleClass('d-none', isLoading || !!errorMessage);
                $('#parkingDetailError')
                    .toggleClass('d-none', !errorMessage)
                    .text(errorMessage);
            }

            function setRemoveParkingLoading(isLoading) {
                const button = $('#removeParkingButton');

                button.prop('disabled', isLoading);
                button.find('.remove-parking-button-text').text(isLoading ? 'Removing...' : 'Remove From Parking');
                button.find('.remove-parking-button-loader').toggleClass('d-none', !isLoading);
            }

            function resetParkingModal() {
                $('#parkingDeleteUrl').val('');
                $('#parkingSlotNumber').text('-');
                $('#parkingQuoteNumber').text('-');
                $('#parkingVehicleVrm').text('-');
                $('#parkingDateText').text('-');
                $('#parkingCustomerName').text('-');
                $('#parkingCustomerPhone').text('-');
                $('#parkingCustomerEmail').text('-');
                $('#parkingCustomerCity').text('-');
                $('#parkingCustomerAddress').text('-');
                $('#parkingVehicleName').text('-');
                $('#parkingEngineCode').text('-');
                $('#parkingFuelType').text('-');
                $('#parkingEngineSize').text('-');
                $('#parkingVin').text('-');
                $('#parkingByName').text('-');
                setRemoveParkingLoading(false);
            }

            $(document).on('click', '.slot-reserved', function() {
                const url = $(this).data('url');

                setParkingDetailState(true);
                parkingDetailModal.show();

                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(response) {
                        const data = response.data || {};
                        const customer = data.customer || {};
                        const vehicle = data.vehicle || {};

                        setParkingDetailState(false);
                        $('#parkingDeleteUrl').val(data.delete_url || '');
                        $('#parkingSlotNumber').text(data.slot_number ? `P-${data.slot_number}` : '-');
                        $('#parkingQuoteNumber').text(data.quote_number || '-');
                        $('#parkingVehicleVrm').text(vehicle.vrm || '-');
                        $('#parkingDateText').text(data.booking_date || '-');
                        $('#parkingByName').text(data.reserved_by || '-');
                        $('#parkingCustomerName').text(customer.name || '-');
                        $('#parkingCustomerPhone').text(customer.phone || '-');
                        $('#parkingCustomerEmail').text(customer.email || '-');
                        $('#parkingCustomerCity').text(customer.city || '-');
                        $('#parkingCustomerAddress').text(customer.address || '-');
                        $('#parkingVehicleName').text(vehicle.name || '-');
                        $('#parkingEngineCode').text(vehicle.engine_code || '-');
                        $('#parkingFuelType').text(vehicle.fuel_type || '-');
                        $('#parkingEngineSize').text(vehicle.engine_size || '-');
                        $('#parkingVin').text(vehicle.vin || '-');
                    },
                    error: function(jqXHR) {
                        setParkingDetailState(false, jqXHR.responseJSON?.message || 'Unable to load parking details.');
                    }
                });
            });

            $('#removeParkingButton').on('click', function() {
                const deleteUrl = $('#parkingDeleteUrl').val();

                if (!deleteUrl) {
                    ShowToast('error', 'Parking reservation could not be identified.');
                    return;
                }

                Swal.fire({
                    title: 'Are you sure?',
                    text: 'This parking slot will become available again.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, remove it!',
                    customClass: {
                        confirmButton: 'btn btn-danger me-3 waves-effect waves-light',
                        cancelButton: 'btn btn-label-secondary waves-effect waves-light'
                    },
                    buttonsStyling: false
                }).then(function(result) {
                    if (!result.value) {
                        return;
                    }

                    setRemoveParkingLoading(true);

                    $.ajax({
                        url: deleteUrl,
                        type: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            setRemoveParkingLoading(false);
                            parkingDetailModal.hide();
                            ShowToast('success', response.message);
                            window.location.reload();
                        },
                        error: function(jqXHR) {
                            setRemoveParkingLoading(false);
                            ShowToast('error', jqXHR.responseJSON?.message || 'Unable to remove parking reservation.');
                        }
                    });
                });
            });

            parkingDetailModalElement.addEventListener('hidden.bs.modal', function() {
                resetParkingModal();
            });
        });
    </script>
@endsection