@extends('dashboard.layouts.app')

@section('title', 'Importar Certificado Digital')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Importar Certificado Digital`}">
    <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">
          Importar Certificado Digital
        </h3>
        <p class="text-gray-500 dark:text-gray-400 mt-1">
          Completa la información para importar un nuevo certificado digital
        </p>
      </div>

      <!-- Selector de Empresa -->
      <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 flex-col md:flex-row md:items-center md:justify-between gap-4">
          <div>
            <h4 class="text-md font-semibold text-gray-800 dark:text-white/90 mb-2">Empresa Seleccionada</h4>
            <p class="text-gray-500 dark:text-gray-400">{{ $empresa->nombre }} ({{ $empresa->ruc }})</p>
          </div>
          <div class="flex items-center gap-4">
            <form method="GET" action="{{ route('dashboard.certificados.create') }}" 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>

      <form method="POST" action="{{ route('dashboard.certificados.store') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf
        <input type="hidden" name="empresa_id" value="{{ $empresa->public_id }}">
        
        <!-- Información del Certificado -->
        <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 del Certificado
            </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
              </label>
              <input type="text" 
                     id="nombre_certificado" 
                     name="nombre_certificado" 
                     value="{{ old('nombre_certificado') }}"
                     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
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Si no especifica un nombre, se generará automáticamente
              </p>
            </div>

            <!-- Archivo del Certificado -->
            <div>
              <label for="archivo_certificado" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Archivo del Certificado <span class="text-error-500">*</span>
              </label>
              <input type="file" 
                     id="archivo_certificado" 
                     name="archivo_certificado" 
                     accept=".p12,.pfx"
                     required
                     class="w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 @error('archivo_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">
              @error('archivo_certificado')
                <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 archivos .p12 o .pfx (máximo 2MB)
              </p>
            </div>

            <!-- Contraseña del Certificado -->
            <div>
              <label for="password_certificado" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Contraseña del Certificado <span class="text-error-500">*</span>
              </label>
              <input type="password" 
                     id="password_certificado" 
                     name="password_certificado" 
                     required
                     autocomplete="new-password"
                     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('password_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="Ingrese la contraseña del certificado">
              @error('password_certificado')
                <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">
                La contraseña proporcionada por SUNAT al generar el certificado
              </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 Importante
            </h4>
            
            <!-- 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">Requisitos del Certificado</h4>
                  <ul class="text-sm text-warning-700 dark:text-warning-300 space-y-1">
                    <li>• El certificado debe pertenecer a la empresa: <strong>{{ $empresa->nombre }} ({{ $empresa->ruc }})</strong></li>
                    <li>• El certificado no debe estar vencido</li>
                    <li>• Los datos sensibles se almacenan encriptados en la base de datos</li>
                    <li>• Solo se puede tener un certificado activo por empresa</li>
                    <li>• El sistema validará automáticamente la validez del certificado</li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- Pasos para obtener certificado -->
            <div>
              <h5 class="font-medium text-gray-800 dark:text-white/90 mb-3">¿Cómo obtener un certificado digital?</h5>
              <div class="space-y-3">
                <div class="flex items-start gap-3">
                  <div class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 flex-shrink-0">
                    <span class="text-sm font-bold text-brand-600 dark:text-brand-400">1</span>
                  </div>
                  <div>
                    <h6 class="font-medium text-gray-800 dark:text-white/90 text-sm">Solicitar en SUNAT</h6>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Solicite su certificado digital en el portal de SUNAT</p>
                  </div>
                </div>
                <div class="flex items-start gap-3">
                  <div class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 flex-shrink-0">
                    <span class="text-sm font-bold text-brand-600 dark:text-brand-400">2</span>
                  </div>
                  <div>
                    <h6 class="font-medium text-gray-800 dark:text-white/90 text-sm">Descargar archivo</h6>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Descargue el archivo .p12 o .pfx con su contraseña</p>
                  </div>
                </div>
                <div class="flex items-start gap-3">
                  <div class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 dark:bg-brand-900/30 flex-shrink-0">
                    <span class="text-sm font-bold text-brand-600 dark:text-brand-400">3</span>
                  </div>
                  <div>
                    <h6 class="font-medium text-gray-800 dark:text-white/90 text-sm">Importar aquí</h6>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Use el formulario de arriba para importar su certificado</p>
                  </div>
                </div>
              </div>
            </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.index', ['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">
            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="upload"></i>
            Importar Certificado
          </button>
        </div>
      </form>
    </div>
    <!-- ====== Form End ====== -->
  </div>
</div>
@endsection