@extends('dashboard.layouts.app')

@section('title', 'Detalles del Certificado')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Detalles del Certificado`}">
    <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>
            <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard.certificados.index') }}">
              Certificados
              <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

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

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

  <div class="border-gray-100 dark:border-gray-800">
    <!-- ====== Details 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">
            Información del Certificado
          </h3>
        </div>
        <div class="flex items-center gap-2">
          @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>
          @endif
        </div>
      </div>
      
      <div class="p-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- Información Básica -->
          <div class="space-y-6">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
              Información Básica
            </h4>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Nombre del Certificado</label>
              <input type="text" 
                     value="{{ $certificado->nombre_certificado }}"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Archivo Original</label>
              <input type="text" 
                     value="{{ $certificado->archivo_original }}"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Empresa</label>
              <input type="text" 
                     value="{{ $certificado->empresa->nombre }} ({{ $certificado->empresa->ruc }})"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>
          </div>

          <!-- Fechas -->
          <div class="space-y-6">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2">
              Fechas
            </h4>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Fecha de Emisión</label>
              <input type="text" 
                     value="{{ $certificado->fecha_emision->format('d/m/Y H:i') }}"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Fecha de Vencimiento</label>
              <input type="text" 
                     value="{{ $certificado->fecha_vencimiento->format('d/m/Y H:i') }}"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Días Restantes</label>
              <input type="text" 
                     value="@if($certificado->estaVencido()) Vencido @else {{ $certificado->diasRestantes() }} días @endif"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm @if($certificado->estaVencido()) text-error-500 @elseif($certificado->proximoAVencer()) text-warning-500 @else text-success-500 @endif dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>
          </div>
        </div>

        <!-- Información Técnica -->
        <div class="mt-8">
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white/90 border-b border-gray-200 dark:border-gray-700 pb-2 mb-4">
            Información Técnica
          </h4>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Tamaño del Archivo</label>
              <input type="text" 
                     value="{{ number_format($certificado->tamaño_archivo / 1024, 2) }} KB"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Tipo de Archivo</label>
              <input type="text" 
                     value="{{ strtoupper(pathinfo($certificado->archivo_original, PATHINFO_EXTENSION)) }}"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Fecha de Importación</label>
              <input type="text" 
                     value="{{ $certificado->created_at->format('d/m/Y H:i') }}"
                     class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:bg-gray-900 dark:text-white/90 border-gray-300 dark:border-gray-700"
                     readonly>
            </div>
          </div>
        </div>

        <!-- Acciones -->
        <div class="mt-8 flex flex-wrap gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
          <a href="{{ route('dashboard.certificados.edit', $certificado->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"></i>
            Editar
          </a>
          
          <a href="{{ route('dashboard.certificados.descargar', $certificado->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="download"></i>
            Descargar
          </a>

          @if($certificado->estado === 'activo')
            <form action="{{ route('dashboard.certificados.desactivar', $certificado->public_id) }}" method="POST" class="inline">
              @csrf
              @method('PATCH')
              <button type="submit" 
                      class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-warning-300 bg-white px-4 py-2 font-medium 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"></i>
                Desactivar
              </button>
            </form>
          @else
            <form action="{{ route('dashboard.certificados.activar', $certificado->public_id) }}" method="POST" class="inline">
              @csrf
              @method('PATCH')
              <button type="submit" 
                      class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-success-300 bg-white px-4 py-2 font-medium 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"></i>
                Activar
              </button>
            </form>
          @endif

          <a href="{{ route('dashboard.certificados.index', ['empresa_id' => $certificado->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="arrow-left"></i>
            Volver
          </a>
        </div>
      </div>
    </div>
    <!-- ====== Details End ====== -->
  </div>
</div>
@endsection