@extends('dashboard.layouts.app')

@section('title', 'Ajustes')

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

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

  @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

  <!-- Tabs -->
  <div x-data="{ activeTab: 'personal' }" class="mb-6">
    <div class="border-b border-gray-200 dark:border-gray-700">
      <nav class="-mb-px flex space-x-8">
        <button
          @click="activeTab = 'personal'"
          :class="activeTab === 'personal' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
          class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
        >
          <i data-lucide="user" class="w-4 h-4 inline mr-2"></i>
          Configuración Personal
        </button>
        
        @if($empresas && $empresas->count() > 0)
        <button
          @click="activeTab = 'empresas'"
          :class="activeTab === 'empresas' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
          class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
        >
          <i data-lucide="building" class="w-4 h-4 inline mr-2"></i>
          Configuración de Empresas
        </button>
        @endif
        
        <button
          @click="activeTab = 'global'"
          :class="activeTab === 'global' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
          class="whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
        >
          <i data-lucide="globe" class="w-4 h-4 inline mr-2"></i>
          Configuración Global
        </button>
      </nav>
    </div>

    <!-- Tab Content -->
    <div class="mt-6">
      <!-- Configuración Personal -->
      <div x-show="activeTab === 'personal'" x-transition>
        <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">
              Información Personal
            </h3>
            <p class="text-gray-500 dark:text-gray-400 mt-1">
              Actualiza tu información personal y preferencias
            </p>
          </div>
          
          <form action="{{ route('dashboard.ajustes.personal.update') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <!-- Nombre Completo -->
              <div>
                <label for="nombre" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                  Nombre Completo <span class="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  id="nombre"
                  name="nombre"
                  value="{{ auth()->user()->name }}"
                  placeholder="Ingrese su nombre completo"
                  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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800"
                />
              </div>

              <!-- Correo Electrónico -->
              <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                  Correo Electrónico <span class="text-red-500">*</span>
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value="{{ auth()->user()->email }}"
                  placeholder="ejemplo@correo.com"
                  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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:border-gray-700 dark:focus:border-brand-800"
                />
              </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 Cambios
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Configuración de Empresas -->
      @if($empresas && $empresas->count() > 0)
      <div x-show="activeTab === 'empresas'" x-transition>
        <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 Empresas
            </h3>
            <p class="text-gray-500 dark:text-gray-400 mt-1">
              Seleccione una empresa para configurar sus ajustes específicos
            </p>
          </div>
          
          <div class="space-y-6">
            <div>
              <label for="empresaSelector" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Seleccionar Empresa
              </label>
              <div class="relative">
                <select
                  id="empresaSelector"
                  class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  onchange="if(this.value) window.location.href = '{{ route('dashboard.ajustes.empresa', ':empresa') }}'.replace(':empresa', this.value)"
                >
                  <option value="">Seleccione una empresa</option>
                  @foreach($empresas as $empresa)
                    <option value="{{ $empresa->public_id }}">{{ $empresa->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>

            <div class="text-center py-12 text-gray-500 dark:text-gray-400">
              <i data-lucide="building" class="w-16 h-16 mx-auto mb-4 opacity-50"></i>
              <p class="text-lg font-medium mb-2">Seleccione una empresa</p>
              <p class="text-sm">Para configurar sus ajustes específicos</p>
            </div>
          </div>
        </div>
      </div>
      @endif

      <!-- Configuración Global -->
      <div x-show="activeTab === 'global'" x-transition>
        <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 Global
            </h3>
            <p class="text-gray-500 dark:text-gray-400 mt-1">
              Configuración global del sistema
            </p>
          </div>
          
          <div class="text-center py-12 text-gray-500 dark:text-gray-400">
            <i data-lucide="globe" class="w-16 h-16 mx-auto mb-4 opacity-50"></i>
            <p class="text-lg font-medium mb-2">Configuración Global</p>
            <p class="text-sm mb-4">Esta sección estará disponible próximamente</p>
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-lg dark:bg-blue-900/20 dark:text-blue-300">
              <i data-lucide="info" class="w-4 h-4"></i>
              <span class="text-sm">En desarrollo</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection