@extends('dashboard.layouts.app')

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

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Detalles de 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 -->

  <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="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 class="flex items-center gap-3">
          <div class="w-12 h-12 overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
            <i data-lucide="dollar-sign" class="w-6 h-6 text-gray-600 dark:text-gray-400"></i>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
              {{ $tarifa->nombre_tarifa }}
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">
              Cochera: {{ $tarifa->cochera->nombre }}
            </p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <a href="{{ route('dashboard.cochera-tarifas.edit', $tarifa->public_id) }}" 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="edit" class="h-4 w-4"></i>
            Editar
          </a>
          <form action="{{ route('dashboard.cochera-tarifas.toggle-status', $tarifa->public_id) }}" method="POST" class="inline">
            @csrf
            @method('PATCH')
            <button type="submit" 
                    onclick="return confirm('¿Está seguro de {{ $tarifa->activo ? 'desactivar' : 'activar' }} esta tarifa?')"
                    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="{{ $tarifa->activo ? 'pause' : 'play' }}" class="h-4 w-4"></i>
              {{ $tarifa->activo ? 'Desactivar' : 'Activar' }}
            </button>
          </form>
        </div>
      </div>

      <div class="p-6">
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
          <!-- Estado -->
          <div>
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Estado</h4>
            @if($tarifa->activo)
              @if($tarifa->estaVigente())
                <span class="inline-flex items-center rounded-full bg-success-100 px-2 py-1 text-sm font-medium text-success-800 dark:bg-success-900/30 dark:text-success-400">
                  <i data-lucide="check-circle" class="w-4 h-4 mr-1"></i>
                  Vigente
                </span>
              @else
                <span class="inline-flex items-center rounded-full bg-warning-100 px-2 py-1 text-sm font-medium text-warning-800 dark:bg-warning-900/30 dark:text-warning-400">
                  <i data-lucide="clock" class="w-4 h-4 mr-1"></i>
                  {{ $tarifa->fecha_inicio > now() ? 'Futura' : 'Vencida' }}
                </span>
              @endif
            @else
              <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                <i data-lucide="x-circle" class="w-4 h-4 mr-1"></i>
                Inactiva
              </span>
            @endif
          </div>

          <!-- Cochera -->
          <div>
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Cochera</h4>
            <div>
              <p class="text-gray-800 dark:text-white/90">{{ $tarifa->cochera->nombre }}</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">{{ $tarifa->cochera->codigo }}</p>
            </div>
          </div>

          <!-- Tarifa por Día -->
          <div>
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Tarifa por Día</h4>
            <p class="text-2xl font-bold text-gray-800 dark:text-white/90">S/ {{ number_format($tarifa->tarifa_por_dia, 2) }}</p>
          </div>

          <!-- Tarifa por Hora -->
          <div>
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Tarifa por Hora</h4>
            <p class="text-2xl font-bold text-gray-800 dark:text-white/90">S/ {{ number_format($tarifa->tarifa_por_hora, 2) }}</p>
          </div>

          <!-- Fecha de Inicio -->
          <div>
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Inicio</h4>
            <p class="text-gray-800 dark:text-white/90">{{ $tarifa->fecha_inicio->format('d/m/Y') }}</p>
          </div>

          <!-- Fecha de Fin -->
          <div>
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Fin</h4>
            @if($tarifa->fecha_fin)
              <p class="text-gray-800 dark:text-white/90">{{ $tarifa->fecha_fin->format('d/m/Y') }}</p>
            @else
              <p class="text-gray-500 dark:text-gray-400">Sin fecha de fin (válida indefinidamente)</p>
            @endif
          </div>

          <!-- Descripción -->
          <div class="sm:col-span-2">
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Descripción</h4>
            @if($tarifa->descripcion)
              <p class="text-gray-800 dark:text-white/90">{{ $tarifa->descripcion }}</p>
            @else
              <p class="text-gray-500 dark:text-gray-400">Sin descripción</p>
            @endif
          </div>

          <!-- Información Adicional -->
          <div class="sm:col-span-2">
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Información Adicional</h4>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Creado:</p>
                <p class="text-gray-800 dark:text-white/90">{{ $tarifa->created_at->format('d/m/Y H:i') }}</p>
              </div>
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Última actualización:</p>
                <p class="text-gray-800 dark:text-white/90">{{ $tarifa->updated_at->format('d/m/Y H:i') }}</p>
              </div>
            </div>
          </div>

          <!-- Ejemplo de Cálculo -->
          <div class="sm:col-span-2">
            <h4 class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Ejemplo de Cálculo</h4>
            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
              <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
                <div>
                  <p class="text-sm text-gray-500 dark:text-gray-400">1 día:</p>
                  <p class="font-medium text-gray-800 dark:text-white/90">S/ {{ number_format($tarifa->tarifa_por_dia, 2) }}</p>
                </div>
                <div>
                  <p class="text-sm text-gray-500 dark:text-gray-400">1 hora:</p>
                  <p class="font-medium text-gray-800 dark:text-white/90">S/ {{ number_format($tarifa->tarifa_por_hora, 2) }}</p>
                </div>
                <div>
                  <p class="text-sm text-gray-500 dark:text-gray-400">24 horas:</p>
                  <p class="font-medium text-gray-800 dark:text-white/90">S/ {{ number_format($tarifa->tarifa_por_hora * 24, 2) }}</p>
                </div>
              </div>
            </div>
          </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="arrow-left" class="h-4 w-4"></i>
            Volver
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection