<template>
    <AuthenticatedLayout>
        <div class="flex flex-col gap-2 mx-auto min-h-[16rem] max-h-[37rem] xl:max-h-[30rem] lg:max-h-[30rem] pr-4 overflow-auto">
            <div v-if="solicitudPendiente" class="flex items-center justify-center">
                <Message severity="warn">
                    Ya has enviado una solicitud para ser conductor. Te notificaremos por correo electrónico cuando sea revisada y aprobada.
                </Message>

            </div>
            <div v-else>
                <form @submit.prevent="submit">
                    <div class="grid lg:grid-cols-2 gap-4">
                        <div>
                            <InputLabel for="licencia" value="Numero de licencia" />
                            <TextInput
                                id="licencia"
                                type="text"
                                class="mt-1 block w-full"
                                v-model="form.licencia"
                                autocomplete="Licencia"
                            />
                            <InputError
                                class="mt-2"
                                :message="form.errors.licencia"
                            />
                        </div>
                        <div>
                            <div>
                                <InputLabel for="licencia_pdf" value="Scaner licencia" />
                                <div class="flex flex-col sm:flex-row sm:items-center sm:gap-4 mt-1">
                                    <!-- Botón de subida de archivo -->
                                    <FileUpload 
                                        mode="basic"
                                        class="sm:w-auto w-full"
                                        @select="loadLicencia"
                                        customUpload 
                                        auto 
                                        severity="secondary" 
                                        accept="application/pdf" 
                                        :maxFileSize="2000000"
                                    />

                                    <!-- Vista previa del archivo -->
                                    <div v-if="form.licencia_pdf" class="flex items-center w-full sm:w-auto">
                                        <i class="pi pi-file-pdf text-red-500 text-4xl"></i>
                                        <span class="ml-2 truncate max-w-[150px] block" :title="form.licencia_pdf.name">
                                            {{ form.licencia_pdf.name }}
                                        </span>
                                        <Button 
                                            icon="pi pi-times" 
                                            class="ml-2 p-button-text p-button-danger" 
                                            @click="clearLicencia" 
                                        />
                                    </div>
                                </div>
                                <InputError class="mt-2" :message="form.errors.licencia_pdf" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-end mt-10">
                            <Button type="button" label="Agregar vehiculo" @click="visible = true" outlined icon="pi pi-plus" iconPos="right" />
                        </div>
                        <DataTable class="mt-2" :value="customers" stripedRows scrollable  scrollHeight="300px" tableStyle="max-width: 100%">
                            <Column field="placa" header="Placa"></Column>
                            <Column field="marca" header="Marca"></Column>
                            <Column field="linea" header="Linea"></Column>
                            <Column field="modelo" header="Modelo"></Column>
                            <Column :exportable="false" header="Acciones" style="min-width: 5rem">
                                <template #body="slotProps">
                                    <Button type="button" icon="pi pi-trash" outlined rounded severity="danger" @click="eliminar_vehiculo(slotProps.data.id)" />
                                </template>
                            </Column>
                            <template #empty>
                                <div class="flex flex-col items-center justify-center text-gray-500 py-5">
                                    <i class="pi pi-inbox text-4xl mb-3"></i>
                                    <p>No hay registros disponibles</p>
                                </div>
                            </template>
                        </DataTable>
                        <InputError class="mt-2" :message="form.errors.vehiculos" />
                    </div>
                    <div class="mt-5 flex justify-end gap-4">
                        <Button type="submit" :disabled="form.processing" label="Enviar solicitud"></Button>
                    </div>
                </form>
            </div>
            
        </div>
       
    </AuthenticatedLayout>

    
    <Dialog v-model:visible="visible" :position="'center'" maximizable modal header="Agregar vehiculo" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
        <form @submit.prevent="addVehiculo">
            <div class="grid lg:grid-cols-4 xl:grid-cols-4 gap-4">
                <div>
                    <InputLabel for="marca" value="Marca" />
                    <TextInput
                        id="marca"
                        type="text"
                        class="mt-1 block w-full"
                        v-model="form_vehiculo.marca"
                        placeholder="Ej. Toyota, Kia, Chevrolet"
                        required
                        autocomplete="Marca"
                    />
                    <InputError
                        class="mt-2"
                        :message="form_vehiculo.errors.marca"
                    />
                </div>
                <div>
                    <InputLabel for="linea" value="Linea" />
                    <TextInput
                        id="linea"
                        type="text"
                        class="mt-1 block w-full"
                        v-model="form_vehiculo.linea"
                        placeholder="Ej. Corolla, Piccanto, Spark"
                        required
                        autocomplete="Linea"
                    />
                    <InputError
                        class="mt-2"
                        :message="form_vehiculo.errors.linea"
                    />
                </div>
                <div>
                    <InputLabel for="placa" value="Placa" />
                    <TextInput
                        id="placa"
                        type="text"
                        class="mt-1 block w-full"
                        v-model="form_vehiculo.placa"
                        required
                        autocomplete="Placa"
                    />
                    <InputError
                        class="mt-2"
                        :message="form_vehiculo.errors.placa"
                    />
                </div>
                <div>
                    <InputLabel for="modelo" value="Modelo" />
                    <TextInput
                        id="modelo"
                        type="text"
                        class="mt-1 block w-full"
                        v-model="form_vehiculo.modelo"
                        required
                        autocomplete="Modelo"
                    />
                    <InputError
                        class="mt-2"
                        :message="form_vehiculo.errors.modelo"
                    />
                </div>
            </div>
            <div class="grid lg:grid-cols-2 xl:grid-cols-2 gap-4 mt-5">
                <div>
                    <InputLabel for="fecha_v_soat" value="Fecha vencimiento SOAT" />
                    <DatePicker v-model="form_vehiculo.fecha_v_soat" />
                    <InputError class="mt-2" :message="form_vehiculo.errors.fecha_v_soat" />
                </div>
                <div>
                    <InputLabel for="soat" value="SOAT" />
                    <div class="flex flex-col sm:flex-row sm:items-center sm:gap-4">
                        <!-- Botón de subida de archivo -->
                        <FileUpload 
                            mode="basic"
                            class="sm:w-auto w-full"
                            @select="loadSoat"
                            customUpload 
                            auto 
                            severity="secondary" 
                            accept="application/pdf" 
                            :maxFileSize="2000000"
                        />

                        <!-- Vista previa del archivo -->
                        <div v-if="form_vehiculo.soat" class="flex items-center w-full sm:w-auto">
                            <i class="pi pi-file-pdf text-red-500 text-4xl"></i>
                            <span class="ml-2 truncate max-w-[150px] block" :title="form_vehiculo.soat.name">
                                {{ form_vehiculo.soat.name }}
                            </span>
                            <Button 
                                icon="pi pi-times" 
                                class="ml-2 p-button-text p-button-danger" 
                                @click="clearSoat" 
                            />
                        </div>
                    </div>
                    <InputError class="mt-2" :message="form_vehiculo.errors.soat" />
                </div>
            </div>
            <div v-if="requiereMecanica" class="grid lg:grid-cols-2 xl:grid-cols-2 gap-4 mt-5">
                <div>
                    <InputLabel for="fecha_v_mecanica" value="Fecha técnico mecánica" />
                    <DatePicker v-model="form_vehiculo.fecha_v_mecanica" />
                    <InputError class="mt-2" :message="form_vehiculo.errors.fecha_v_mecanica" />
                </div>
                <div>
                    <InputLabel for="tecnico_mecanica" value="Técnico mecánica" />
                    <div class="flex flex-col sm:flex-row sm:items-center sm:gap-4">
                        <!-- Botón de subida de archivo -->
                        <FileUpload 
                            mode="basic"
                            class="sm:w-auto w-full"
                            @select="loadMecanica"
                            customUpload 
                            auto 
                            severity="secondary" 
                            accept="application/pdf" 
                            :maxFileSize="2000000"
                        />

                        <!-- Vista previa del archivo -->
                        <div v-if="form_vehiculo.tecnico_mecanica" class="flex items-center w-full sm:w-auto">
                            <i class="pi pi-file-pdf text-red-500 text-4xl"></i>
                            <span class="ml-2 truncate max-w-[150px] block" :title="form_vehiculo.tecnico_mecanica.name">
                                {{ form_vehiculo.tecnico_mecanica.name }}
                            </span>
                            <Button 
                                icon="pi pi-times" 
                                class="ml-2 p-button-text p-button-danger" 
                                @click="clearMecanica" 
                            />
                        </div>
                    </div>
                    <InputError class="mt-2" :message="form_vehiculo.errors.tecnico_mecanica" />
                </div>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 gap-4 mt-5">
                <div class="col-span-1">
                    <InputLabel for="tarjeta_propiedad" value="Tarjeta de propiedad" />
                    <div class="flex flex-col sm:flex-row sm:items-center sm:gap-4 mt-2">
                        <!-- Botón de subida de archivo -->
                        <FileUpload 
                            mode="basic"
                            class="sm:w-auto w-full"
                            @select="loadTarjetaP"
                            customUpload 
                            auto 
                            severity="secondary" 
                            accept="application/pdf" 
                            :maxFileSize="2000000"
                        />

                        <!-- Vista previa del archivo -->
                        <div v-if="form_vehiculo.tarjeta_propiedad" class="flex items-center w-full sm:w-auto">
                            <i class="pi pi-file-pdf text-red-500 text-4xl"></i>
                            <span class="ml-2 truncate max-w-[150px] block" :title="form_vehiculo.tarjeta_propiedad.name">
                                {{ form_vehiculo.tarjeta_propiedad.name }}
                            </span>
                            <Button 
                                icon="pi pi-times" 
                                class="ml-2 p-button-text p-button-danger" 
                                @click="clearTargetaFile" 
                            />
                        </div>
                    </div>
                    <InputError class="mt-2" :message="form_vehiculo.errors.tarjeta_propiedad" />
                </div>
                <div>
                    <InputLabel for="foto_vehiculo" value="Foto del vehículo" />
                    <div class="flex flex-col sm:flex-row sm:items-center sm:gap-4 mt-2">
                        <!-- Botón para subir la imagen -->
                        <FileUpload 
                            mode="basic"
                            @select="onFileSelect"
                            class="sm:w-auto w-full"
                            accept="image/*"
                            customUpload 
                            auto 
                            severity="secondary"
                        />

                        <!-- Vista previa de la imagen seleccionada -->
                        <div v-if="form_vehiculo.foto_vehiculo" class="flex items-center gap-3 mt-3 sm:mt-0">
                            <img :src="src" alt="Foto subida" class="w-12 h-12 object-cover rounded-lg shadow-md" />
                            <span class="truncate max-w-[150px] block" :title="form_vehiculo.foto_vehiculo.name">
                                {{ form_vehiculo.foto_vehiculo.name }}
                            </span>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="flex justify-end gap-2 mt-5">
                <Button type="button" label="Cancelar" severity="secondary" @click="cancelVehiculo"></Button>
                <Button type="submit" label="Guardar"></Button>
            </div>
        </form>
    </Dialog>
    <Toast />
    <ConfirmDialog></ConfirmDialog>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { useForm } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import 'primeicons/primeicons.css';


import InputError from "@/Components/InputError.vue";
import InputLabel from "@/Components/InputLabel.vue";
import TextInput from "@/Components/TextInput.vue";
import FileUpload from 'primevue/fileupload';
import Dialog from 'primevue/dialog';
import DatePicker from 'primevue/datepicker';
import Message from 'primevue/message';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

import Button from 'primevue/button';
import Toast from "primevue/toast";
import ConfirmDialog from 'primevue/confirmdialog';

import { useToast } from "primevue/usetoast";
import { useConfirm } from "primevue/useconfirm";
import dayjs from "dayjs";

dayjs.locale("es");


const props = defineProps({
    solicitudPendiente: Boolean,
    id: Number,
})

console.log(props.solicitudPendiente);

const toast = useToast();
const confirm = useConfirm();

const data = ref([]);

const customers = ref();

const visible = ref(false);

const src = ref(null);

onMounted(() => {
    customers.value = data.value;
});

const activeStep = ref(1);


const loadLicencia = (event) => {
    if (event.files && event.files.length > 0) {
        form.licencia_pdf = event.files[0];
    }
};
const clearLicencia = () => {
    form.licencia_pdf = null;
};

const loadSoat = (event) => {
    if (event.files && event.files.length > 0) {
        form_vehiculo.soat = event.files[0];
    }
};
const clearSoat = () => {
    form_vehiculo.soat = null;
};

const loadMecanica = (event) => {
    if (event.files && event.files.length > 0) {
        form_vehiculo.tecnico_mecanica = event.files[0];
    }
};
const clearMecanica = () => {
    form_vehiculo.soat = null;
};

const loadTarjetaP = (event) => {
    if (event.files && event.files.length > 0) {
        form_vehiculo.tarjeta_propiedad = event.files[0];
    }
};
const clearTargetaFile = () => {
    form_vehiculo.tarjeta_propiedad = null;
};

function onFileSelect(event) {
    const file = event.files[0];
    form_vehiculo.foto_vehiculo = file;
    const reader = new FileReader();

    reader.onload = async (e) => {
        src.value = e.target.result;
    };

    reader.readAsDataURL(file);
}

/* const roles = usePage().props.roles; */
const form = useForm({
    licencia: '',
    licencia_pdf: '',
    id_estudiante: props.id,

    vehiculos: [],
});

const form_vehiculo = useForm({ 
    id: null,
    soat: null,
    fecha_v_soat: '',
    tecnico_mecanica: null,
    fecha_v_mecanica: '',
    foto_vehiculo: null,
    tarjeta_propiedad: null,
    placa: '',
    marca: '',
    linea: '',
    modelo: ''
});


const currentYear = dayjs().year();

const requiereMecanica = computed(() => {
    const modeloInt = parseInt(form_vehiculo.modelo);
    return modeloInt <= currentYear - 5; 
});

const validarMecanica = () => {
    if (!requiereMecanica.value) {
        form_vehiculo.tecnico_mecanica = null;
        form_vehiculo.fecha_v_mecanica = '';
    }
};

watch(() => form_vehiculo.modelo, validarMecanica);

const validarFormulario = () => {
    form_vehiculo.errors = {}; // Reiniciar errores

    // Validar campos obligatorios
    if (!form_vehiculo.marca) {
        form_vehiculo.errors.marca = "La marca es obligatoria.";
    }
    if (!form_vehiculo.linea) {
        form_vehiculo.errors.linea = "La línea es obligatoria.";
    }
    if (!form_vehiculo.placa) {
        form_vehiculo.errors.placa = "La placa es obligatoria.";
    }
    if (!form_vehiculo.modelo) {
        form_vehiculo.errors.modelo = "El modelo es obligatorio.";
    }
    if (!form_vehiculo.fecha_v_soat) {
        form_vehiculo.errors.fecha_v_soat = "La fecha de vencimiento del SOAT es obligatoria.";
    }
    if (!form_vehiculo.soat) {
        form_vehiculo.errors.soat = "El archivo SOAT es obligatorio.";
    }
    if (!form_vehiculo.tarjeta_propiedad) {
        form_vehiculo.errors.tarjeta_propiedad = "La tarjeta de propiedad es obligatoria.";
    }
    if (!form_vehiculo.foto_vehiculo) {
        form_vehiculo.errors.foto_vehiculo = "La foto del vehículo es obligatoria.";
    }
    
    const anioActual = new Date().getFullYear();
    const aniosVehiculo = anioActual - parseInt(form_vehiculo.modelo);
    
    if (aniosVehiculo > 5 && (!form_vehiculo.tecnico_mecanica || !form_vehiculo.fecha_v_mecanica)) {
        form_vehiculo.errors.tecnico_mecanica = "Debe adjuntar el certificado técnico mecánico.";
        form_vehiculo.errors.fecha_v_mecanica = "Debe seleccionar la fecha de vencimiento del técnico mecánico.";
    }

    return Object.keys(form_vehiculo.errors).length === 0; // Retorna `true` si no hay errores
};

