@extends('dashboard.layouts.app')

@section('title', 'Editar Tarifa de Cochera')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Editar Tarifa de Cochera`}" 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.cochera-tarifas.index') }}">
              Gestión de Tarifas
              <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 -->

  <!-- Mensajes de error -->
  @if($errors->any())
    <div class="mb-6 rounded-lg border border-error-200 bg-error-50 p-4 dark:border-error-800 dark:bg-error-900/30">
      <div class="flex items-start gap-3">
        <i data-lucide="alert-circle" class="w-5 h-5 text-error-600 dark:text-error-400 mt-0.5"></i>
        <div>
          <p class="font-medium text-error-800 dark:text-error-200 mb-2">Se encontraron los siguientes errores:</p>
          <ul class="list-disc list-inside text-sm text-error-600 dark:text-error-400">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
  @endif

  <div class="border-gray-100 dark:border-gray-800">
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-800">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
          Información de la Tarifa
        </h3>
      </div>

      <div class="p-6">
        <form action="{{ route('dashboard.cochera-tarifas.update', $tarifa->public_id) }}" method="POST">
          @csrf
          @method('PUT')

          <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
            <!-- Cochera -->
            <div>
              <label for="cochera_id" class="mb-2 block text-sm font-medium text-gray-800 dark:text-white/90">
                Cochera <span class="text-error-500">*</span>
              </label>
              <div class="relative">
                <select id="cochera_id" 
                        name="cochera_id" 
                        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"
                        required>
                  <option value="">Seleccione una cochera</option>
                  @foreach($cocheras as $cochera)
                    <option value="{{ $cochera->id }}" {{ old('cochera_id', $tarifa->cochera_id) == $cochera->id ? 'selected' : '' }}>
                      {{ $cochera->nombre }} ({{ $cochera->codigo }})
                    </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-red-600 dark:text-red-400">{{ $message }}</p>
              @enderror
            </div>

            <!-- Nombre de la Tarifa -->
            <div>
              <label for="nombre_tarifa" class="mb-2 block text-sm font-medium text-gray-800 dark:text-white/90">
                Nombre de la Tarifa <span class="text-error-500">*</span>
              </label>
              <input type="text" 
                     id="nombre_tarifa" 
                     name="nombre_tarifa" 
                     value="{{ old('nombre_tarifa', $tarifa->nombre_tarifa) }}"
                     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('nombre_tarifa') 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="Ej: Tarifa estándar, Tarifa nocturna"
                     required>
              @error('nombre_tarifa')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Tarifa por Día -->
            <div>
              <label for="tarifa_por_dia" class="mb-2 block text-sm font-medium text-gray-800 dark:text-white/90">
                Tarifa por Día (S/) <span class="text-error-500">*</span>
              </label>
              <input type="number" 
                     id="tarifa_por_dia" 
                     name="tarifa_por_dia" 
                     value="{{ old('tarifa_por_dia', $tarifa->tarifa_por_dia) }}"
                     step="0.01"
                     min="0"
                     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('tarifa_por_dia') 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"
                     required>
              @error('tarifa_por_dia')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Tarifa por Hora -->
            <div>
              <label for="tarifa_por_hora" class="mb-2 block text-sm font-medium text-gray-800 dark:text-white/90">
                Tarifa por Hora (S/) <span class="text-error-500">*</span>
              </label>
              <input type="number" 
                     id="tarifa_por_hora" 
                     name="tarifa_por_hora" 
                     value="{{ old('tarifa_por_hora', $tarifa->tarifa_por_hora) }}"
                     step="0.01"
                     min="0"
                     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('tarifa_por_hora') 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"
                     required>
              @error('tarifa_por_hora')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Fecha de Inicio -->
            <div>
              <label for="fecha_inicio" class="mb-2 block text-sm font-medium text-gray-800 dark:text-white/90">
                Fecha de Inicio <span class="text-error-500">*</span>
              </label>
              <input type="date" 
                     id="fecha_inicio" 
                     name="fecha_inicio" 
                     value="{{ old('fecha_inicio', $tarifa->fecha_inicio->format('Y-m-d')) }}"
                     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"
                     required>
              @error('fecha_inicio')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Fecha de Fin -->
            <div>
              <label for="fecha_fin" class="mb-2 block text-sm font-medium text-gray-800 dark:text-white/90">
                Fecha de Fin
              </label>
              <input type="date" 
                     id="fecha_fin" 
                     name="fecha_fin" 
                     value="{{ old('fecha_fin', $tarifa->fecha_fin ? $tarifa->fecha_fin->format('Y-m-d') : '') }}"
                     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_fin') 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="Dejar vacío para tarifa sin fecha de fin">
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Opcional. Si no se especifica, la tarifa será válida indefinidamente.
              </p>
              @error('fecha_fin')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Descripción -->
            <div class="sm:col-span-2">
              <label for="descripcion" class="mb-2 block text-sm font-medium text-gray-800 dark:text-white/90">
                Descripción
              </label>
              <textarea id="descripcion" 
                        name="descripcion" 
                        rows="3"
                        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('descripcion') 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="Descripción adicional de la tarifa (opcional)">{{ old('descripcion', $tarifa->descripcion) }}</textarea>
              @error('descripcion')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <div class="mt-6 flex items-center justify-end gap-3">
            <a href="{{ route('dashboard.cochera-tarifas.index') }}" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
              <i data-lucide="x" class="h-4 w-4"></i>
              Cancelar
            </a>
            <button type="submit" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 font-medium text-white hover:bg-primary-600">
              <i data-lucide="save" class="h-4 w-4"></i>
              Guardar Cambios
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection