@extends('dashboard.layouts.app')

@section('title', 'Gestión de Certificados Digitales')

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

  <!-- Selector de Empresa -->
  <div class="mb-6 overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90 mb-2">Seleccionar Empresa</h3>
        <p class="text-gray-500 dark:text-gray-400">Selecciona la empresa para gestionar sus certificados</p>
      </div>
      <div class="flex items-center gap-4">
                <form method="GET" action="{{ route('dashboard.certificados.index') }}" class="flex items-center gap-2">
          <div class="relative">
            <select name="empresa_id" 
                    onchange="this.form.submit()"
                    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">
              @foreach($empresas as $emp)
                <option value="{{ $emp->public_id }}" {{ $emp->public_id == $empresa->public_id ? 'selected' : '' }}>
                  {{ $emp->nombre }} ({{ $emp->ruc }})
                </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>
        </form>
      </div>
    </div>
  </div>

  <div class="border-gray-100 dark:border-gray-800">
    <!-- ====== 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">
            Certificados de {{ $empresa->nombre }} ({{ $certificados->count() }})
          </h3>
        </div>

        <div class="flex items-center gap-3">
          <a href="{{ route('dashboard.certificados.create', ['empresa_id' => $empresa->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="plus"></i>
            Importar Certificado
          </a>
        </div>
      </div>

      <div class="max-w-full overflow-x-auto custom-scrollbar dark:border-gray-800">
        <table class="w-full min-w-[1102px]">
          <!-- 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">
                    Certificado
                  </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">
                    Empresa
                  </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">
                    Fecha Vencimiento
                  </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">
                    Días Restantes
                  </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">
                    Acciones
                  </p>
                </div>
              </th>
            </tr>
          </thead>
          <!-- table header end -->
          <!-- table body start -->
          <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
            @forelse($certificados as $certificado)
            <tr>
              <td class="px-5 py-4 sm:px-6">
                <div class="flex items-center">
                  <div class="flex items-center gap-3">
                    <div class="w-10 h-10 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                      <i data-lucide="file-text" class="w-5 h-5 text-gray-600 dark:text-gray-400"></i>
                    </div>
                    <div>
                      <span class="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
                        {{ $certificado->nombre_certificado }}
                      </span>
                      <span class="block text-gray-500 text-theme-xs dark:text-gray-400">
                        {{ $certificado->archivo_original }}
                      </span>
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-5 py-4 sm:px-6">
                <div class="flex items-center">
                  <p class="text-gray-500 text-theme-sm dark:text-gray-400">
                    {{ $certificado->empresa->nombre }}
                  </p>
                </div>
              </td>
              <td class="px-5 py-4 sm:px-6">
                <div class="flex items-center">
                  @if($certificado->estado === 'activo')
                    <p class="rounded-full bg-success-50 px-2 py-0.5 text-theme-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500">
                      Activo
                    </p>
                  @elseif($certificado->estado === 'inactivo')
                    <p class="rounded-full bg-warning-50 px-2 py-0.5 text-theme-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-500">
                      Inactivo
                    </p>
                  @elseif($certificado->estado === 'vencido')
                    <p class="rounded-full bg-error-50 px-2 py-0.5 text-theme-xs font-medium text-error-700 dark:bg-error-500/15 dark:text-error-500">
                      Vencido
                    </p>
                  @elseif($certificado->estado === 'reemplazado')
                    <p class="rounded-full bg-gray-50 px-2 py-0.5 text-theme-xs font-medium text-gray-700 dark:bg-gray-500/15 dark:text-gray-500">
                      Reemplazado
                    </p>
                  @endif
                </div>
              </td>
              <td class="px-5 py-4 sm:px-6">
                <div class="flex items-center">
                  <p class="text-gray-500 text-theme-sm dark:text-gray-400">
                    {{ $certificado->fecha_vencimiento->format('d/m/Y') }}
                  </p>
                </div>
              </td>
              <td class="px-5 py-4 sm:px-6">
                <div class="flex items-center">
                  @if($certificado->estaVencido())
                    <p class="text-error-600 dark:text-error-400 text-theme-sm font-medium">
                      Vencido
                    </p>
                  @else
                    <p class="{{ $certificado->proximoAVencer() ? 'text-warning-600 dark:text-warning-400' : 'text-success-600 dark:text-success-400' }} text-theme-sm font-medium">
                      {{ $certificado->diasRestantes() }} días
                    </p>
                  @endif
                </div>
              </td>
              <td class="px-5 py-4 sm:px-6">
                <div class="flex items-center gap-2">
                  <a href="{{ route('dashboard.certificados.show', $certificado->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.certificados.edit', $certificado->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>
                  
                  <a href="{{ route('dashboard.certificados.descargar', $certificado->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="Descargar">
                    <i data-lucide="download" class="w-4 h-4"></i>
                  </a>

                  @if($certificado->estado === 'activo' && $certificado->puedeCambiarAEstado('inactivo'))
                    <form action="{{ route('dashboard.certificados.desactivar', $certificado->public_id) }}" method="POST" class="inline">
                      @csrf
                      @method('PATCH')
                      <button type="submit" 
                              class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-warning-300 bg-white text-warning-700 hover:bg-warning-50 dark:border-warning-600 dark:bg-gray-800 dark:text-warning-400 dark:hover:bg-warning-900/20"
                              onclick="return confirm('¿Está seguro de desactivar este certificado?')">
                        <i data-lucide="power-off" class="w-4 h-4"></i>
                      </button>
                    </form>
                  @elseif($certificado->estado === 'inactivo' && $certificado->puedeCambiarAEstado('activo') && !$certificado->estaVencido())
                    <form action="{{ route('dashboard.certificados.activar', $certificado->public_id) }}" method="POST" class="inline">
                      @csrf
                      @method('PATCH')
                      <button type="submit" 
                              class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-success-300 bg-white text-success-700 hover:bg-success-50 dark:border-success-600 dark:bg-gray-800 dark:text-success-400 dark:hover:bg-success-900/20"
                              onclick="return confirm('¿Está seguro de activar este certificado?')">
                        <i data-lucide="power" class="w-4 h-4"></i>
                      </button>
                    </form>
                  @endif

                  <form action="{{ route('dashboard.certificados.destroy', $certificado->public_id) }}" method="POST" class="inline">
                    @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"
                              onclick="return confirm('¿Está seguro de eliminar este certificado? Esta acción no se puede deshacer.')">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
            @empty
            <tr>
              <td colspan="6" class="px-5 py-8 sm:px-6">
                <div class="text-center">
                  <div class="flex justify-center mb-4">
                    <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                      <i data-lucide="file-x" class="w-8 h-8 text-gray-400"></i>
                    </div>
                  </div>
                  <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
                    No hay certificados
                  </h3>
                  <p class="text-gray-500 dark:text-gray-400 mb-4">
                    Comience importando su primer certificado digital
                  </p>
                  <a href="{{ route('dashboard.certificados.create', ['empresa_id' => $empresa->public_id]) }}" 
                     class="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 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">
                    <i data-lucide="plus"></i>
                    Importar Certificado
                  </a>
                </div>
              </td>
            </tr>
            @endforelse
          </tbody>
          <!-- table body end -->
        </table>
      </div>
    </div>
    <!-- ====== Table End ====== -->
  </div>
</div>
@endsection