const addVehiculo = () => {
    if (!validarFormulario()) {
        return; // Detener el envío si hay errores
    }

    form_vehiculo.fecha_v_soat = dayjs(form_vehiculo.fecha_v_soat).format("YYYY-MM-DD");

    if(form_vehiculo.fecha_v_mecanica){
        form_vehiculo.fecha_v_mecanica = dayjs(form_vehiculo.fecha_v_mecanica).format("YYYY-MM-DD");
    }
    

    const nuevoVehiculo = {
        ...form_vehiculo,
        id: crypto.randomUUID() // Genera un UUID único
    };

    form.vehiculos.push(nuevoVehiculo);

    data.value.push(nuevoVehiculo);
    customers.value = data.value;

    form_vehiculo.reset();

    visible.value = false;
};


const eliminar_vehiculo = (id) => {
    
    confirm.require({
        message: '¿Esta seguro de eliminar el vehículo?',
        header: 'Confirmación',
        icon: 'pi pi-info-circle',
        rejectProps: {
            label: 'Cancelar',
            severity: 'secondary',
            outlined: true
        },
        acceptProps: {
            label: 'Eliminar',
            severity: 'danger'
        },
        accept: () => {
            data.value = data.value.filter((item) => item.id !== id);
            customers.value = data.value;
            toast.add({ severity: 'info', summary: 'Confirmado', detail: 'El vehículo se ha eliminado.', life: 3000 });
        },
        reject: () => {
            toast.add({ severity: 'error', summary: 'Cancelado', detail: 'Se ha cancelado la acción.', life: 3000 });
        }
    });
};


const cancelVehiculo = () => {
    form_vehiculo.reset();
    visible.value = false;
};

const submit = () => {
    confirm.require({
        message: '¿Esta seguro de enviar la información?',
        header: 'Confirmación',
        icon: 'pi pi-exclamation-triangle',
        rejectProps: {
            label: 'Cancelar',
            severity: 'secondary',
            outlined: true
        },
        acceptProps: {
            label: 'Enviar',
        },
        accept: () => {
            form.post(route("solicitarconductor.store"), {
                onError: (errors) => {
                    const errorFields = Object.keys(errors);

                    if (errorFields.includes('identificacion')) {
                        activeStep.value = 2;
                        console.error(errors.identificacion);
                    }

                    if (errorFields.length > 0) {
                        toast.add({
                            severity: 'error',
                            summary: 'Faltan datos por completar',
                            detail: 'Revisa los campos obligatorios e intenta de nuevo.',
                            life: 3000
                        });
                    } else {
                        toast.add({
                            severity: 'error',
                            summary: 'Error inesperado',
                            detail: 'No se pudo completar la acción. Intenta más tarde.',
                            life: 3000
                        });
                    }
                },
                onSuccess: () => {
                    toast.add({
                        severity: 'success',
                        summary: 'Solicitud enviada',
                        detail: 'Tu solicitud ha sido enviada exitosamente. Te notificaremos por correo electrónico cuando sea revisada y aprobada.',
                        life: 3000
                    });
                },
            });
        },
        reject: () => {
            toast.add({
                severity: 'error',
                summary: 'Acción cancelada',
                detail: 'Has cancelado la operación.',
                life: 3000
            });
        }

    });
    
};
</script>

<style>
.center-horizontal {
  left: 50%;
  transform: translateX(-50%);
}
.p-datepicker{
    width: 100% !important;
}
.p-datepicker input {
    width: 100% !important;
}

.p-fileupload-basic{
    display: block !important;
}

.p-overlay-mask{
    backdrop-filter: blur(20px);
}
</style>