<div>

    <form wire:submit.prevent='save'>
        <div class="grid grid-cols-6 gap-2">
            <div class="col-span-6 sm:col-span-6">
                <label class="font-bold text-gray-500">DATOS EMPRESA / CONDUCTOR</label>
            </div>
            <div class="col-span-6 sm:col-span-3">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Propietario
                </label>
                <input wire:model='property_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('property_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-3">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Conductor
                </label>
                <input wire:model='driver_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('driver_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-3">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    RUC
                </label>
                <input wire:model='ruc_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('ruc_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-3">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    DNI
                </label>
                <input wire:model='dni_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('dni_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Teléfono Propietario
                </label>
                <input wire:model='phone_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('phone_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Celular Propietario
                </label>
                <input wire:model='celp_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('celp_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Celular Conductor
                </label>
                <input wire:model='celd_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('celd_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-6">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Dirección
                </label>
                <input wire:model='address_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('address_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-6">
                <label class="font-bold text-gray-500">DATOS DEL VEHICULO</label>
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Placa
                </label>
                <input wire:model='plate_calculate' type="text" autocomplete="off"
                    class="uppercase bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('plate_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    N° Motor
                </label>
                <input wire:model='engine_calculate' type="text" autocomplete="off"
                    class="uppercase bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('engine_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    N° Chasis
                </label>
                <input wire:model='chassis_calculate' type="text" autocomplete="off"
                    class="uppercase bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('chassis_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Marca
                </label>
                <input wire:model='brand_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('brand_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Modelo
                </label>
                <input wire:model='model_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('model_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Año
                </label>
                <input wire:model='year_car_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('year_car_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Color
                </label>
                <input wire:model='color_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('color_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-2">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Recorrido KM
                </label>
                <input wire:model='km_calculate' type="text" autocomplete="off"
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                @error('km_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-6">
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                    Observación
                </label>
                <textarea wire:model='observation_calculate'
                    class="capitalize bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 focus:outline-none dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    cols="30" rows="3" maxlength="100"></textarea>

                @error('observation_calculate')
                <span class="error">{{ $message }}</span>
                @enderror
            </div>
            <div class="col-span-6 sm:col-span-6">
                <button type="submit"
                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                    AGREGAR</button>
            </div>
        </div>
    </form>

</div>
