@extends('dashboard.layouts.app')

@section('title', 'Nuevo Vehículo Abonado')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Nuevo Vehículo Abonado`}" class="mb-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
      <nav>
        <ol class="flex items-center gap-1.5">
          <li>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.index') }}">
              Dashboard
              <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </li>
          <li>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.vehiculos-abonados.index') }}">
              Vehículos Abonados
              <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          </li>
          <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
        </ol>
      </nav>
    </div>
  </div>
  <!-- Breadcrumb End -->

  <div class="border-gray-100 dark:border-gray-800">
    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="mb-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
          Nuevo Vehículo Abonado
        </h3>
        <p class="text-gray-500 dark:text-gray-400 mt-1">
          Registra un nuevo vehículo con abono mensual o quincenal
        </p>
      </div>
      <form method="POST" action="{{ route('dashboard.vehiculos-abonados.store') }}" class="space-y-6">
        @csrf

        <!-- Información del Vehículo -->
        <div class="space-y-6">
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
            <i data-lucide="truck" class="h-5 w-5 inline mr-2 text-blue-500"></i>
            Información del Vehículo
          </h4>
          
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div>
              <label for="cochera_id" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Cochera <span class="text-red-500">*</span>
              </label>
              <div class="relative">
                <select name="cochera_id" id="cochera_id" required
                        class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('cochera_id') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                  <option value="">Selecciona una cochera</option>
                  @foreach($cocheras as $cochera)
                      <option value="{{ $cochera->id }}" {{ old('cochera_id') == $cochera->id ? 'selected' : '' }}>
                          {{ $cochera->nombre }}
                      </option>
                  @endforeach
                </select>
                <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                  <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </div>
              @error('cochera_id')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="placa_camion" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Placa del Camión <span class="text-red-500">*</span>
              </label>
              <input type="text" name="placa_camion" id="placa_camion" value="{{ old('placa_camion') }}" required
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('placa_camion') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror input-uppercase"
                     placeholder="ABC-123" maxlength="10">
              @error('placa_camion')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="placa_carreta" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Placa de la Carreta
              </label>
              <input type="text" name="placa_carreta" id="placa_carreta" value="{{ old('placa_carreta') }}"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('placa_carreta') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror input-uppercase"
                     placeholder="XYZ-789" maxlength="10">
              @error('placa_carreta')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>
          </div>
        </div>

        <!-- Información del Conductor -->
        <div class="space-y-6">
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
            <i data-lucide="user" class="h-5 w-5 inline mr-2 text-green-500"></i>
            Información del Conductor
          </h4>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div>
              <label for="conductor_nombre" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Nombre del Conductor <span class="text-red-500">*</span>
              </label>
              <input type="text" name="conductor_nombre" id="conductor_nombre" value="{{ old('conductor_nombre') }}" required
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('conductor_nombre') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror input-uppercase"
                     placeholder="JUAN PÉREZ">
              @error('conductor_nombre')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="conductor_telefono" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Teléfono del Conductor <span class="text-red-500">*</span>
              </label>
              <input type="text" name="conductor_telefono" id="conductor_telefono" value="{{ old('conductor_telefono') }}" required
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('conductor_telefono') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                     placeholder="999888777" maxlength="15">
              @error('conductor_telefono')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>
          </div>
        </div>

        <!-- Información del Cliente -->
        <div class="space-y-6" x-data="{ clienteSeleccionado: '{{ old('cliente_id') }}' }">
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
            <i data-lucide="building" class="h-5 w-5 inline mr-2 text-purple-500"></i>
            Información del Cliente
          </h4>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div>
              <label for="cliente_id" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Cliente
              </label>
              <div class="relative">
                <select name="cliente_id" id="cliente_id" x-model="clienteSeleccionado"
                        class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('cliente_id') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                  <option value="">Nuevo cliente</option>
                  @foreach($clientes as $cliente)
                      <option value="{{ $cliente->id }}" {{ old('cliente_id') == $cliente->id ? 'selected' : '' }}>
                          {{ $cliente->razon_social }} - {{ $cliente->numero_documento }}
                      </option>
                  @endforeach
                </select>
                <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                  <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </div>
              @error('cliente_id')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="cliente_razon_social" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Razón Social del Cliente <span class="text-red-500" x-show="!clienteSeleccionado">*</span>
              </label>
              <input type="text" name="cliente_razon_social" id="cliente_razon_social" value="{{ old('cliente_razon_social') }}"
                     x-bind:disabled="clienteSeleccionado !== ''"
                     x-bind:required="clienteSeleccionado === ''"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('cliente_razon_social') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror input-uppercase"
                     x-bind:class="clienteSeleccionado !== '' ? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed' : ''"
                     placeholder="EMPRESA TRANSPORTES S.A.C.">
              @error('cliente_razon_social')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="cliente_tipo_documento" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Tipo de Documento <span class="text-red-500" x-show="!clienteSeleccionado">*</span>
              </label>
              <div class="relative">
                <select name="cliente_tipo_documento" id="cliente_tipo_documento" 
                        x-bind:disabled="clienteSeleccionado !== ''"
                        x-bind:required="clienteSeleccionado === ''"
                        class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('cliente_tipo_documento') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                        x-bind:class="clienteSeleccionado !== '' ? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed' : ''">
                  <option value="">Selecciona el tipo</option>
                  @foreach($tiposDocumento as $tipo)
                      <option value="{{ $tipo->codigo }}" {{ old('cliente_tipo_documento') == $tipo->codigo ? 'selected' : '' }}>
                          {{ $tipo->descripcion }}
                      </option>
                  @endforeach
                </select>
                <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                  <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </div>
              @error('cliente_tipo_documento')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="cliente_numero_documento" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Número de Documento <span class="text-red-500" x-show="!clienteSeleccionado">*</span>
              </label>
              <input type="text" name="cliente_numero_documento" id="cliente_numero_documento" value="{{ old('cliente_numero_documento') }}"
                     x-bind:disabled="clienteSeleccionado !== ''"
                     x-bind:required="clienteSeleccionado === ''"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('cliente_numero_documento') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                     x-bind:class="clienteSeleccionado !== '' ? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed' : ''"
                     placeholder="RUC: 20123456789 o DNI: 12345678">
              @error('cliente_numero_documento')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="cliente_direccion" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Dirección del Cliente
              </label>
              <input type="text" name="cliente_direccion" id="cliente_direccion" value="{{ old('cliente_direccion') }}"
                     x-bind:disabled="clienteSeleccionado !== ''"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('cliente_direccion') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror input-uppercase"
                     x-bind:class="clienteSeleccionado !== '' ? 'bg-gray-100 dark:bg-gray-800 cursor-not-allowed' : ''"
                     placeholder="AV. PRINCIPAL 123, LIMA">
              @error('cliente_direccion')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>
          </div>
        </div>

        <!-- Información del Abono -->
        <div class="space-y-6" x-data="{ calcularFechaVencimiento() { 
            const fechaInicio = document.getElementById('fecha_inicio').value;
            const tipoAbono = document.getElementById('tipo_abono').value;
            
            if (fechaInicio && tipoAbono) {
                const fecha = new Date(fechaInicio);
                if (tipoAbono === 'mensual') {
                    fecha.setMonth(fecha.getMonth() + 1);
                } else if (tipoAbono === 'quincenal') {
                    fecha.setDate(fecha.getDate() + 15);
                }
                document.getElementById('fecha_vencimiento').value = fecha.toISOString().split('T')[0];
            }
        } }">
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
            <i data-lucide="credit-card" class="h-5 w-5 inline mr-2 text-yellow-500"></i>
            Información del Abono
          </h4>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div>
              <label for="tipo_abono" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Tipo de Abono <span class="text-red-500">*</span>
              </label>
              <div class="relative">
                <select name="tipo_abono" id="tipo_abono" required @change="calcularFechaVencimiento()"
                        class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('tipo_abono') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                  <option value="">Selecciona el tipo</option>
                  <option value="mensual" {{ old('tipo_abono') == 'mensual' ? 'selected' : '' }}>Mensual</option>
                  <option value="quincenal" {{ old('tipo_abono') == 'quincenal' ? 'selected' : '' }}>Quincenal</option>
                </select>
                <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                  <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </div>
              @error('tipo_abono')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="monto_abono" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Monto del Abono <span class="text-red-500">*</span>
              </label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500 dark:text-gray-400">
                  S/
                </span>
                <input type="number" name="monto_abono" id="monto_abono" value="{{ old('monto_abono') }}" required step="0.01" min="0"
                       class="h-11 w-full appearance-none rounded-lg border bg-transparent pl-8 pr-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('monto_abono') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                       placeholder="0.00">
              </div>
              @error('monto_abono')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="fecha_inicio" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Fecha de Inicio <span class="text-red-500">*</span>
              </label>
              <input type="date" name="fecha_inicio" id="fecha_inicio" value="{{ old('fecha_inicio', date('Y-m-d')) }}" required @change="calcularFechaVencimiento()"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('fecha_inicio') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
              @error('fecha_inicio')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <div>
              <label for="fecha_vencimiento" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Fecha de Vencimiento <span class="text-red-500">*</span>
              </label>
              <input type="date" name="fecha_vencimiento" id="fecha_vencimiento" value="{{ old('fecha_vencimiento') }}" required readonly
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 bg-gray-50 dark:bg-gray-800 @error('fecha_vencimiento') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
              @error('fecha_vencimiento')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>
          </div>
        </div>

        <!-- Observaciones -->
        <div class="space-y-6">
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
            <i data-lucide="file-text" class="h-5 w-5 inline mr-2 text-gray-500"></i>
            Observaciones
          </h4>
          
          <div>
            <label for="observaciones" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
              Observaciones
            </label>
            <textarea name="observaciones" id="observaciones" rows="4"
                      class="w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('observaciones') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                      placeholder="Información adicional sobre el vehículo, conductor o cliente...">{{ old('observaciones') }}</textarea>
            @error('observaciones')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
          </div>
        </div>

        <!-- Botones -->
        <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200 dark:border-gray-700">
          <a href="{{ route('dashboard.vehiculos-abonados.index') }}" 
             class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            Cancelar
          </a>
          <button type="submit" 
                  class="px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <i data-lucide="save" class="h-4 w-4 inline mr-2"></i>
            Guardar Vehículo
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection