@extends('dashboard.layouts.app')

@section('title', 'Detalles de Serie de Numeración')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Detalles de Serie de Numeración`}" 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.series.index') }}">
              Series
              <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="grid grid-cols-1 gap-6 lg:grid-cols-3">
    <!-- Información Principal -->
    <div class="lg:col-span-2">
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-4">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Información de la Serie</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">Detalles completos de la serie de numeración</p>
            </div>
            <div class="flex items-center gap-2">
              <a href="{{ route('dashboard.series.edit', $serie) }}" class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700">
                <i data-lucide="edit" class="h-4 w-4"></i>
                Editar
              </a>
              <a href="{{ route('dashboard.series.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]">
                Volver
              </a>
            </div>
          </div>
        </div>

        <div class="p-6">
          <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
            <!-- Información Básica -->
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Serie</label>
                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $serie->serie }}</p>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Tipo de Comprobante</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->tipoComprobante->descripcion }}</p>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Empresa</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->empresa->nombre }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">RUC: {{ $serie->empresa->ruc }}</p>
              </div>

              @if($serie->descripcion)
                <div>
                  <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Descripción</label>
                  <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->descripcion }}</p>
                </div>
              @endif
            </div>

            <!-- Numeración -->
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Correlativo Actual</label>
                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $serie->ultimo_correlativo }}</p>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Próximo Correlativo</label>
                <p class="mt-1 text-lg font-semibold text-primary-600 dark:text-primary-400">{{ $serie->proximo_correlativo }}</p>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Rango de Correlativos</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">
                  {{ $serie->correlativo_inicial }} - {{ $serie->correlativo_final ?: 'Sin límite' }}
                </p>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Correlativos Restantes</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->correlativos_restantes }}</p>
              </div>
            </div>
          </div>

          <!-- Configuración de Formato -->
          <div class="mt-6 border-t border-gray-200 dark:border-gray-800 pt-6">
            <h4 class="text-md font-medium text-gray-900 dark:text-white mb-4">Configuración de Formato</h4>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Longitud del Correlativo</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->longitud_correlativo }} dígitos</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Rellenar con Ceros</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->rellenar_ceros ? 'Sí' : 'No' }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Formato Completo</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->numero_completo }}</p>
              </div>
            </div>
          </div>

          <!-- Prefijo y Sufijo -->
          @if($serie->prefijo || $serie->sufijo)
            <div class="mt-6 border-t border-gray-200 dark:border-gray-800 pt-6">
              <h4 class="text-md font-medium text-gray-900 dark:text-white mb-4">Prefijo y Sufijo</h4>
              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                @if($serie->prefijo)
                  <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Prefijo</label>
                    <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->prefijo }}</p>
                  </div>
                @endif
                @if($serie->sufijo)
                  <div>
                    <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Sufijo</label>
                    <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->sufijo }}</p>
                  </div>
                @endif
              </div>
            </div>
          @endif

          <!-- Estado y Autorización -->
          <div class="mt-6 border-t border-gray-200 dark:border-gray-800 pt-6">
            <h4 class="text-md font-medium text-gray-900 dark:text-white mb-4">Estado y Autorización</h4>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Estado</label>
                <div class="mt-1">
                  @if($serie->activa)
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-300">
                      <i data-lucide="check-circle" class="w-3 h-3 mr-1"></i>
                      Activa
                    </span>
                  @else
                    <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/30 dark:text-gray-300">
                      <i data-lucide="x-circle" class="w-3 h-3 mr-1"></i>
                      Inactiva
                    </span>
                  @endif
                </div>
              </div>


            </div>


          </div>

          <!-- Configuración Específica -->
          <div class="mt-6 border-t border-gray-200 dark:border-gray-800 pt-6">
            <h4 class="text-md font-medium text-gray-900 dark:text-white mb-4">Configuración Específica</h4>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
              @if($serie->limite_monto_boleta)
                <div>
                  <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Límite de Monto para Boletas</label>
                  <p class="mt-1 text-sm text-gray-900 dark:text-white">S/ {{ number_format($serie->limite_monto_boleta, 2) }}</p>
                </div>
              @endif
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Permitir Anulación</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->permitir_anulacion ? 'Sí' : 'No' }}</p>
              </div>
              @if($serie->permitir_anulacion)
                <div>
                  <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Días para Anulación</label>
                  <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->dias_anulacion }} días</p>
                </div>
              @endif
            </div>
          </div>

          @if($serie->observaciones)
            <div class="mt-6 border-t border-gray-200 dark:border-gray-800 pt-6">
              <h4 class="text-md font-medium text-gray-900 dark:text-white mb-4">Observaciones</h4>
              <p class="text-sm text-gray-900 dark:text-white">{{ $serie->observaciones }}</p>
            </div>
          @endif
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="space-y-6">
      <!-- Acciones Rápidas -->
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Acciones Rápidas</h3>
        </div>
        <div class="p-6 space-y-3">
          <form action="{{ route('dashboard.series.toggle-status', $serie->public_id) }}" method="POST" class="w-full">
            @csrf
            @method('PATCH')
            <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]">
              <i data-lucide="{{ $serie->activa ? 'pause' : 'play' }}" class="h-4 w-4"></i>
              {{ $serie->activa ? 'Desactivar' : 'Activar' }} Serie
            </button>
          </form>

          <form action="{{ route('dashboard.series.resetear-correlativo', $serie->public_id) }}" method="POST" class="w-full" onsubmit="return confirm('¿Está seguro de que desea resetear el correlativo?')">
            @csrf
            @method('PATCH')
            <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]">
              <i data-lucide="refresh-cw" class="h-4 w-4"></i>
              Resetear Correlativo
            </button>
          </form>

          <form action="{{ route('dashboard.series.destroy', $serie->public_id) }}" method="POST" class="w-full" onsubmit="return confirm('¿Está seguro de que desea eliminar esta serie?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50 dark:border-red-600 dark:bg-white/[0.03] dark:text-red-400 dark:hover:bg-red-900/30">
              <i data-lucide="trash-2" class="h-4 w-4"></i>
              Eliminar Serie
            </button>
          </form>
        </div>
      </div>

      <!-- Información de Auditoría -->
      <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Información de Auditoría</h3>
        </div>
        <div class="p-6 space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Creado por</label>
            <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->creadoPor->name ?? 'Sistema' }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $serie->created_at->format('d/m/Y H:i') }}</p>
          </div>

          @if($serie->actualizadoPor)
            <div>
              <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Última actualización</label>
              <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $serie->actualizadoPor->name }}</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">{{ $serie->updated_at->format('d/m/Y H:i') }}</p>
            </div>
          @endif
        </div>
      </div>

      <!-- Estadísticas -->
      @if(isset($estadisticas))
        <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
          <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Estadísticas</h3>
          </div>
          <div class="p-6 space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Total Emitidos</label>
              <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $estadisticas['total_emitidos'] }}</p>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Aceptados</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $estadisticas['aceptados'] }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Rechazados</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $estadisticas['rechazados'] }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Anulados</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $estadisticas['anulados'] }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-500 dark:text-gray-400">Pendientes</label>
                <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $estadisticas['pendientes'] }}</p>
              </div>
            </div>
          </div>
        </div>
      @endif
    </div>
  </div>
</div>
@endsection