@props(['vehicle'])
<div id="modal_vehicle_info" class="hidden fixed inset-0 bg-gray-900/80 flex justify-center items-center z-[20]">
    <div class="bg-white p-4 rounded shadow-md lg:w-4/12">
        <div class="text-lg text-white bg-slate-500 rounded-sm pl-4 pt-1 pb-2">{{ __('vehicle.modal_info.info_title') }}</div>
        <div class="py-4 border-b border-gray-300">

            <table class="w-full text-xl">
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.marka') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->car_brand }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.model') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->car_model }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.plate_number') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->plate_number }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.vin') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->vin }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.year') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->year }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.volume_ccm') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->volume_ccm }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.power_kw') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->power_kw }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.power_km') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->power_km }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.kilometers') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->kilometers }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.engine_code') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->engine_code }}</td>
                </tr>
                <tr class="border-b border-slate-300">
                    <td class="w-1/2 text-right font-bold">{{ __('vehicle.modal_info.paint_code') }} :</td>
                    <td class="w-1/2 text-left pl-2">{{ $vehicle->paint_code }}</td>
                </tr>
                <tr>
                    <td colspan="2" class="text-left pl-2">{{ $vehicle->description }}</td>
                </tr>
            </table>

        </div>
        <div class="flex justify-between pt-4">
            <button type="button" id="close-modal" class="btn_lg btn_default">{{ __('modal.close') }}</button>
        </div>
    </div>
</div>
@push('custom-js')
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const modal = document.getElementById("modal_vehicle_info");
        const openBtn = document.getElementById("modal-button-vehicle-info");
        const closeBtn = document.getElementById("close-modal");

        if (openBtn && modal) {
            openBtn.addEventListener("click", () => {
                modal.classList.remove("hidden");
            });
        }

        if (closeBtn && modal) {
            closeBtn.addEventListener("click", () => {
                modal.classList.add("hidden");
            });
        }
    });
</script>
@endpush