@extends('dashboard.layouts.app')

@section('title', 'Editar Certificado')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Editar 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">
    <!-- ====== Form Start ====== -->
    <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="mb-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
          Editar Certificado
        </h3>
        <p class="text-gray-500 dark:text-gray-400 mt-1">
          Modifica la información del certificado digital
        </p>
      </div>

      <!-- Información del Certificado Actual -->
      <div class="mb-6 overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900/50">
        <div class="flex items-center gap-4">
          <div class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30">
            <i data-lucide="file-text" class="h-6 w-6 text-brand-600 dark:text-brand-400"></i>
          </div>
          <div>
            <h4 class="text-md font-semibold text-gray-800 dark:text-white/90">{{ $certificado->nombre_certificado }}</h4>
            <p class="text-gray-500 dark:text-gray-400">{{ $certificado->empresa->nombre }} ({{ $certificado->empresa->ruc }})</p>
          </div>
          <div class="ml-auto">
            @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>

      <form method="POST" action="{{ route('dashboard.certificados.update', $certificado->public_id) }}" class="space-y-6">
        @csrf
        @method('PUT')
        
        <!-- Información Editable -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <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 Editable
            </h4>
            
            <!-- Nombre del Certificado -->
            <div>
              <label for="nombre_certificado" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Nombre del Certificado <span class="text-error-500">*</span>
              </label>
              <input type="text" 
                     id="nombre_certificado" 
                     name="nombre_certificado" 
                     value="{{ old('nombre_certificado', $certificado->nombre_certificado) }}"
                     required
                     autocomplete="off"
                     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 @error('nombre_certificado') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror"
                     placeholder="Ej: Certificado SUNAT 2024">
              @error('nombre_certificado')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Estado del Certificado -->
            <div>
              <label for="estado" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Estado del Certificado
              </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 @error('estado') border-error-300 shadow-theme-xs focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @else border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800 @enderror">
                  <option value="activo" {{ old('estado', $certificado->estado) === 'activo' ? 'selected' : '' }}>Activo</option>
                  <option value="inactivo" {{ old('estado', $certificado->estado) === 'inactivo' ? 'selected' : '' }}>Inactivo</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>
              @error('estado')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Solo puede haber un certificado activo por empresa
              </p>
            </div>
          </div>

          <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 de Solo Lectura
            </h4>
            
            <!-- Fecha de Emisión -->
            <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 border-gray-300 bg-gray-50 px-4 py-2.5 text-sm text-gray-500 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-400"
                     readonly>
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Esta fecha no se puede modificar
              </p>
            </div>

            <!-- Fecha de Vencimiento -->
            <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 border-gray-300 bg-gray-50 px-4 py-2.5 text-sm text-gray-500 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-400"
                     readonly>
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Esta fecha no se puede modificar
              </p>
            </div>
          </div>
        </div>

        <!-- Información Técnica (Solo lectura) -->
        <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">Archivo Original</label>
              <input type="text" 
                     value="{{ $certificado->archivo_original }}"
                     class="h-11 w-full appearance-none rounded-lg border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm text-gray-500 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-400"
                     readonly>
            </div>
            <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 border-gray-300 bg-gray-50 px-4 py-2.5 text-sm text-gray-500 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-400"
                     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 border-gray-300 bg-gray-50 px-4 py-2.5 text-sm text-gray-500 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-400"
                     readonly>
            </div>
          </div>
        </div>

        <!-- Advertencia -->
        <div class="rounded-lg border border-warning-200 bg-warning-50 p-4 dark:border-warning-800 dark:bg-warning-900/20">
          <div class="flex items-start gap-3">
            <i data-lucide="alert-triangle" class="w-5 h-5 text-warning-600 dark:text-warning-400 mt-0.5"></i>
            <div>
              <h4 class="font-medium text-warning-800 dark:text-warning-200 mb-2">Información Importante</h4>
              <ul class="text-sm text-warning-700 dark:text-warning-300 space-y-1">
                <li>• Solo puede modificar el nombre y estado del certificado</li>
                <li>• Las fechas y datos técnicos no se pueden modificar</li>
                <li>• Si necesita cambiar el archivo, debe importar un nuevo certificado</li>
                <li>• Al activar este certificado, se desactivarán otros certificados de la misma empresa</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Botones -->
        <div class="flex gap-4 justify-end pt-6 border-t border-gray-200 dark:border-gray-700">
          <a href="{{ route('dashboard.certificados.show', $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">
            Cancelar
          </a>
          <button type="submit" 
                  class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-brand-300 bg-brand-500 px-4 py-2 font-medium text-white hover:bg-brand-600 dark:border-brand-600 dark:bg-brand-500 dark:hover:bg-brand-600">
            <i data-lucide="save"></i>
            Guardar Cambios
          </button>
        </div>
      </form>
    </div>
    <!-- ====== Form End ====== -->
  </div>
</div>
@endsection