<template>
    <GuestLayout>
        <div class="flex justify-center items-center h-[inherit] w-full">
            <Card class="card flex justify-center xl:w-1/2 lg:w-1/2 w-full h-fit">
                <template #content>
                    <form @submit.prevent="submit">
                        <div>
                            <Stepper v-model:value="activeStep" class="w-full">
                                <StepList>
                                    <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
                                        <div class="flex flex-row flex-auto gap-2" v-bind="a11yAttrs.root">
                                            <button type="button" class="bg-transparent border-0 inline-flex flex-col gap-2"
                                                @click="activateCallback" v-bind="a11yAttrs.header">
                                                <span :class="[
                                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
                                                    { 'bg-purple-950 text-white border-primary': value <= activeStep, 'border-gray-200': value > activeStep }
                                                ]">
                                                    <KeyIcon class="h-6 w-6 " />
                                                </span>
                                            </button>
                                            <Divider />
                                        </div>
                                    </Step>
                                    <Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="2">
                                        <div class="flex flex-row flex-auto gap-2 pl-2" v-bind="a11yAttrs.root">
                                            <button type="button" class="bg-transparent border-0 inline-flex flex-col gap-2"
                                                @click="activateCallback" v-bind="a11yAttrs.header">
                                                <span :class="[
                                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
                                                    { 'bg-purple-950 text-white border-primary': value <= activeStep, 'border-gray-200': value > activeStep }
                                                ]">
                                                    <IdentificationIcon class="h-6 w-6 " />
                                                </span>
                                            </button>
                                            <Divider />
                                        </div>
                                    </Step>
                                    <Step v-if="form.role_id === 'conductor'" v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="3">
                                        <div class="flex flex-row pl-2" v-bind="a11yAttrs.root">
                                            <button type="button" class="bg-transparent border-0 inline-flex flex-col gap-2"
                                                @click="activateCallback" v-bind="a11yAttrs.header">
                                                <span :class="[
                                                    'rounded-full border-2 w-12 h-12 inline-flex items-center justify-center',
                                                    { 'bg-purple-950 text-white border-primary': value <= activeStep, 'border-gray-200': value > activeStep }
                                                ]">
                                                    <i class="pi pi-car" />
                                                </span>
                                            </button>
                                        </div>
                                    </Step>
                                </StepList>
                                <StepPanels>
                                    <StepPanel v-slot="{ activateCallback }" :value="1">
                                        <div class="flex items-center gap-2 mx-auto"
                                            style="min-height: 16rem;">
                                            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 gap-4 mx-auto max-w-full">
                                                <!-- Tarjeta Modo Conductor -->
                                                <div class="bg-purple-900 shadow-lg rounded-2xl p-6 flex items-center justify-center hover:shadow-xl transition-shadow">
                                                    <div class="flex flex-col items-center">
                                                        <div class="text-purple-100 text-2xl font-semibold">
                                                            🚗 Modo Conductor
                                                        </div>
                                                        <p class="text-gray-300 text-sm text-center mt-2">
                                                            Conduce y ayuda a otros a llegar a su destino.
                                                        </p>
                                                        <button type="button" @click="selectMode('conductor')" class="mt-4 bg-purple-950 hover:bg-purple-800 text-white font-bold py-2 px-4 rounded-lg transition">
                                                            Seleccionar
                                                        </button>
                                                    </div>
                                                    
                                                </div>

                                                <!-- Tarjeta Modo Pasajero -->
                                                <div class="bg-purple-900 shadow-lg rounded-2xl p-6 flex flex-col items-center hover:shadow-xl transition-shadow">
                                                    <div class="text-purple-100 text-2xl font-semibold">
                                                        🚕 Modo Pasajero
                                                    </div>
                                                    <p class="text-gray-300 text-sm text-center mt-2">
                                                        Viaja cómodamente y encuentra conductores disponibles cerca de ti.
                                                    </p>
                                                    <button type="button" @click="selectMode('pasajero')"  class="mt-4 bg-purple-950 hover:bg-purple-800 text-white font-bold py-2 px-4 rounded-lg transition">
                                                        Seleccionar
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex pt-6 justify-end">
                                            <Button type="button" label="Siguiente" icon="pi pi-arrow-right" iconPos="right"
                                                @click="activateCallback(2)" />
                                        </div>
                                    </StepPanel>
                                    <StepPanel v-slot="{ activateCallback }" :value="2">
                                        <div class="flex flex-col gap-2 mx-auto min-h-[14rem] max-h-[28rem] xl:max-h-[30rem] lg:max-h-[30rem] pr-4 overflow-auto">
                                            <div class="grid lg:grid-cols-2 md:grid-cols-2 gap-4">
                                                <div>
                                                    <InputLabel for="nombre" value="Nombre" />
                                                    <TextInput
                                                        id="nombre"
                                                        type="text"
                                                        class="mt-1 block w-full"
                                                        v-model="form.nombre"
                                                        required
                                                        autocomplete="Nombre"
                                                    />
                                                    <InputError
                                                        class="mt-2"
                                                        :message="form.errors.nombre"
                                                    />
                                                </div>
                                                <div>
                                                    <InputLabel
                                                        for="tipo_identificacion"
                                                        value="Tipo de documento"
                                                    />
                                                    <Dropdown
                                                        v-model="form.tipo_identificacion"
                                                        :options="tipos_docs"
                                                        optionValue="value"
                                                        optionLabel="label"
                                                        filter
                                                        class="w-2/3 min-[300px]:w-full h-[42px] mt-1"
                                                        required
                                                    />
                                                    <InputError
                                                        class="mt-2"
                                                        :message="form.errors.tipo_identificacion"
                                                    />
                                                </div>
                                                <div>
                                                    <InputLabel for="identificacion" value="Identificación" />
                                                    <InputNumber
                                                        v-model="form.identificacion"
                                                        class="w-full mt-1 input_full"
                                                        inputId="withoutgrouping" :useGrouping="false" fluid
                                                    />
                                                    <InputError
                                                        class="mt-2"
                                                        :message="form.errors.identificacion"
                                                    />
                                                </div>
                                                <div>
                                                    <div>
                                                        <InputLabel for="archivo_id" value="Archivo identificación" />
                                                        <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="loadArchivoId"
                                                                customUpload 
                                                                auto 
                                                                severity="secondary" 
                                                                accept="application/pdf" 
                                                                :maxFileSize="2000000"
                                                            />

                                                            <!-- Vista previa del archivo -->
                                                            <div v-if="form.archivo_id" 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.archivo_id.name">
                                                                    {{ form.archivo_id.name }}
                                                                </span>
                                                                <Button 
                                                                    icon="pi pi-times" 
                                                                    class="ml-2 p-button-text p-button-danger" 
                                                                    @click="clearArchivoId" 
                                                                />
                                                            </div>
                                                        </div>
                                                        <InputError class="mt-2" :message="form.errors.archivo_id" />
                                                    </div>
                                                </div>
                                                <div>
                                                    <InputLabel
                                                        for="eps"
                                                        value="EPS"
                                                    />
                                                    <Dropdown
                                                        v-model="form.eps"
                                                        :options="epsOptions"
                                                        optionValue="value"
                                                        optionLabel="label"
                                                        filter
                                                        class="w-2/3 min-[300px]:w-full h-[42px] mt-1"
                                                        required
                                                    />
                                                    <InputError
                                                        class="mt-2"
                                                        :message="form.errors.eps"
                                                    />
                                                </div>
                                                <div>
                                                    <div>
                                                        <InputLabel for="certificado_eps" value="Certificado EPS" />
                                                        <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="loadCertificadoEps"
                                                                customUpload 
                                                                auto 
                                                                severity="secondary" 
                                                                accept="application/pdf" 
                                                                :maxFileSize="2000000"
                                                            />

                                                            <!-- Vista previa del archivo -->
                                                            <div v-if="form.certificado_eps" 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.certificado_eps.name">
                                                                    {{ form.certificado_eps.name }}
                                                                </span>
                                                                <Button 
                                                                    icon="pi pi-times" 
                                                                    class="ml-2 p-button-text p-button-danger" 
                                                                    @click="clearCertificadoEps" 
                                                                />
                                                            </div>
                                                        </div>
                                                        <InputError class="mt-2" :message="form.errors.certificado_eps" />
                                                    </div>
                                                </div>
                                                <div>
                                                    <InputLabel
                                                        for="direccion"
                                                        value="Dirección"
                                                    />
                                                    <TextInput
                                                        id="direccion"
                                                        type="text"
                                                        class="mt-1 block w-full"
                                                        v-model="form.direccion"
                                                        autocomplete="direccion"
                                                        name="direccion"
                                                    />
                                                    <InputError
                                                        class="mt-2"
                                                        :message="form.errors.direccion"
                                                    />
                                                </div>
                                                <div>
                                                    <InputLabel for="celular" value="Celular" />
                                                    <InputNumber
                                                        v-model="form.celular"
                                                        class="w-full mt-1 input_full"
                                                        inputId="withoutgrouping" :useGrouping="false" fluid
                                                    />
                                                    <InputError
                                                        class="mt-2"
                                                        :message="form.errors.celular"
                                                    />
                                                </div>
                                                <div>
                                                    <InputLabel for="foto_perfil" value="Foto de perfil" />
                                                    <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="onFileSelectEstudiante"
                                                            class="sm:w-auto w-full"
                                                            accept="image/*"
                                                            customUpload 
                                                            auto 
                                                            severity="secondary"
                                                        />

                                                        <!-- Vista previa de la imagen seleccionada -->
                                                        <div v-if="form.foto_perfil" 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.foto_perfil.name">
                                                                {{ form.foto_perfil.name }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <InputError
                                                        class="mt-2"
                                                        :message="form.errors.foto_perfil"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex pt-6 justify-between">
                                            <Button type="button" label="Atras" severity="secondary" icon="pi pi-arrow-left"
                                                @click="activateCallback(1)" />
                                            
                                            <Button v-if="form.role_id === 'conductor'" type="button" label="Siguiente" icon="pi pi-arrow-right" iconPos="right"
                                                @click="activateCallback(3)" />
                                            
                                            <Button v-else type="submit" label="Guardar" icon="pi pi-save" iconPos="right" />
                                        </div>
                                    </StepPanel>
                                    <StepPanel v-slot="{ activateCallback }" :value="3">
                                        <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>
                                                <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-2">
                                                                <!-- 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>
                                            
                                        </div>
                                        <div class="flex pt-6 justify-between">
                                            <Button type="button" label="Atras" severity="secondary" icon="pi pi-arrow-left"
                                                @click="activateCallback(2)" />
                                            <Button type="submit" label="Guardar" icon="pi pi-save" iconPos="right" />
                                        </div>
                                    </StepPanel>
                                </StepPanels>
                            </Stepper>
                        </div>
                    </form>
                </template>
            </Card>
        </div>
        <div>
            <Link :href="route('logout')" method="post" as="button" class="absolute bottom-1 center-horizontal text-white flex items-center">
                <span class="underline">ir a</span> <img :src="logoCarpooling" class="w-28" alt="">
            </Link>
        </div>
    </GuestLayout>

    
    <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>
    <!-- <div class="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
        <h2 class="text-lg font-semibold">Asignar Rol</h2>
        <form @submit.prevent="submit">
            <div class="mb-4">
                <label class="block text-sm font-medium">Selecciona un rol:</label>
                <select v-model="form.role_id" class="w-full border rounded p-2">
                    <option v-for="role in roles" :key="role.id" :value="role.id">
                        {{ role.name }}
                    </option>
                </select>
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">
                Guardar Rol
            </button>
        </form>
    </div> -->
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { useForm } from '@inertiajs/vue3';
import GuestLayout from '@/Layouts/GuestLayout.vue';
import { KeyIcon, IdentificationIcon } from '@heroicons/vue/24/solid';
import 'primeicons/primeicons.css'

import Stepper from 'primevue/stepper';
import StepList from 'primevue/steplist';
import StepPanels from 'primevue/steppanels';
import Step from 'primevue/step';
import StepPanel from 'primevue/steppanel';
import logoCarpooling from '/public/assets/icons/Carpooling-02.png';

import InputError from "@/Components/InputError.vue";
import InputLabel from "@/Components/InputLabel.vue";
import InputNumber from "primevue/inputnumber";
import Dropdown from "primevue/dropdown";
import TextInput from "@/Components/TextInput.vue";
import FileUpload from 'primevue/fileupload';
import { Link } from '@inertiajs/vue3';
import Dialog from 'primevue/dialog';
import DatePicker from 'primevue/datepicker';

import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup'; 
import Row from 'primevue/row';

import Button from 'primevue/button';
import Card from 'primevue/card';
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 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 onUpload = () => {
    toast.add({ severity: 'info', summary: 'Imagen subida', detail: 'El archivo se ha subido correctamente', life: 3000 });
};


const loadArchivoId = (event) => {
    if (event.files && event.files.length > 0) {
        form.archivo_id = event.files[0];
    }
};
const clearArchivoId = () => {
    form.archivo_id = null;
};

const loadCertificadoEps = (event) => {
    if (event.files && event.files.length > 0) {
        form.certificado_eps = event.files[0];
    }
};
const clearCertificadoEps = () => {
    form.certificado_eps = null;
};

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 onFileSelectEstudiante(event) {
    const file = event.files[0];
    form.foto_perfil = file;
    const reader = new FileReader();

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

    reader.readAsDataURL(file);
}

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 tipos_docs = [
    { label: 'Cédula de ciudadanía', value: 'CC' },
    { label: 'Cédula de extranjería', value: 'CE' },
    { label: 'Pasaporte', value: 'PA' },
    { label: 'Tarjeta de identidad', value: 'TI' },
];


const epsOptions = [
    { label: 'Nueva EPS', value: 'Nueva EPS' },
    { label: 'Salud Total', value: 'Salud Total' },
    { label: 'Compensar', value: 'Compensar' },
    { label: 'Famisanar', value: 'Famisanar' },
    { label: 'Aliansalud', value: 'Aliansalud' },
    { label: 'Coomeva', value: 'Coomeva' },
    { label: 'Savia Salud', value: 'Savia Salud' },
    { label: 'EPS Sura', value: 'EPS Sura' },
    { label: 'EPS Sanitas', value: 'EPS Sanitas' },
    { label: 'Salud Vida', value: 'Salud Vida' },
    { label: 'Cafesalud', value: 'Cafesalud' },
    { label: 'Medimás', value: 'Medimás' },
    { label: 'Emssanar', value: 'Emssanar' },
    { label: 'Asmet Salud', value: 'Asmet Salud' },
    { label: 'Mutual Ser', value: 'Mutual Ser' },
    { label: 'Ambuq', value: 'Ambuq' },
    { label: 'Cafam', value: 'Cafam' },
    { label: 'Colsubsidio', value: 'Colsubsidio' },
    { label: 'EPS S.O.S', value: 'EPS S.O.S' },
    { label: 'Coosalud', value: 'Coosalud' },
    { label: 'Salud Mía', value: 'Salud Mía' },
    { label: 'Comfenalco Valle', value: 'Comfenalco Valle' },
    { label: 'EPM - Empresas Públicas de Medellín', value: 'EPM - Empresas Públicas de Medellín' },
    { label: 'Fondo de Pasivo Social de Ferrocarriles Nacionales de Colombia', value: 'Fondo de Pasivo Social de Ferrocarriles Nacionales de Colombia' },
    { label: 'Cajacopi Atlántico', value: 'Cajacopi Atlántico' },
    { label: 'Capresoca', value: 'Capresoca' },
    { label: 'Comfachocó', value: 'Comfachocó' },
    { label: 'Comfaoriente', value: 'Comfaoriente' },
    { label: 'EPS Familiar de Colombia', value: 'EPS Familiar de Colombia' },
    { label: 'Capital Salud', value: 'Capital Salud' },
    { label: 'Dusakawi', value: 'Dusakawi' },
    { label: 'Asociación Indígena del Cauca', value: 'Asociación Indígena del Cauca' },
    { label: 'Anas Wayuu', value: 'Anas Wayuu' },
    { label: 'Mallamas', value: 'Mallamas' },
    { label: 'Pijaos Salud', value: 'Pijaos Salud' },
    { label: 'Salud Bolívar', value: 'Salud Bolívar' },
];

/* const roles = usePage().props.roles; */
const form = useForm({ 
    role_id: '',
    nombre: '',
    tipo_identificacion: '',
    identificacion: null,
    archivo_id: '',
    direccion: '',
    celular: null,
    eps: '',
    certificado_eps: '',
    foto_perfil: null,

    licencia: '',
    licencia_pdf: '',

    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 selectedMode = ref('');
const selectMode = (mode) => {
    selectedMode.value = mode; // Guardar el modo seleccionado
    activeStep.value = 2; // Avanzar al siguiente paso
    form.role_id = mode; // Actualizar el valor en el formulario
};


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("asignar.rol.post"), {
                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: () => {
                    console.log('success');
                },
            });
        },
        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>