@extends('dashboard.layouts.app')

@section('title', 'Configuración de Empresa')

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

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

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

  <!-- Mensajes de error -->
  @if($errors->any())
    <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 mb-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">Por favor corrija los siguientes errores:</p>
      </div>
      <ul class="list-disc list-inside text-sm text-error-700 dark:text-error-300">
        @foreach($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </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">
          Configuración de Empresa: {{ $empresa->nombre }}
          </h3>
        <p class="text-gray-500 dark:text-gray-400 mt-1">
          Configura los ajustes específicos para esta empresa
          </p>
        </div>

      <!-- Selector de Empresa -->
      <div class="mb-6 p-4 bg-gray-50 rounded-lg dark:bg-gray-800/50">
        <label for="empresaSelector" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
          Cambiar Empresa
        </label>
          <div class="relative">
            <select
              id="empresaSelector"
            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"
            onchange="if(this.value) window.location.href = '{{ route('dashboard.ajustes.empresa', ':empresa') }}'.replace(':empresa', this.value)"
            >
              @foreach($empresas as $emp)
              <option value="{{ $emp->public_id }}" {{ $emp->public_id === $empresa->public_id ? 'selected' : '' }}>
                  {{ $emp->nombre }}
                </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>
        </div>

      <form method="POST" action="{{ route('dashboard.ajustes.empresa.update', $empresa->public_id) }}" class="space-y-6">
        @csrf
        @method('PUT')
        
        <!-- Configuración de Plazos -->
        <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">
              Configuración de Plazos
            </h4>
        
            <!-- Plazo Base de Respuesta -->
            <div>
              <label for="plazo_base_respuesta" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Plazo Base de Respuesta (días) <span class="text-red-500">*</span>
              </label>
              <input type="number" 
                     id="plazo_base_respuesta" 
                     name="plazo_base_respuesta" 
                     value="{{ old('plazo_base_respuesta', $configuracion['plazo_base_respuesta'] ?? 15) }}"
                     min="15"
                     max="30"
                     required
                     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('plazo_base_respuesta') 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="15">
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Según DS 011-2011-PCM, el plazo mínimo es de 15 días
              </p>
              @error('plazo_base_respuesta')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Plazo Máximo de Ampliación -->
            <div>
              <label for="plazo_maximo_ampliacion" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Plazo Máximo de Ampliación (días) <span class="text-red-500">*</span>
              </label>
              <input type="number" 
                     id="plazo_maximo_ampliacion" 
                     name="plazo_maximo_ampliacion" 
                     value="{{ old('plazo_maximo_ampliacion', $configuracion['plazo_maximo_ampliacion'] ?? 5) }}"
                     min="1" 
                     max="10"
                     required
                     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('plazo_maximo_ampliacion') 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="5">
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Máximo 5 días según normativa vigente
              </p>
              @error('plazo_maximo_ampliacion')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Permitir Ampliación de Plazos -->
            <div class="flex items-center justify-between">
              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Permitir ampliación de plazos
              </label>
              <div x-data="{ switcherToggle: {{ old('permite_ampliacion_plazo', $configuracion['permite_ampliacion_plazo'] ?? false) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input
                        type="checkbox"
                      name="permite_ampliacion_plazo"
                        value="1"
                      {{ old('permite_ampliacion_plazo', $configuracion['permite_ampliacion_plazo'] ?? false) ? 'checked' : '' }}
                        class="sr-only"
                      @change="switcherToggle = !switcherToggle"
                      />
                      <div
                        class="block h-6 w-11 rounded-full"
                      :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                      ></div>
                      <div
                        :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                        class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                      ></div>
                    </div>
                  </label>
                </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">
              Configuración de Notificaciones
                </h4>
            
            <!-- Notificaciones Automáticas -->
              <div class="flex items-center justify-between">
              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Notificaciones automáticas
                  </label>
              <div x-data="{ switcherToggle: {{ old('notificaciones_automaticas', $configuracion['notificaciones_automaticas'] ?? false) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input
                        type="checkbox"
                      name="notificaciones_automaticas"
                        value="1"
                      {{ old('notificaciones_automaticas', $configuracion['notificaciones_automaticas'] ?? false) ? 'checked' : '' }}
                        class="sr-only"
                      @change="switcherToggle = !switcherToggle"
                      />
                      <div
                        class="block h-6 w-11 rounded-full"
                      :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                      ></div>
                      <div
                        :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                        class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                      ></div>
                    </div>
                  </label>
              </div>
            </div>

            <!-- Notificar al Cliente -->
            <div class="flex items-center justify-between">
              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Notificar al cliente sobre ampliación
              </label>
              <div x-data="{ switcherToggle: {{ old('notificar_cliente_ampliacion', $configuracion['notificar_cliente_ampliacion'] ?? false) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input
                        type="checkbox"
                      name="notificar_cliente_ampliacion"
                        value="1"
                      {{ old('notificar_cliente_ampliacion', $configuracion['notificar_cliente_ampliacion'] ?? false) ? 'checked' : '' }}
                        class="sr-only"
                      @change="switcherToggle = !switcherToggle"
                      />
                      <div
                        class="block h-6 w-11 rounded-full"
                      :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                      ></div>
                      <div
                        :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                        class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                      ></div>
                    </div>
                  </label>
              </div>
            </div>

            <!-- Plantilla de Email para Ampliación -->
            <div>
              <label for="plantilla_notificacion_ampliacion" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Plantilla de Email para Ampliación
              </label>
              <textarea id="plantilla_notificacion_ampliacion" 
                        name="plantilla_notificacion_ampliacion" 
                        rows="6"
                        class="w-full appearance-none rounded-lg border bg-transparent px-4 py-3 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('plantilla_notificacion_ampliacion') 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="Estimado cliente, le informamos que hemos ampliado el plazo de respuesta a su reclamo...">{{ old('plantilla_notificacion_ampliacion', $configuracion['plantilla_notificacion_ampliacion'] ?? '') }}</textarea>
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Variables disponibles: {cliente}, {reclamo}, {plazo_original}, {plazo_ampliado}, {justificacion}
              </p>
              @error('plantilla_notificacion_ampliacion')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>
        </div>
      </div>

        <!-- Configuración Adicional -->
        <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">
            Configuración Adicional
          </h4>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Requerir Justificación Obligatoria -->
              <div class="flex items-center justify-between">
              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Requerir justificación obligatoria
                  </label>
              <div x-data="{ switcherToggle: {{ old('requerir_justificacion_obligatoria', $configuracion['requerir_justificacion_obligatoria'] ?? false) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input
                        type="checkbox"
                      name="requerir_justificacion_obligatoria"
                        value="1"
                      {{ old('requerir_justificacion_obligatoria', $configuracion['requerir_justificacion_obligatoria'] ?? false) ? 'checked' : '' }}
                        class="sr-only"
                      @change="switcherToggle = !switcherToggle"
                      />
                      <div
                        class="block h-6 w-11 rounded-full"
                      :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                      ></div>
                      <div
                        :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                        class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                      ></div>
                    </div>
                  </label>
              </div>
            </div>

            <!-- Validación Estricta de Plazos -->
            <div class="flex items-center justify-between">
              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Validación estricta de plazos
              </label>
              <div x-data="{ switcherToggle: {{ old('validacion_estricta_plazos', $configuracion['validacion_estricta_plazos'] ?? false) ? 'true' : 'false' }} }">
                  <label class="flex cursor-pointer items-center">
                    <div class="relative">
                      <input
                        type="checkbox"
                      name="validacion_estricta_plazos"
                        value="1"
                      {{ old('validacion_estricta_plazos', $configuracion['validacion_estricta_plazos'] ?? false) ? 'checked' : '' }}
                        class="sr-only"
                      @change="switcherToggle = !switcherToggle"
                      />
                      <div
                        class="block h-6 w-11 rounded-full"
                      :class="switcherToggle ? 'bg-blue-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-white/10'"
                      ></div>
                      <div
                        :class="switcherToggle ? 'translate-x-full': 'translate-x-0'"
                        class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear"
                      ></div>
                    </div>
                  </label>
              </div>
                </div>
              </div>
            </div>

        <div class="flex items-center gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
          <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-3 focus:ring-blue-500/10 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-200">
            <i data-lucide="save" class="w-4 h-4"></i>
            Guardar Configuración
              </button>
          <a href="{{ route('dashboard.ajustes.index') }}" 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 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 transition duration-200">
            <i data-lucide="x" class="w-4 h-4"></i>
            Cancelar
          </a>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection