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

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


@section('page-script')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')
<div class="row py-3 mb-4">
    @include('v2.fleet.layouts.sections.header', [
    'title' => __('client.vehicles'),
    'text' => 'Gérez facilement votre flotte de véhicules sur la page véhicules . Ajoutez ou importez des voitures, surveillez les contrôles techniques',
    ])
    <div class="col-md text-md-end">
        <button class="border-0 p-3 text-white bg-main-blue rounded" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_233_13057)">
                    <path d="M9.99996 18.3332C14.6023 18.3332 18.3333 14.6022 18.3333 9.99984C18.3333 5.39746 14.6023 1.6665 9.99996 1.6665C5.39759 1.6665 1.66663 5.39746 1.66663 9.99984C1.66663 14.6022 5.39759 18.3332 9.99996 18.3332Z" stroke="white" stroke-width="1.5" />
                    <path d="M12.5 10H10M10 10H7.5M10 10V7.5M10 10V12.5" stroke="white" stroke-width="1.5" stroke-linecap="round" />
                </g>
                <defs>
                    <clipPath id="clip0_233_13057">
                        <rect width="20" height="20" fill="white" />
                    </clipPath>
                </defs>
            </svg>
            &nbsp;
            {{ __('client.add') }}
        </button>
    </div>

    @include('v2.fleet.partials.offcanvas-right', [
        'title' => __('client.add_vehicle'),
        'form' => view('v2.fleet.vehicles.forms.create', [
        'sites' => $sites,
        'parkings' => $parkings,
        'drivers' => $drivers,
        'marks'=> $marks
        ])->render(),
    ])

</div>

@include('client.responses.messages')

<div class="form-group w-25">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">
                @include('v2.fleet.partials.icons.search')
            </span>
        </div>
        <input type="text" class="form-control" id="searchInput" placeholder="{{ __('client.search') }}">
    </div>
</div>

{{-- <div class="col">
    <div class="col-md text-md-end">
        <button class="border-0 p-3 bg-white rounded" type="button" onclick="toggleLayout()"> Switch List </button>
    </div>
</div> --}}

<div class="col-12">
    <div class="">
        @include('v2.fleet.vehicles.layouts.table-layout', ['vehicles' => $vehicles])
        @include('v2.fleet.vehicles.layouts.card-layout', ['vehicles' => $vehicles])
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/i18n/fr.js"></script>

<script>
    $(document).ready(function() {
        $("#marks").select2({
            dropdownParent: $("#offcanvasRight")
        , });
        $("#models").select2({
            dropdownParent: $("#offcanvasRight")
        , });
        $("#vehicles").select2({
            dropdownParent: $("#offcanvasRight")
        , });
    });

    function toggleLayout() {
        const tableLayout = document.getElementById('table-layout');
        const cardLayout = document.getElementById('card-layout');

        if (tableLayout.classList.contains('d-none')) {
            // Switch to table layout
            tableLayout.classList.remove('d-none');
            cardLayout.classList.add('d-none');
        } else {
            // Switch to card layout
            tableLayout.classList.add('d-none');
            cardLayout.classList.remove('d-none');
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('searchInput');

        searchInput.addEventListener('input', function() {
            const filter = searchInput.value.toUpperCase();
            const tableRows = document.querySelectorAll('#table-layout tbody tr');

            tableRows.forEach(function(row) {
                let found = false;
                row.querySelectorAll('td').forEach(function(cell) {
                    const textValue = cell.textContent || cell.innerText;
                    if (textValue.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                });

                if (found) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    });

    function displaySearchForm() {
        $("#search-form").show();
        $('#display-search-form-btn').hide();
    }

    function hideForm() {
        document.getElementById("vehicle_search").classList.remove('hidden');
        document.getElementById("vehicle_form").classList.add('hidden');
    }

    function hideSearch() {
        document.getElementById("vehicle_search").classList.add('hidden');
        document.getElementById("vehicle_form").classList.remove('hidden');
    }

    function handleSubmitMatriculationForm() {
        const matriculation = document.getElementById('matriculation').value.toUpperCase();
        const matriculationError = document.getElementById('matriculationError');
        const pattern = /^[A-Z]{2}\d{3}[A-Z]{2}$/;

        matriculationError.textContent = '';

        if (pattern.test(matriculation)) {
            const url = '{{ env('DADYCAR_URL') }}' + '/api/v1/sivin/search/number-plate?number_plate=' + matriculation;

            fetch(url).then(function(response) {
                if (response.status === 200) {
                    return response.json();
                }
                if (response.status === 404) {
                    matriculationError.textContent = "Désolé, nous avons pas trouvé votre plaque d'immatriculation . Veuillez réessayer ou utiliser la fonctionnalité de recherche par marques.";
                    return false;
                }
                if (response.status !== 200 && response.status !== 404) {
                    throw new Error(response.status);
                    return;
                }
            }).then(function(response) {
                if (response === false) {
                    return;
                }
                const data = response.data;
                hideSearch();

                document.getElementById("vehicle-id").value = data['id'];
                document.getElementById("vehicle-vin").value = data['vin'];
                document.getElementById("search-method").value = 'M';
                document.getElementById("vehicle-numberplate").value = data['number_plate'];
                document.getElementById("vehicle-type").value = data['vehicle_type'];
                document.getElementById("vehicle-mark").value = data['mark'];
                document.getElementById("vehicle-model").value = data['model'];
                document.getElementById("construction-year").value = data['first_circulation'];
                document.getElementById("vehicle-version").value = data['version'];
                document.getElementById("engine-type").value = data['energy'];

                document.getElementById("construction-year-warning").style.display = "none";
                document.getElementById("vehicle-vin").readOnly = true;
                document.getElementById("construction-year").readOnly = true;
                document.getElementById("vehicle-numberplate").readOnly = true;
                document.getElementById("vehicle-power").readOnly = false;
                document.getElementById("store-vehicle-button").click();
            }).catch(function() {
                matriculationError.textContent =
                    "Quelque chose s'est mal passé, veuillez réessayer plus tard, ou utilisez la méthode de recherche avec les marques.";
            });
        } else {
            matriculationError.textContent = "Le format de votre plaque d'immatriculation est invalide";
        }
    }

    function handleSubmit() {
        vehicle_id = document.getElementById("vehicles").value;

        dadycar_url = '{{ env('DADYCAR_URL') }}'
        var url = dadycar_url + '/api/v1/vehicles/' + vehicle_id

        fetch(url).then(function(response) {
            return response.json();
        }).then(function(data) {
            const thisYear = new Date().getFullYear();
            const year_of_constr_from = data['year_of_constr_from'] ? data['year_of_constr_from'].toString()
                .substr(0, 4) : 1950;
            const year_of_constr_to = data['year_of_constr_to'] ? data['year_of_constr_to'].toString().substr(0
                , 4) : thisYear;
            const minDate = new Date(year_of_constr_from + '-01-01');
            const maxDate = year_of_constr_to === thisYear ? new Date() : new Date(year_of_constr_to +
                '-12-31');

            hideSearch();

            document.getElementById("vehicle-id").value = vehicle_id;
            document.getElementById("search-method").value = 'S';
            document.getElementById("vehicle-type").value = data['car_type'];
            document.getElementById("vehicle-mark").value = data['manu_name'];
            document.getElementById("vehicle-model").value = data['model_name'];
            document.getElementById("vehicle-power").value = data['power_hp_from'];
            document.getElementById("construction-year").setAttribute("min", minDate.toISOString().split("T")[0]);
            document.getElementById("construction-year").setAttribute("max", maxDate.toISOString().split("T")[0]);
            document.getElementById("construction-year-warning").textContent = 'La date doit etre entre ' + year_of_constr_from + ' et ' + year_of_constr_to;
            document.getElementById("engine-type").value = data['motor_type'];
            document.getElementById("vehicle-version").value = data['type_name'];

            document.getElementById("construction-year-warning").style.display = "block";
            document.getElementById("construction-year").readOnly = false;
            document.getElementById("vehicle-numberplate").readOnly = false;
            document.getElementById("vehicle-power").readOnly = true;
            document.getElementById("store-vehicle-button").click();

        }).catch(function(err) {
            return;
        });
    }

    function getModels(mark_id) {
        models = document.getElementById("models");
        vehicles = document.getElementById("vehicles");

        if (models.options.length > 0) {
            removeOptions(models);
        }
        if (vehicles.options.length > 0) {
            removeOptions(models);
        }

        dadycar_url = '{{ env('DADYCAR_URL') }}'
        var url = dadycar_url + '/api/v1/models/filter/' + mark_id

        fetch(url).then(function(response) {
            return response.json();
        }).then(function(data) {
            var opt = document.createElement("option");
            opt.value = '';
            opt.textContent = 'Sélectionner';
            models.appendChild(opt);
            for (var i = 0; i < data.length; i++) {
                var opt = document.createElement("option");
                opt.value = data[i].id;
                opt.textContent = data[i].name;
                models.appendChild(opt);
            }
        }).catch(function(err) {
            return;
        });
    }

    function getVehicles(model_id) {
        vehicles = document.getElementById("vehicles");

        if (vehicles.options.length > 0) {
            removeOptions(vehicles);
        }

        dadycar_url = '{{ env('DADYCAR_URL') }}'
        var url = dadycar_url + '/api/v1/vehicles/filter/' + model_id

        fetch(url).then(function(response) {
            return response.json();
        }).then(function(data) {
            var opt = document.createElement("option");
            opt.value = '';
            opt.textContent = 'Sélectionner';
            vehicles.appendChild(opt);
            for (var i = 0; i < data.length; i++) {
                var opt = document.createElement("option");
                opt.value = data[i].id;
                opt.textContent = data[i].name;
                vehicles.appendChild(opt);
            }
        }).catch(function(err) {
            return;
        });
    }

    function removeOptions(models) {
        for (i = models.options.length - 1; i >= 0; i--) {
            models.remove(i);
        }
    }

    function toggleSection(sectionId) {
        var convoyageSection = document.getElementById('convoyageSection');
        var servicesSection = document.getElementById('servicesSection');
        var convoyageBtn = document.getElementById('convoyageBtn');
        var servicesBtn = document.getElementById('servicesBtn');

        hideForm();

        if (sectionId === 'numberplate') {
            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>
@endsection