@extends('auth.layouts.app')
@section('content')
    @includeIf('auth.layouts.title', [
        'page' => [
            'title' => __('titles.myCars'),
            'searchable' => true,
    
            'subTitle' => __('titles.profileWelcome'),
        ],
    ])


    <section class="pt60 pb90 bgc-f7">
        <div class="container">
            <div class="row mb30 wow fadeInUp" data-wow-delay="100ms">
                <div class="col-lg-8">
                    <div class="single-car-content mb30-md ps-widget bgc-white bdrs12 default-box-shadow2 p30">
                        <h2 class="sp-lg-title mb15">{{ $result['item']->title }}</h2>
                        <div class="pd-meta mb15 d-md-flex align-items-center">
                            <p class="text fz15 mb-0 bdrr1 pr10 pl10 bdrrn-sm">{{ $result['item']->address }}</p>

                            @if (
                                $result['item']->latestOrder &&
                                    $result['item']->latestOrder->dropoff_date &&
                                    \Carbon\Carbon::parse($result['item']->latestOrder->dropoff_date)->isFuture() &&
                                    $result['item']->is_available == 0)
                                <p class="ff-heading text-thm fz15 bdrr1 pr10 pl10 ml0-sm ml10 bdrrn-sm unva"><i
                                        class="fas fa-circle fz10 pe-2"></i>{{ __('attributes.not_available') }}</p>
                            @else
                                <p class="ff-heading text-av fz15 bdrr1 pr10 pl10 ml0-sm ml10 bdrrn-sm unva"><i
                                        class="fas fa-circle fz10 pe-2"></i>{{ __('attributes.available') }}</p>
                            @endif


                            {{-- <p class="ff-heading text-thm fz15 bdrr1 pr10 pl10 ml0-sm ml10 bdrrn-sm"><i
                                class="fas fa-circle fz10 pe-2"></i>{{ $result['item']->type->title ?? '' }}</p> --}}

                            @if (
                                $result['item']->latestOrder &&
                                    $result['item']->latestOrder->dropoff_date &&
                                    \Carbon\Carbon::parse($result['item']->latestOrder->dropoff_date)->isFuture())
                                <p class="ff-heading bdrr1 fz15 pr10 pl10 ml10 ml0-sm bdrrn-sm"><i
                                        class="far fa-clock pe-2"></i>{{ $result['item']->latestOrder->created_at->diffForHumans() }}
                                </p>
                            @endif

                            <p class="ff-heading ml10 pl10 ml0-sm fz15"><i
                                    class="fas fa-car pe-2 align-text-top"></i>{{ $result['item']->brand->title ?? '' }}
                                {{ $result['item']->model->title ?? '' }}</p>
                        </div>
                        <div class="car-meta d-flex align-items-center flex-wrap">
                            <p class="text fz15 me-4 mb-2"><span
                                    class="fas fa-calendar-alt pe-2 align-text-top"></span>{{ $result['item']->year->title ?? '' }}
                            </p>
                            <p class="text me-4 mb-2 fz15"><span
                                    class="fas fa-gas-pump pe-2 align-text-to"></span>{{ $result['item']->fuelType->title ?? '' }}
                            </p>
                            <p class="text me-4 mb-2 fz15"><span
                                    class="fas fa-cog pe-2 align-text-to"></span>{{ $result['item']->transmission->title ?? '' }}
                            </p>
                            <p class="text me-4 mb-2 fz15"><span
                                    class="fas fa-palette pe-2 align-text-to"></span>{{ $result['item']->color->title ?? '' }}
                            </p>
                        </div>
                    </div>
                </div>
                @if (
                    !$result['item']->latestOrder ||
                        ($result['item']->latestOrder->dropoff_date &&
                            !\Carbon\Carbon::parse($result['item']->latestOrder->dropoff_date)->isFuture()))
                    <div class="col-lg-4">
                        <div class="single-car-content single-car-btn">
                            <div class="btn-single">
                                <form
                                    action="{{ route('website.auth.office.vehicles.update-availability', ['locale' => app()->getLocale(), 'code' => $result['item']->code]) }}"
                                    method="POST" id="availabilityForm" class="mb-0">
                                    @csrf
                                    @method('PUT')
                                    <div
                                        class="availability-toggle-container p-3 bgc-white bdrs12 default-box-shadow2 mb20">
                                        <h4 class="title fz17 mb15">@lang('attributes.car_availability')</h4>
                                        <div
                                            class="d-flex align-items-center justify-content-between bg-light p-3 rounded-3 mb-2">
                                            <div>
                                                <span
                                                    class="availability-status {{ $result['item']->is_available ? 'text-success' : 'text-danger' }} fw-bold fs-5">
                                                    {{ $result['item']->is_available ? __('attributes.available') : __('attributes.not_available') }}
                                                </span>
                                            </div>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="availabilitySwitch" name="is_available" value="1"
                                                    style="width: 60px; height: 30px;"
                                                    {{ $result['item']->is_available ? 'checked' : '' }}>
                                            </div>
                                        </div>
                                        <p class="text-muted small mb-15">
                                            @lang('attributes.toggle_availability_message')
                                        </p>
                                        <hr class="my-3">
                                        <!-- Price information -->
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h5 class="mb-0">@lang('attributes.price')</h5>
                                            <h3 class="price mb-0 fw-bold">{{ $result['item']->price }} @lang('titles.currency')
                                            </h3>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h5 class="mb-0">@lang('attributes.daily_price')</h5>
                                            <p class="text space fz15 mb-0">
                                                {{ $result['item']->daily_price ? $result['item']->daily_price . ' ' . __('titles.currency') . '/' . __('titles.day') : '' }}
                                            </p>
                                        </div>
                                        <button type="button"
                                            class="ud-btn btn-thm w-100 change-price-btn">@lang('attributes.change_price')</button>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                @endif
            </div>

            <!-- Pricing Modal -->
            <div class="modal fade" id="pricingModal" tabindex="-1" aria-labelledby="pricingModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pricingModalLabel">@lang('titles.managePricing')</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form
                                action="{{ route('website.auth.office.vehicles.update-pricing', ['locale' => app()->getLocale(), 'code' => $result['item']->code]) }}"
                                method="POST">
                                @csrf
                                @method('PUT')
                                <div class="row">
                                    <div class="col-sm-6 col-md-4 mb15">
                                        <div class="form-group">
                                            <label>@lang('attributes.price')</label>
                                            <input type="number" step="0.01" name="price" class="form-control"
                                                value="{{ $result['item']->price }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4 mb15">
                                        <div class="form-group">
                                            <label>@lang('attributes.discount') %</label>
                                            <input type="number" step="0.01" max="100" name="discount"
                                                class="form-control" value="{{ $result['item']->discount }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4 mb15">
                                        <div class="form-group">
                                            <label>@lang('attributes.daily_price')</label>
                                            <input type="number" step="0.01" name="daily_price" class="form-control"
                                                value="{{ $result['item']->daily_price }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4 mb15">
                                        <div class="form-group">
                                            <label>@lang('attributes.weekly_price')</label>
                                            <input type="number" step="0.01" name="weekly_price" class="form-control"
                                                value="{{ $result['item']->weekly_price }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4 mb15">
                                        <div class="form-group">
                                            <label>@lang('attributes.monthly_price')</label>
                                            <input type="number" step="0.01" name="monthly_price"
                                                class="form-control" value="{{ $result['item']->monthly_price }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4 mb15">
                                        <div class="form-group">
                                            <label>@lang('attributes.daily_mileage_limit')</label>
                                            <input type="number" name="daily_mileage_limit" class="form-control"
                                                value="{{ $result['item']->daily_mileage_limit }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-4 mb15">
                                        <div class="form-group">
                                            <label>@lang('attributes.excess_mileage_fee')</label>
                                            <input type="number" step="0.01" name="excess_mileage_fee"
                                                class="form-control" value="{{ $result['item']->excess_mileage_fee }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="mt15 text-end">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">@lang('attributes.cancel')</button>
                                    <button type="submit" class="ud-btn btn-thm">@lang('attributes.save_changes')</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row wow fadeInUp" data-wow-delay="500ms">
                <div class="col-lg-8">
                    <div class="ps-widget bgc-white bdrs12 default-box-shadow2 p30 mb30 overflow-hidden position-relative">
                        <div class="ps-v4-hero-tab position-relative">
                            <ul class="nav nav-pills justify-content-end" id="pills-tab2" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active mr10" id="pills-home-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-home" type="button" role="tab"
                                        aria-controls="pills-home" aria-selected="true"><span
                                            class="flaticon-images text-white fz20"></span></button>
                                </li>
                            </ul>
                        </div>
                        <div class="ps-v4-hero-tab">
                            <div class="tab-content overflow-visible" id="pills-tabContent2">
                                <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                    aria-labelledby="pills-home-tab">
                                    <div class="container p-0">
                                        <div class="row wow fadeInUp" data-wow-delay="300ms">
                                            <div class="col-lg-12">
                                                <!-- Main Image Section -->
                                                <div class="main-image-container mb-3">
                                                    <img class="img-fluid bdrs12 w-100"
                                                        src="{{ $result['item']->imagePath }}"
                                                        alt="{{ $result['item']->title }}">
                                                </div>

                                                <!-- Thumbnails Gallery Section -->
                                                <div class="thumbnails-gallery">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h4 class="title fz17 mb-0">@lang('titles.more_images')</h4>
                                                        <button type="button" class="ud-btn btn-thm btn-sm"
                                                            id="addImagesBtn">
                                                            <i class="fas fa-plus me-1"></i> @lang('attributes.add_images')
                                                        </button>
                                                    </div>

                                                    <!-- Hidden file input for uploading images -->
                                                    <form id="imageUploadForm" style="display:none">
                                                        <input type="file" id="imageFileInput" name="images[]"
                                                            multiple accept="image/*">
                                                    </form>

                                                    <div class="row" id="carImagesGallery">
                                                        @if (!empty($result['item']->getMedia('images')) && $result['item']->getMedia('images')->count() > 0)
                                                            @foreach ($result['item']->getMedia('images') as $index => $media)
                                                                <div class="col-4 col-md-3 mb-3">
                                                                    <div class="image-wrapper position-relative">
                                                                        <img class="img-fluid bdrs8 w-100 thumbnail-img gallery-image"
                                                                            src="{{ $media->getUrl() }}"
                                                                            alt="{{ $result['item']->title }}"
                                                                            data-image-index="{{ $index }}"
                                                                            style="height: 100px; object-fit: cover; cursor: pointer;">
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        @else
                                                            <div class="col-12">
                                                                <div class="alert alert-info">
                                                                    @lang('attributes.no_additional_images')
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Car Specifications Section -->


                    <div class="ps-widget bgc-white bdrs12 default-box-shadow2 p30 mb30 overflow-hidden position-relative">
                        <h4 class="title fz17 mb30">@lang('titles.CarDescription')</h4>
                        <p class="text mb10">
                            {!! nl2br($result['item']->description ?? '') !!}
                        </p>
                    </div>

                    <!-- Rental Terms Section -->
                    <div class="ps-widget bgc-white bdrs12 default-box-shadow2 p30 mb30 overflow-hidden position-relative">
                        <h4 class="title fz17 mb30">@lang('attributes.RentalTerms')</h4>
                        <div class="row">
                            <div class="col-sm-6 col-md-4 mb15">
                                <div class="rental-term">
                                    <h5>@lang('attributes.dailyPrice')</h5>
                                    <p>{{ $result['item']->daily_price ?? '' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4 mb15">
                                <div class="rental-term">
                                    <h5>@lang('attributes.weeklyPrice')</h5>
                                    <p>{{ $result['item']->weekly_price ?? '' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4 mb15">
                                <div class="rental-term">
                                    <h5>@lang('attributes.monthlyPrice')</h5>
                                    <p>{{ $result['item']->monthly_price ?? '' }}</p>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4 mb15">
                                <div class="rental-term">
                                    <h5>@lang('attributes.dailyMileageLimit')</h5>
                                    <p>{{ $result['item']->daily_mileage_limit ?? '' }} @lang('attributes.km')</p>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4 mb15">
                                <div class="rental-term">
                                    <h5>@lang('attributes.excessMileageFee')</h5>
                                    <p>{{ $result['item']->excess_mileage_fee ?? '' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <!-- Car Rental Company Info -->
                    <div class="default-box-shadow2 bdrs12 bdr1 p30 mb30 bgc-white position-relative"
                        style="display: none;">
                        <h4 class="form-title mb5">@lang('titles.carProvider')</h4>
                        <div class="rental-company">
                            <div class="company-logo mb20">
                                <img src="{{ $result['item']->office->logo ?? asset('default-company.png') }}"
                                    alt="{{ $result['item']->office->company_name ?? 'Car Provider' }}" class="img-fluid"
                                    style="max-height: 80px;">
                            </div>
                            <h5>{{ $result['item']->office->company_name ?? '-' }}</h5>
                            <p class="mb10"><i class="fas fa-map-marker-alt mr10"></i>
                                {{ $result['item']->office->address ?? '-' }}</p>
                            <p class="mb10"><i class="fas fa-phone mr10"></i>
                                {{ $result['item']->office->phone ?? '-' }}</p>
                            <p class="mb20"><i class="fas fa-envelope mr10"></i>
                                {{ $result['item']->office->email ?? '-' }}</p>

                            <a href="{{ route('website.cars.index', ['locale' => app()->getLocale(), 'office_id' => $result['item']->office_id]) }}"
                                class="ud-btn btn-thm w-100">@lang('titles.viewAllCars')</a>
                        </div>
                    </div>

                    <!-- Contact for Rental -->
                    <div class="default-box-shadow2 bdrs12 bdr1 p30 mb30 bgc-white position-relative">
                        <div
                            class="ps-widget bgc-white bdrs12 default-box-shadow2 p30 mb30 overflow-hidden position-relative">
                            <h4 class="title fz17 mb30">@lang('titles.CarSpecifications')</h4>
                            <div class="row">
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-car icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.brand')</h5>
                                            <p>{{ $result['item']->brand->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-car-side icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.model')</h5>
                                            <p>{{ $result['item']->model->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-calendar-alt icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.year')</h5>
                                            <p>{{ $result['item']->year->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-gas-pump icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.fuelType')</h5>
                                            <p>{{ $result['item']->fuelType->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-cog icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.transmission')</h5>
                                            <p>{{ $result['item']->transmission->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-palette icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.color')</h5>
                                            <p>{{ $result['item']->color->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-user-shield icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.insuranceType')</h5>
                                            <p>{{ $result['item']->insuranceType->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-chair icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.seatingCapacity')</h5>
                                            <p>{{ $result['item']->seatingCapacity->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-6 mb15">
                                    <div class="car-feature d-flex align-items-center">
                                        <span class="fas fa-truck-loading icon mr10"></span>
                                        <div class="details">
                                            <h5>@lang('attributes.vehicleType')</h5>
                                            <p>{{ $result['item']->vehicleType->title ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Similar Cars Section -->
                    <div class="list-sidebar-style1">
                        <h4 class="title fz17 mb20">@lang('titles.similarCars')</h4>
                        <div class="widget-wrapper">
                            @if (!empty($result['items']))
                                @foreach ($result['items'] as $car)
                                    @includeIf('website.pages.cars.items.small')
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Availability Confirmation Modal -->
    <div class="modal fade" id="availabilityConfirmModal" tabindex="-1" aria-labelledby="availabilityConfirmModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="availabilityConfirmModalLabel">@lang('attributes.confirm_status_change')</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="availabilityConfirmText"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancelAvailabilityChange"
                        data-bs-dismiss="modal">@lang('attributes.cancel')</button>
                    <button type="button" class="btn btn-primary"
                        id="confirmAvailabilityChange">@lang('attributes.confirm')</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Popup Modal -->
    <div class="modal fade" id="imagePopupModal" tabindex="-1" aria-labelledby="imagePopupModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imagePopupModalLabel">@lang('titles.image_preview')</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="popupImage" src="" alt="" class="img-fluid">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="deleteImageBtn">
                        <i class="fas fa-trash"></i> @lang('attributes.delete_image')
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('attributes.close')</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Image Confirmation Modal -->
    <div class="modal fade" id="deleteImageConfirmModal" tabindex="-1" aria-labelledby="deleteImageConfirmModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteImageConfirmModalLabel">@lang('attributes.confirm_delete')</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>@lang('attributes.confirm_delete_image')</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('attributes.cancel')</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteImageBtn">@lang('attributes.delete')</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(document).ready(function() {
            $('.change-price-btn').on('click', function() {
                $('#pricingModal').modal('show');
            });

            let switchState = $('#availabilitySwitch').is(':checked');
            let pendingChange = false;

            // Handle availability switch change
            $('#availabilitySwitch').on('change', function(e) {
                // Prevent the default action to handle manually after confirmation
                const newState = $(this).is(':checked');
                const confirmModal = $('#availabilityConfirmModal');
                const confirmText = $('#availabilityConfirmText');

                // Set confirmation message based on new state
                if (newState) {
                    confirmText.html('@lang('attributes.confirm_make_available_message')');
                    confirmText.removeClass('text-danger').addClass('text-success');
                } else {
                    confirmText.html('@lang('attributes.confirm_make_unavailable_message')');
                    confirmText.removeClass('text-success').addClass('text-danger');
                }

                // Store the pending state change
                pendingChange = newState;

                // Revert the switch back to its original state until confirmed
                $(this).prop('checked', switchState);

                // Show confirmation modal
                confirmModal.modal('show');
            });

            // Handle confirmation button click
            $('#confirmAvailabilityChange').on('click', function() {
                // Apply the pending change to the switch
                $('#availabilitySwitch').prop('checked', pendingChange);

                // Update the saved state
                switchState = pendingChange;

                // Close the confirmation modal
                $('#availabilityConfirmModal').modal('hide');

                // Process the change via AJAX
                processAvailabilityChange();
            });

            // Handle cancel button click
            $('#cancelAvailabilityChange').on('click', function() {
                // Just revert the switch to its original state (already done)
                $('#availabilitySwitch').prop('checked', switchState);
            });

            // Function to process the availability change
            function processAvailabilityChange() {
                const form = $('#availabilityForm');
                const isChecked = $('#availabilitySwitch').is(':checked');
                const statusText = isChecked ? '@lang('attributes.available')' : '@lang('attributes.not_available')';
                const statusClass = isChecked ? 'text-success' : 'text-danger';
                const statusElement = $('.availability-status');

                // Disable the switch while the request is being processed
                $('#availabilitySwitch').prop('disabled', true);

                // Show loading state
                statusElement.html('<i class="fas fa-spinner fa-spin"></i> @lang('attributes.updating')...');

                // Submit the form via AJAX
                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data: form.serialize(),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            // Update the status text and class
                            statusElement
                                .removeClass('text-success text-danger')
                                .addClass(statusClass)
                                .text(statusText);

                            // Show success notification
                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message || '@lang('attributes.availability_updated_successfully')');
                            } else {
                                alert(response.message || '@lang('attributes.availability_updated_successfully')');
                            }

                            // Update the stored switch state
                            switchState = isChecked;
                        } else {
                            // Show error and revert switch
                            if (typeof toastr !== 'undefined') {
                                toastr.error(response.message || '@lang('attributes.error_updating_availability')');
                            } else {
                                alert(response.message || '@lang('attributes.error_updating_availability')');
                            }
                            $('#availabilitySwitch').prop('checked', switchState);
                            statusElement
                                .removeClass('text-success text-danger')
                                .addClass(switchState ? 'text-success' : 'text-danger')
                                .text(switchState ? '@lang('attributes.available')' : '@lang('attributes.not_available')');
                        }
                    },
                    error: function(xhr) {
                        // Show error and revert switch
                        let errorMessage = '@lang('attributes.error_updating_availability')';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        if (typeof toastr !== 'undefined') {
                            toastr.error(errorMessage);
                        } else {
                            alert(errorMessage);
                        }

                        $('#availabilitySwitch').prop('checked', switchState);
                        statusElement
                            .removeClass('text-success text-danger')
                            .addClass(switchState ? 'text-success' : 'text-danger')
                            .text(switchState ? '@lang('attributes.available')' : '@lang('attributes.not_available')');
                    },
                    complete: function() {
                        // Re-enable the switch
                        $('#availabilitySwitch').prop('disabled', false);
                    }
                });
            }

            // Image Management Section

            // Handle Add Images button click
            $('#addImagesBtn').on('click', function() {
                $('#imageFileInput').click();
            });

            // Handle file selection
            $('#imageFileInput').on('change', function() {
                if (this.files.length > 0) {
                    uploadImages(this.files);
                }
            });

            // Gallery image click to open popup
            $(document).on('click', '.gallery-image', function() {
                const imageUrl = $(this).attr('src');
                const imageIndex = $(this).data('image-index');

                // Set the image in the popup
                $('#popupImage').attr('src', imageUrl);

                // Set the image index for delete functionality
                $('#deleteImageBtn').data('image-index', imageIndex);

                // Show the popup
                $('#imagePopupModal').modal('show');
            });

            // Variables to store deletion context
            let imageToDeleteIndex = null;
            let deleteFromPopup = false;

            // Handle delete image button from popup
            $('#deleteImageBtn').on('click', function() {
                imageToDeleteIndex = $(this).data('image-index');
                deleteFromPopup = true;

                // Hide the image popup modal
                $('#imagePopupModal').modal('hide');

                // Show the confirmation modal
                $('#deleteImageConfirmModal').modal('show');
            });

            // Handle confirm delete button click
            $('#confirmDeleteImageBtn').on('click', function() {
                if (imageToDeleteIndex !== null) {
                    // Close the confirmation modal
                    $('#deleteImageConfirmModal').modal('hide');

                    // Delete the image
                    deleteImage(imageToDeleteIndex);

                    // Reset the variables
                    imageToDeleteIndex = null;
                    deleteFromPopup = false;
                }
            });

            // Handle delete image (from other locations if needed in the future)
            $(document).on('click', '.delete-image-btn', function() {
                imageToDeleteIndex = $(this).data('image-index');
                deleteFromPopup = false;
                $('#deleteImageConfirmModal').modal('show');
            });

            function uploadImages(files) {
                const formData = new FormData();
                for (let i = 0; i < files.length; i++) {
                    formData.append('images[]', files[i]);
                }
                formData.append('car_code', '{{ $result['item']->code }}');
                formData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: '{{ route('website.auth.office.vehicles.upload-images', ['locale' => app()->getLocale()]) }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        if (typeof toastr !== 'undefined') {
                            toastr.info('@lang('attributes.uploading_images')');
                        }
                    },
                    success: function(response) {
                        if (response.success) {
                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message || '@lang('attributes.images_uploaded_successfully')');
                            }
                            // Reload the page to show the new images
                            window.location.reload();
                        } else {
                            if (typeof toastr !== 'undefined') {
                                toastr.error(response.message || '@lang('attributes.error_uploading_images')');
                            } else {
                                alert(response.message || '@lang('attributes.error_uploading_images')');
                            }
                        }
                    },
                    error: function(xhr) {
                        let errorMessage = '@lang('attributes.error_uploading_images')';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        if (typeof toastr !== 'undefined') {
                            toastr.error(errorMessage);
                        } else {
                            alert(errorMessage);
                        }
                    }
                });
            }

            function deleteImage(imageIndex) {
                $.ajax({
                    url: '{{ route('website.auth.office.vehicles.delete-image', ['locale' => app()->getLocale()]) }}',
                    type: 'POST',
                    data: {
                        car_code: '{{ $result['item']->code }}',
                        image_index: imageIndex,
                        _token: '{{ csrf_token() }}'
                    },
                    beforeSend: function() {
                        if (typeof toastr !== 'undefined') {
                            toastr.info('@lang('attributes.deleting_image')');
                        }
                    },
                    success: function(response) {
                        if (response.success) {
                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message || '@lang('attributes.image_deleted_successfully')');
                            }
                            // Reload the page to update the images
                            window.location.reload();
                        } else {
                            if (typeof toastr !== 'undefined') {
                                toastr.error(response.message || '@lang('attributes.error_deleting_image')');
                            } else {
                                alert(response.message || '@lang('attributes.error_deleting_image')');
                            }
                        }
                    },
                    error: function(xhr) {
                        let errorMessage = '@lang('attributes.error_deleting_image')';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        if (typeof toastr !== 'undefined') {
                            toastr.error(errorMessage);
                        } else {
                            alert(errorMessage);
                        }
                    }
                });
            }
        });
    </script>
@endsection