<template>
	<div>
	    <div class="intro-y flex items-center mt-8">
	        <h2 class="text-lg font-medium mr-auto">Nuevo Usuario / Cliente</h2>
	    </div>
	    <div class="grid grid-cols-11 gap-x-6 mt-5 pb-20">
	        <div class="intro-y col-span-11 2xl:col-span-9">
	            <div class="intro-y box p-5 mt-5">
	                <div class="border border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
	                    <div class="font-medium text-base flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5">
	                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4 mr-2">
	                            <polyline points="6 9 12 15 18 9"></polyline>
	                        </svg> Información del Usuario
	                    </div>
	                    <div class="mt-5">
	                    	<div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
	                            <div class="form-label xl:w-64 xl:!mr-10">
	                                <div class="text-left">
	                                    <div class="flex items-center">
	                                        <div class="font-medium">Documento de Identidad</div>
	                                        <div class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md"> Requerido </div>
	                                    </div>
	                                    <div class="leading-relaxed text-slate-500 text-xs mt-3">
	                                    	Indique el
	                                    	<span class="font-medium text-slate-600 dark:text-slate-300">Tipo de Documento</span>
	                                    	y
	                                    	<span class="font-medium text-slate-600 dark:text-slate-300">Número de Documento</span>
	                                    	. (máximo 10 caracteres).
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="w-full mt-3 xl:mt-0 flex-1 flex">
	                            	<select class="form-select h-max sm:w-full md:w-1/4" v-model='idType'>
	                            		<option v-for="type in idTypes" :key="type.id" :value="type.id">{{ type.name }}</option>
	                            	</select>
	                            	<div class="sm:w-full md:w-3/4 pl-4">
	                            		<input type="text" v-model="idDocument" class="form-control mt-2 sm:mt-0" placeholder="Número de Documento" maxlength="10">
	                            		<div class="form-help text-right">Máximo 10 caracteres  {{ idDocument.length }}/10</div>
	                            	</div>
	                            </div>
                                <!-- <div class="alert alert-outline-warning alert-dismissible bg-warning/20 dark:bg-darkmode-400 dark:border-darkmode-400 mt-5 show" role="alert" style="display: block;">
                                    <div class="flex items-center">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-6 h-6 mr-3">
                                                <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"></path>
                                                <line x1="12" y1="9" x2="12" y2="13"></line>
                                                <line x1="12" y1="17" x2="12.01" y2="17"></line>
                                            </svg>
                                        </span>
                                        <span class="text-slate-800 dark:text-slate-500">
                                        	Pay close attention to the weight of the product so that there is no difference in data with the shipping courier.
                                        	<a class="text-primary font-medium" href="">Learn More</a>
                                        </span>
                                        <button type="button" class="btn-close dark:text-white" aria-label="Close">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide w-4 h-4">
                                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                                <line x1="6" y1="6" x2="18" y2="18"></line>
                                            </svg>
                                        </button>
                                    </div>
                                </div> -->
	                        </div>
	                    	<div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
	                            <div class="form-label xl:w-64 xl:!mr-10">
	                                <div class="text-left">
	                                    <div class="flex items-center">
	                                        <div class="font-medium ml-1">Nombres</div>
	                                        <div class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md"> Requerido </div>
	                                    </div>
	                                    <div class="leading-relaxed text-slate-500 text-xs mt-3">
	                                    	Nombres del Usuario <br>
	                                    	(máximo 40 caracteres).
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="w-full mt-3 xl:mt-0 flex-1">
	                                <input type="text" class="form-control" placeholder="Nombres del Usuario" maxlength="40" v-model="name">
	                                <div class="form-help text-right">Máximo 40 caracteres  {{ name.length }}/40</div>
	                            </div>
	                        </div>
	                        <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
	                            <div class="form-label xl:w-64 xl:!mr-10">
	                                <div class="text-left">
	                                    <div class="flex items-center">
	                                        <div class="font-medium ml-1">Apellidos</div>
	                                        <div class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md"> Requerido </div>
	                                    </div>
	                                    <div class="leading-relaxed text-slate-500 text-xs mt-3">
	                                    	Apellidos del Usuario <br>
	                                    	(máximo 40 caracteres).
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="w-full mt-3 xl:mt-0 flex-1">
	                                <input type="text" class="form-control" placeholder="Apellidos del Usuario" maxlength="40" v-model="surname">
	                                <div class="form-help text-right">Máximo 40 caracteres  {{ surname.length }}/40</div>
	                            </div>
	                        </div>
	                        <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
	                            <div class="form-label xl:w-64 xl:!mr-10">
	                                <div class="text-left">
	                                    <div class="flex items-center">
	                                        <div class="font-medium ml-1">Número de Teléfono</div>
	                                        <div class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md"> Requerido </div>
	                                    </div>
	                                    <div class="leading-relaxed text-slate-500 text-xs mt-3">
	                                    	Indique el
	                                    	<span class="font-medium text-slate-600 dark:text-slate-300">Número de Télefono</span>
	                                    	que este asociado a una cuenta de Whatsapp donde pueda recibir nuestras notificaciones.<br>(máximo 10 caracteres).
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="w-full mt-3 xl:mt-0 flex-1 flex">
	                            	<select class="form-select h-max sm:w-full md:w-1/4" v-model='idType'>
	                            		<option v-for="item in phoneOperators" :key="item.id" :value="item.id">
	                            			{{ item.code }} - {{ item.name }}
	                            		</option>
	                            	</select>
	                            	<div class="sm:w-full md:w-3/4 pl-4">
	                            		<input type="text" v-model="phoneNumber" class="form-control mt-2 sm:mt-0" placeholder="Número de Teléfono" maxlength="10">
	                            		<div class="form-help text-right">Máximo 10 caracteres  {{ phoneNumber.length }}/10</div>
	                            	</div>
	                            </div>
	                        </div>
	                        <div class="form-inline items-start flex-col xl:flex-row mt-5 pt-5 first:mt-0 first:pt-0">
	                            <div class="form-label xl:w-64 xl:!mr-10">
	                                <div class="text-left">
	                                    <div class="flex items-center">
	                                        <div class="font-medium ml-1">Correo Electrónico</div>
	                                        <div class="ml-2 px-2 py-0.5 bg-slate-200 text-slate-600 dark:bg-darkmode-300 dark:text-slate-400 text-xs rounded-md"> Requerido </div>
	                                    </div>
	                                    <div class="leading-relaxed text-slate-500 text-xs mt-3">
	                                    	Direccion de correo Electrónico donde el usuario pueda recibir los reportes asociados a sus cuentas prepagadas
	                                    	(máximo 40 caracteres).
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="w-full mt-3 xl:mt-0 flex-1">
	                                <input type="text" class="form-control" placeholder="Correo Electrónico" maxlength="40" v-model="email">
	                                <div class="form-help text-right">Máximo 40 caracteres  {{ email.length }}/40</div>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <div class="flex justify-end flex-col md:flex-row gap-2 mt-5">
	                <button type="button" class="btn py-3 border-slate-300 dark:border-darkmode-400 text-slate-500 w-full md:w-52">
	                	<span class="ml-1">Cancelar</span>
	                </button>
	                <button @click="goToVehicle()" type="button" class="btn py-3 border-slate-300 dark:border-darkmode-400 text-slate-500 w-full md:w-52">
	                	<span class="ml-1">Guardar &amp; Registrar Vehículo </span>
	                </button>
	                <button type="button" class="btn py-3 btn-primary w-full md:w-52">
	                	<span class="ml-1">Guardar</span>
	                </button>
	            </div>
	        </div>
	    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				idType: 1,
				idDocument: '',
				name: '',
				surname: '',
				phoneNumber: '',
				email: '',
			}
		},
		methods: {
			goToVehicle() {
				const vm = this
                setTimeout(function(){
                    vm.$router.push('/vehiculos/nuevo')
                }, 1000)
			}
		},
		computed:{
			idTypes() {
				return [
					{
						id: 1,
						name: 'V - Venezolano'
					},
					{
						id: 2,
						name: 'E - Extranjero'
					},
					{
						id: 3,
						name: 'J - Jurídico'
					},
				]
			},
			phoneOperators() {
				return [
					{
						id: 1,
						code: '0416',
						name: 'Movilnet'
					},
					{
						id: 2,
						code: '0426',
						name: 'Movilnet'
					},
					{
						id: 3,
						code: '0414',
						name: 'Movistar'
					},
					{
						id: 4,
						code: '0424',
						name: 'Movistar'
					},
					{
						id: 5,
						code: '0412',
						name: 'Digitel'
					},
				]
			}

		}
	}
</script>
