@extends('dashboard.layouts.app')

@section('title', 'Vehículos Abonados')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Vehículos Abonados`}" 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 class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
        </ol>
      </nav>
    </div>
  </div>
  <!-- Breadcrumb End -->

  <!-- Mensajes de confirmación -->
  @if(session('success'))
    <div class="mb-6 rounded-lg border border-success-200 bg-success-50 p-4 dark:border-success-800 dark:bg-success-900/30">
      <div class="flex items-center gap-2">
        <i data-lucide="check-circle" class="w-5 h-5 text-success-600 dark:text-success-400"></i>
        <p class="text-sm font-medium text-success-800 dark:text-success-200">{{ session('success') }}</p>
      </div>
    </div>
  @endif

  @if(session('error'))
    <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-center gap-2">
        <i data-lucide="alert-circle" class="w-5 h-5 text-error-600 dark:text-error-400"></i>
        <p class="text-sm font-medium text-error-800 dark:text-error-200">{{ session('error') }}</p>
      </div>
    </div>
  @endif

  <!-- Estadísticas -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
    <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="flex items-center">
        <div class="flex-shrink-0">
          <i data-lucide="truck" class="h-8 w-8 text-blue-500"></i>
        </div>
        <div class="ml-4">
          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total</p>
          <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $estadisticas['total'] }}</p>
        </div>
      </div>
    </div>

    <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="flex items-center">
        <div class="flex-shrink-0">
          <i data-lucide="check-circle" class="h-8 w-8 text-green-500"></i>
        </div>
        <div class="ml-4">
          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Activos</p>
          <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $estadisticas['activos'] }}</p>
        </div>
      </div>
    </div>

    <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="flex items-center">
        <div class="flex-shrink-0">
          <i data-lucide="alert-triangle" class="h-8 w-8 text-yellow-500"></i>
        </div>
        <div class="ml-4">
          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Vencen Pronto</p>
          <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $estadisticas['vence_pronto'] }}</p>
        </div>
      </div>
    </div>

    <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="flex items-center">
        <div class="flex-shrink-0">
          <i data-lucide="x-circle" class="h-8 w-8 text-red-500"></i>
        </div>
        <div class="ml-4">
          <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Vencidos</p>
          <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $estadisticas['vencidos'] }}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="border-gray-100 dark:border-gray-800">
    <!-- Filtros -->
    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 mb-6 dark:border-gray-800 dark:bg-white/[0.03]">
      <form method="GET" action="{{ route('dashboard.vehiculos-abonados.index') }}" class="grid grid-cols-1 md:grid-cols-5 gap-4">
        <div>
          <label for="cochera_id" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Cochera</label>
          <div class="relative">
            <select name="cochera_id" id="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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800">
              <option value="">Todas las cocheras</option>
              @foreach($cocheras as $cochera)
                  <option value="{{ $cochera->id }}" {{ $filtros['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>
        </div>

        <div>
          <label for="estado" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Estado</label>
          <div class="relative">
            <select name="estado" id="estado" 
                    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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800">
              <option value="">Todos los estados</option>
              <option value="activo" {{ $filtros['estado'] == 'activo' ? 'selected' : '' }}>Activo</option>
              <option value="inactivo" {{ $filtros['estado'] == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
              <option value="vencido" {{ $filtros['estado'] == 'vencido' ? 'selected' : '' }}>Vencido</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>
        </div>

        <div>
          <label for="tipo_abono" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Tipo de Abono</label>
          <div class="relative">
            <select name="tipo_abono" id="tipo_abono" 
                    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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800">
              <option value="">Todos los tipos</option>
              <option value="mensual" {{ $filtros['tipo_abono'] == 'mensual' ? 'selected' : '' }}>Mensual</option>
              <option value="quincenal" {{ $filtros['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>
        </div>

        <div>
          <label for="busqueda" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Buscar</label>
          <input type="text" name="busqueda" id="busqueda" value="{{ $filtros['busqueda'] }}" 
                 placeholder="Placa, conductor, cliente..." 
                 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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800">
        </div>

        <div class="flex items-end">
          <button type="submit" class="h-11 w-full bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <i data-lucide="search" class="h-4 w-4 inline mr-2"></i>
            Filtrar
          </button>
        </div>
      </form>
    </div>

    <!-- ====== Table Start ====== -->
    <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      
      <div class="flex flex-col gap-4 px-6 py-4 sm:flex-row sm:items-center sm:justify-between border-b border-gray-200 dark:border-gray-800">
        <div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
            Vehículos Abonados ({{ $vehiculosAbonados->total() }})
          </h3>
        </div>

        <div class="flex items-center gap-3">
          <a href="{{ route('dashboard.vehiculos-abonados.create') }}" 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="plus"></i>
            Nuevo Vehículo
          </a>
        </div>
      </div>

      @if($vehiculosAbonados->count() > 0)
        <div class="max-w-full overflow-x-auto custom-scrollbar dark:border-gray-800">
          <table class="w-full min-w-[900px]">
            <!-- table header start -->
            <thead>
              <tr class="border-b border-gray-100 dark:border-gray-800">
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Vehículo
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Cliente
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Conductor
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Abono
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Estado
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Vencimiento
                    </p>
                  </div>
                </th>
                <th class="px-5 py-3 sm:px-6">
                  <div class="flex items-center justify-end">
                    <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                      Acciones
                    </p>
                  </div>
                </th>
              </tr>
            </thead>
            <!-- table header end -->

            <!-- table body start -->
            <tbody>
              @foreach($vehiculosAbonados as $vehiculo)
                <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-white/[0.03]">
                  <td class="px-5 py-3 sm:px-6">
                    <div>
                      <div class="text-sm font-medium text-gray-900 dark:text-white">
                        {{ $vehiculo->placa_camion }}
                        @if($vehiculo->placa_carreta)
                            <span class="text-gray-500">+ {{ $vehiculo->placa_carreta }}</span>
                        @endif
                      </div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">
                        {{ $vehiculo->marca_camion }} {{ $vehiculo->modelo_camion }}
                      </div>
                      <div class="text-xs text-gray-400 dark:text-gray-500">
                        {{ $vehiculo->cochera->nombre }}
                      </div>
                    </div>
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    <div class="text-sm text-gray-900 dark:text-white">
                      {{ $vehiculo->cliente ? $vehiculo->cliente->razon_social : 'Sin cliente' }}
                    </div>
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    <div class="text-sm text-gray-900 dark:text-white">
                      {{ $vehiculo->conductor_nombre ?: 'Sin conductor' }}
                    </div>
                    @if($vehiculo->conductor_dni)
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            DNI: {{ $vehiculo->conductor_dni }}
                        </div>
                    @endif
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                      {{ $vehiculo->getMontoFormateado() }}
                    </div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                      {{ $vehiculo->getTipoAbonoFormateado() }}
                    </div>
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    @switch($vehiculo->estado)
                        @case('activo')
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                <i data-lucide="check-circle" class="h-3 w-3 mr-1"></i>
                                Activo
                            </span>
                            @break
                        @case('inactivo')
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
                                <i data-lucide="pause-circle" class="h-3 w-3 mr-1"></i>
                                Inactivo
                            </span>
                            @break
                        @case('vencido')
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                                <i data-lucide="x-circle" class="h-3 w-3 mr-1"></i>
                                Vencido
                            </span>
                            @break
                    @endswitch
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    <div class="text-sm text-gray-900 dark:text-white">
                      {{ $vehiculo->fecha_vencimiento->format('d/m/Y') }}
                    </div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                      @if($vehiculo->estaVigente())
                          <span class="text-green-600">Vigente</span>
                      @elseif($vehiculo->estaVencido())
                          <span class="text-red-600">Vencido hace {{ $vehiculo->fecha_vencimiento->diffInDays(now()) }} días</span>
                      @elseif($vehiculo->vencePronto())
                          <span class="text-yellow-600">Vence en {{ $vehiculo->getDiasRestantes() }} días</span>
                      @endif
                    </div>
                  </td>
                  <td class="px-5 py-3 sm:px-6">
                    <div class="flex items-center justify-end space-x-2">
                      <a href="{{ route('dashboard.vehiculos-abonados.show', $vehiculo->public_id) }}" 
                         class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700" 
                         title="Ver detalles">
                        <i data-lucide="eye" class="w-4 h-4"></i>
                      </a>
                      <a href="{{ route('dashboard.vehiculos-abonados.edit', $vehiculo->public_id) }}" 
                         class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700" 
                         title="Editar">
                        <i data-lucide="edit" class="w-4 h-4"></i>
                      </a>
                      <form method="POST" action="{{ route('dashboard.vehiculos-abonados.destroy', $vehiculo->public_id) }}" 
                            class="inline" 
                            onsubmit="return confirm('¿Estás seguro de que quieres eliminar este vehículo abonado?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-error-300 bg-white text-error-700 hover:bg-error-50 dark:border-error-600 dark:bg-gray-800 dark:text-error-400 dark:hover:bg-error-900/20" 
                                title="Eliminar">
                          <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              @endforeach
            </tbody>
            <!-- table body end -->
          </table>
        </div>

        <!-- Paginación -->
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
          {{ $vehiculosAbonados->appends($filtros)->links() }}
        </div>
      @else
        <div class="px-6 py-12 text-center">
          <i data-lucide="truck" class="mx-auto h-12 w-12 text-gray-400"></i>
          <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No hay vehículos abonados</h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Comienza registrando tu primer vehículo abonado.
          </p>
          <div class="mt-6">
            <a href="{{ route('dashboard.vehiculos-abonados.create') }}" 
               class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm 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">
              <i data-lucide="plus" class="h-4 w-4 mr-2"></i>
              Nuevo Vehículo
            </a>
          </div>
        </div>
      @endif
    </div>
    <!-- ====== Table End ====== -->
  </div>
</div>
@endsection