@extends('v2/fleet/layouts/contentNavbarLayout')

@section('title')
    {{ __('client.edit') }}
@endsection

@section('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" rel="stylesheet">
    <style>
        .vehicle-picture {
            background-image: url("{{ $vehicle->vehicle_image ? asset($vehicle->vehicle_image) : asset('assets/v2/fleet/img/car-png.png') }}");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            height: 200px;
        }

        .border-dashed {
            border-style: dashed;
        }

        .border-main-green {
            border-color: var(--dadycar-main-green)
        }
    </style>
    <style>
        .file-upload-container {
            margin-top: 20px;
        }

        .drop-area {
            border: 2px dashed #00000040;
            border-radius: 10px;
            font-size: 13px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
        }

        .drop-area.highlight {
            border-color: #2196F3;
        }
    </style>

    <style>
        .card mx-0 {
            margin: 20px;
        }

        #calendar {
            max-width: 800px;
            margin: 20px auto;
        }

        .fc-prev-button,
        .fc-next-button,
        .fc-month-button {
            background-color: var(--dadycar-main-green);
            color: white;
            background-image: none;
            border-radius: 100%;
        }
    </style>

    <style>
        .hidden {
            display: none;
        }

        .active-section-btn {
            background-color: var(--dadycar-main-blue) !important;
            color: white !important;
            border-radius: 5px;
        }

        .default-section-btn {
            background-color: var(--dadycar-main-gray);
            color: black;
            border-radius: 5px;
            border: none;
            width: 100%;
        }
    </style>
@endsection

@section('content')

    <h1 class="text-dark h4">
        {{ __('client.edit') . ' / ' }}<b>{{ $vehicle->mark . ' ' . $vehicle->model . ' ' . $vehicle->version }}</b></h1>

    <div class="row">
        <div class="col-lg-4">
            <div class="card mx-0 my-4" style="height: 300px">
                <div class="card-body py-3 px-3">
                    <div class="position-relative">
                        <form id="vehicleForm"
                            action="{{ route('fleet.vehicle.picture.update', ['vehicle' => $vehicle->id]) }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="vehicle-picture"></div>
                            <input type="file" id="imageInput" name="vehicle_image" style="display: none;"
                                accept="image/*">
                            {{-- <img src="" class="w-100" alt="..."> --}}
                            <div class="position-absolute bottom-0 end-0">
                                <div class="p-1 bg-main-blue text-white rounded">
                                    {{ $vehicle->numberplate }}
                                </div>
                            </div>
                        </form>
                    </div>

                    <button
                        class="border-dashed border-main-green bg-transparent w-100 mt-3 py-2 rounded d-flex align-items-center justify-content-center gap-2"
                        onclick="selectImage()">
                        @include('v2.fleet.partials.icons.upload')
                        {{ __('client.add_vehicle_picture') }}
                    </button>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card mx-0 my-4" style="height: 300px">
                <div class="card-header">
                    <h3 class="h5 text-dark">{{ $vehicle->version }}</h3>
                </div>
                <div class="card-body py-3 px-3">
                    <div class="row text-dark" style="font-size: 12px">
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/responsable.svg') }}" alt="">
                            <div><b>{{ __('client.mark') }} : </b><br><b>{{ $vehicle->mark }}</b></div>
                        </div>
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/responsable.svg') }}" alt="">
                            <div><b>{{ __('client.') }} : </b><br><b>{{ $vehicle->construction_year }}</b></div>
                        </div>
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/responsable.svg') }}" alt="">
                            <div><b>{{ __('client.serial_number') }} : </b><br><b>{{ $vehicle->serial_number }}</b></div>
                        </div>
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/responsable.svg') }}" alt="">
                            <div><b>{{ __('client.model') }} : </b><br><b>{{ $vehicle->model }}</b></div>
                        </div>
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/responsable.svg') }}" alt="">
                            <div><b>{{ __('client.version') }} : </b><br><b>{{ $vehicle->version }}</b></div>
                        </div>
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/site.svg') }}" alt="">
                            <div><b>{{ __('client.engine_type') }} : </b><br><b>{{ $vehicle->motor_type }}</b></div>
                        </div>
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/serial-number.svg') }}" alt="">
                            <div><b>{{ __('client.number_of_places') }} : </b><br><b>{{ $vehicle->number_of_places }}</b>
                            </div>
                        </div>
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/site.svg') }}" alt="">
                            <div><b>{{ __('client.horse_power') }} : </b><br><b>{{ $vehicle->horse_power }}</b></div>
                        </div>
                        <div class="col-4 d-flex align-items-center gap-2">
                            <img src="{{ asset('assets/v2/fleet/svg/site.svg') }}" alt="">
                            <div><b>Site : </b><br><b>{{ $vehicle->site?->name }}</b></div>
                        </div>
                    </div>

                    <a href="{{ route('fleet.vehicle.edit', ['vehicle' => $vehicle]) }}"
                        class="border-dashed border-main-green bg-transparent w-100 mt-3 py-2 rounded d-flex align-items-center justify-content-center gap-2">
                        @include('v2.fleet.partials.icons.edit', ['fill' => 'black'])
                        {{ __('client.general_informations') }}</a>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-4">
            {{-- the calander --}}
            <div class="card">
                <div class="card-body py-3 px-3">
                    <h5 class="card-title">Calendrier</h5>
                    <div id="calendar"></div>
                </div>
            </div>
            {{-- the calendar end --}}


            <div class="card my-4">
                <div class="card-body py-3 px-3">
                    <h5 class="card-title">Historique</h5>
                    <div class="row">
                        <div class="col-6">
                            <button id="convoyageBtn" class="default-section-btn active-section-btn p-3"
                                onclick="toggleSection('convoyage')">Convoyage</button>
                        </div>
                        <div class="col-6">
                            <button id="servicesBtn" class="default-section-btn p-3"
                                onclick="toggleSection('services')">Services</button>
                        </div>
                    </div>
                    <div>
                        <div id="convoyageSection" class="mt-3">
                            {{-- 1 --}}
                            <div class="border rounded p-3 my-2">
                                <div class="row my-3">
                                    <h6>Service</h6>
                                    <b>Convoyage</b>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Distance </h6>
                                        <b>258KM</b>
                                    </div>
                                    <div class="col">
                                        <h6>Prix</h6>
                                        <b class="text-main-blue">550 €</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Lieu Départ</h6>
                                        <b>Site arval</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date Départ</h6>
                                        <b>20-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Lieu D’arrive</h6>
                                        <b>Paris 123 Parc ..</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date D’arrive</h6>
                                        <b>23-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Responsable Départ</h6>
                                        <b>Jean Patrick</b>
                                    </div>
                                    <div class="col">
                                        <h6>Responsable D’arrive</h6>
                                        <b>Ismail Yefsah</b>
                                    </div>
                                </div>
                            </div>

                            {{-- 2 --}}
                            <div class="border rounded p-3 my-2">
                                <div class="row my-3">
                                    <h6>Service</h6>
                                    <b>Convoyage</b>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Distance </h6>
                                        <b>105KM</b>
                                    </div>
                                    <div class="col">
                                        <h6>Prix</h6>
                                        <b class="text-main-blue">240 €</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Lieu Départ</h6>
                                        <b>paris</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date Départ</h6>
                                        <b>21-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Lieu D’arrive</h6>
                                        <b>Paris 123 Parc ..</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date D’arrive</h6>
                                        <b>24-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Responsable Départ</h6>
                                        <b>j claude</b>
                                    </div>
                                    <div class="col">
                                        <h6>Responsable D’arrive</h6>
                                        <b>slimani hamid</b>
                                    </div>
                                </div>
                            </div>

                            {{-- 3 --}}
                            <div class="border rounded p-3 my-2">
                                <div class="row my-3">
                                    <h6>Service</h6>
                                    <b>Convoyage</b>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Distance </h6>
                                        <b>316KM</b>
                                    </div>
                                    <div class="col">
                                        <h6>Prix</h6>
                                        <b class="text-main-blue">625 €</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Lieu Départ</h6>
                                        <b>paris 123 parc ...</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date Départ</h6>
                                        <b>22-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Lieu D’arrive</h6>
                                        <b>Paris 83170 ...</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date D’arrive</h6>
                                        <b>25-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Responsable Départ</h6>
                                        <b>Mohammed Rachidi</b>
                                    </div>
                                    <div class="col">
                                        <h6>Responsable D’arrive</h6>
                                        <b>Ibrahim Bouraoui</b>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="servicesSection" class="hidden mt-3">
                            {{-- 1 --}}
                            <div class="border rounded p-3 my-2">
                                <div class="row my-3">
                                    <h6>Service</h6>
                                    <b>Contrôle Technique</b>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Garage</h6>
                                        <b>Luis Pedro</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date</h6>
                                        <b>20-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Responsable</h6>
                                        <b>Jean Patrick</b>
                                    </div>
                                    <div class="col">
                                        <h6>Status</h6>
                                        <span class="badge bg-warning">En cours</span>
                                    </div>
                                </div>
                            </div>

                            {{-- 2 --}}
                            <div class="border rounded p-3 my-2">
                                <div class="row my-3">
                                    <h6>Service</h6>
                                    <b>Vidange</b>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Garage</h6>
                                        <b>James Lincoln</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date</h6>
                                        <b>25-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Responsable</h6>
                                        <b>Jean Patrick</b>
                                    </div>
                                    <div class="col">
                                        <h6>Status</h6>
                                        <span class="badge bg-warning">En cours</span>
                                    </div>
                                </div>
                            </div>

                            {{-- 3 --}}
                            <div class="border rounded p-3 my-2">
                                <div class="row my-3">
                                    <h6>Service</h6>
                                    <b>Kit de frein arrière</b>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Garage</h6>
                                        <b>Luis Pedro</b>
                                    </div>
                                    <div class="col">
                                        <h6>Date</h6>
                                        <b>19-01-2024</b>
                                    </div>
                                </div>
                                <div class="row my-3">
                                    <div class="col">
                                        <h6>Responsable</h6>
                                        <b>Jean Patrick</b>
                                    </div>
                                    <div class="col">
                                        <h6>Status</h6>
                                        <span class="badge bg-warning">En cours</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card mx-0">
                <div class="card-header">
                    <h3 class="h5 text-dark">{{ __('client.vehicle_documents') }}</h3>
                </div>
                <div class="my-2">
                    <div class="card-body py-3 px-3">
                        <form action="{{ route('fleet.vehicle.gray-card.update', $vehicle->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <h5>Le recto de la carte grise</h5>
                                    @if ($vehicle->gray_card_front)
                                        <img src="{{ asset($vehicle->gray_card_front) }}" width="100%"
                                            alt="Vehicle front gray card">
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <h5>Le verso de la carte grise</h5>
                                    @if ($vehicle->gray_card_back)
                                        <img src="{{ asset($vehicle->gray_card_back) }}" width="100%"
                                            alt="Vehicle back gray card">
                                    @endif
                                </div>
                            </div>
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    {{-- <input data-show-upload="false" id="gray-card-front" name="gray_card_front"
                                        type="file" accept="image"> --}}
                                    <input type="file" id="fileInput1" accept="image" multiple class="d-none"
                                        name="gray_card_front">
                                </div>
                                <div class="col-md-6">
                                    {{-- <input data-show-upload="false" id="gray-card-back" name="gray_card_back" type="file"
                                        accept="image"> --}}
                                    <input type="file" id="fileInput2" accept="image" multiple class="d-none"
                                        name="gray_card_back">
                                </div>
                            </div>
                            {{-- <div class="col text-center">
                                <button type="submit"
                                    class="border-0 p-3 text-white bg-main-blue rounded w-100">{{ __('client.save') }}</button>
                            </div> --}}
                        </form>
                    </div>
                </div>

                <div class="my-2">
                    <div class="card-body py-3 px-3">
                        <form action="{{ route('fleet.vehicle.green-card.update', $vehicle->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <h5>Le recto de la carte verte</h5>
                                    @if ($vehicle->green_card_front)
                                        <img src="{{ asset($vehicle->green_card_front) }}" width="100%"
                                            alt="Vehicle front green card">
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <h5>Le verso de la carte verte</h5>
                                    @if ($vehicle->green_card_back)
                                        <img src="{{ asset($vehicle->green_card_back) }}" width="100%"
                                            alt="Vehicle back green card">
                                    @endif
                                </div>
                            </div>
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    {{-- <input data-show-upload="false" id="green-card-front" name="green_card_front"
                                        type="file" accept="image"> --}}
                                    <input type="file" id="fileInput3" accept="image" multiple class="d-none"
                                        name="green_card_front">

                                </div>
                                {{-- <div class="col-md-6">
                                    <input data-show-upload="false" id="green-card-back" name="green_card_back"
                                        type="file" accept="image">
                                </div> --}}
                                <div class="col-md-6">
                                    <input type="file" id="fileInput4" accept="image" multiple class="d-none"
                                        name="green_card_back">
                                </div>
                            </div>
                            {{-- <div class="col text-center">
                                <button type="submit"
                                    class="border-0 p-3 text-white bg-main-blue rounded w-100">{{ __('client.save') }}</button>
                            </div> --}}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@section('scripts')
    <script>
        $(document).ready(function() {

            $("#gray-card-front").fileinput({
                language: 'fr',
                theme: "bs5",
                uploadUrl: "#",
                maxFileSize: 2000,
                allowedFileExtensions: ['jpg', 'png', 'jpeg'],
                removeFromPreviewOnError: true,
                showDrag: true,
                dropZoneTitle: 'Drop le recto de la carte grise ici',
                browseLabel: 'Parcourir',
                cancelLabel: 'Annuler',
                removeLabel: 'Supprimer',
                maxFileCount: 1,
                fileActionSettings: {
                    showRotate: false,
                    showZoom: false,
                    showUpload: false
                }
            });

            $("#gray-card-back").fileinput({
                language: 'fr',
                theme: "bs5",
                uploadUrl: "#",
                maxFileSize: 2000,
                allowedFileExtensions: ['jpg', 'png', 'jpeg'],
                removeFromPreviewOnError: true,
                showDrag: true,
                dropZoneTitle: 'Drop le verso de la carte grise ici',
                browseLabel: 'Parcourir',
                cancelLabel: 'Annuler',
                removeLabel: 'Supprimer',
                maxFileCount: 1,
                fileActionSettings: {
                    showRotate: false,
                    showZoom: false,
                    showUpload: false
                }
            });

            $("#green-card-front").fileinput({
                language: 'fr',
                theme: "bs5",
                uploadUrl: "#",
                maxFileSize: 2000,
                allowedFileExtensions: ['jpg', 'png', 'jpeg'],
                removeFromPreviewOnError: true,
                showDrag: true,
                dropZoneTitle: 'Drop le recto de la carte verte ici',
                browseLabel: 'Parcourir',
                cancelLabel: 'Annuler',
                removeLabel: 'Supprimer',
                maxFileCount: 1,
                fileActionSettings: {
                    showRotate: false,
                    showZoom: false,
                    showUpload: false
                }
            });

            $("#green-card-back").fileinput({
                language: 'fr',
                theme: "bs5",
                uploadUrl: "#",
                maxFileSize: 2000,
                allowedFileExtensions: ['jpg', 'png', 'jpeg'],
                removeFromPreviewOnError: true,
                showDrag: true,
                dropZoneTitle: 'Drop le verso de la carte verte ici',
                browseLabel: 'Parcourir',
                cancelLabel: 'Annuler',
                removeLabel: 'Supprimer',
                maxFileCount: 1,
                fileActionSettings: {
                    showRotate: false,
                    showZoom: false,
                    showUpload: false
                }
            });
        });
    </script>
    <script>
        function enableDragAndDrop(fileInputId) {
            const fileInput = document.getElementById(fileInputId);
            const parentContainer = fileInput.parentElement;

            const dropArea = document.createElement('div');
            dropArea.classList.add('drop-area', 'p-4');

            const bladeViewDiv = document.createElement('div');
            bladeViewDiv.classList.add('my-3');
            bladeViewDiv.innerHTML = `@include('v2.fleet.partials.icons.cloud')`;
            dropArea.appendChild(bladeViewDiv);

            const heading = document.createElement('h5');
            heading.classList.add('text-dark');
            heading.textContent = 'Sélectionnez un fichier ou faites glisser et déposez ici.';

            const text = document.createElement('p');
            text.classList.add('text-dark', 'text-16');
            text.textContent = 'Taille du fichier pdf, png, jpeg ne dépassant pas 50 Mo';

            const browseLabel = document.createElement('label');
            browseLabel.htmlFor = fileInputId;
            browseLabel.classList.add('bg-transparent', 'btn', 'border-1', 'border-main-green', 'text-main-blue',
                'rounded');
            browseLabel.textContent = 'sélectionnez un fichier';

            const fileList = document.createElement('div');
            fileList.id = `file-list-${fileInputId}`;

            dropArea.appendChild(heading);
            dropArea.appendChild(text);
            dropArea.appendChild(fileInput);
            dropArea.appendChild(browseLabel);
            dropArea.appendChild(fileList);

            parentContainer.appendChild(dropArea);

            dropArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                dropArea.classList.add('highlight');
            });

            dropArea.addEventListener('dragleave', function() {
                dropArea.classList.remove('highlight');
            });

            dropArea.addEventListener('drop', function(e) {
                e.preventDefault();
                dropArea.classList.remove('highlight');

                const files = e.dataTransfer.files;

                handleFiles(files, fileList);
                submitFormIfNeeded();
            });

            fileInput.addEventListener('change', function() {
                const files = fileInput.files;

                handleFiles(files, fileList);
                submitFormIfNeeded();
            });

            function handleFiles(files, fileListElement) {
                fileListElement.innerHTML = '';

                for (const file of files) {
                    const listItem = document.createElement('div');
                    listItem.classList.add('mb-2');
                    listItem.textContent = `${file.name} (${formatBytes(file.size)})`;
                    fileListElement.appendChild(listItem);
                }
            }

            function submitFormIfNeeded() {
                // Check if the file input has a parent form and submit it
                const form = fileInput.closest('form');
                if (form && fileInput.files.length > 0) {
                    form.submit();
                }
            }

            function formatBytes(bytes, decimals = 2) {
                if (bytes === 0) return '0 Bytes';

                const k = 1024;
                const dm = decimals < 0 ? 0 : decimals;
                const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

                const i = Math.floor(Math.log(bytes) / Math.log(k));

                return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
            }

            return {
                fileInput,
                dropArea,
                fileList,
            };
        }

        // Example usage:
        const input1 = enableDragAndDrop('fileInput1');
        const input2 = enableDragAndDrop('fileInput2');
        const input3 = enableDragAndDrop('fileInput3');
        const input4 = enableDragAndDrop('fileInput4');
    </script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    {{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize fullCalendar
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                },
                defaultDate: moment(),
                contentHeight: 'auto',
                navLinks: false, // can click day/week names to navigate views
                editable: false,
                eventLimit: false, // allow "more" link when too many events
            });
        });
    </script>
    <script>
        function toggleSection(sectionId) {
            var convoyageSection = document.getElementById('convoyageSection');
            var servicesSection = document.getElementById('servicesSection');
            var convoyageBtn = document.getElementById('convoyageBtn');
            var servicesBtn = document.getElementById('servicesBtn');

            if (sectionId === 'convoyage') {
                convoyageSection.style.display = 'block';
                servicesSection.style.display = 'none';
                convoyageBtn.classList.add('active-section-btn');
                servicesBtn.classList.remove('active-section-btn');
            } else if (sectionId === 'services') {
                convoyageSection.style.display = 'none';
                servicesSection.style.display = 'block';
                convoyageBtn.classList.remove('active-section-btn');
                servicesBtn.classList.add('active-section-btn');
            }
        }
    </script>
    <script>
        function selectImage() {
            // Trigger the file input when the button is clicked
            document.getElementById('imageInput').click();
        }

        // Add an event listener to the file input to submit the form when an image is selected
        document.getElementById('imageInput').addEventListener('change', function() {
            // Submit the form
            document.getElementById('vehicleForm').submit();
        });
    </script>
@endsection
@endsection