@extends('dashboard.layouts.app')

@section('title', 'Crear Nueva Empresa - TailAdmin')

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

  <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">
          Crear Nueva Empresa
        </h3>
        <p class="text-gray-500 dark:text-gray-400 mt-1">
          Completa la información para registrar una nueva empresa
        </p>
      </div>

      <form method="POST" action="{{ route('dashboard.empresas.store') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf
        
        <!-- Información Básica -->
        <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 Básica
            </h4>
            
            <!-- Nombre de la Empresa -->
            <div>
              <label for="nombre" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Nombre de la Empresa *
              </label>
              <input type="text" 
                     id="nombre" 
                     name="nombre" 
                     value="{{ old('nombre') }}"
                     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('nombre') 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 el nombre de la empresa">
              @error('nombre')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- RUC -->
            <div>
              <label for="ruc" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                RUC
              </label>
              <input type="text" 
                     id="ruc" 
                     name="ruc" 
                     value="{{ old('ruc') }}"
                     maxlength="11"
                     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('ruc') 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="12345678901">
              @error('ruc')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Razón Social -->
            <div>
              <label for="razon_social" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Razón Social
              </label>
              <input type="text" 
                     id="razon_social" 
                     name="razon_social" 
                     value="{{ old('razon_social') }}"
                     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('razon_social') 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="Razón social de la empresa">
              @error('razon_social')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Representante Legal -->
            <div>
              <label for="representante_legal" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Representante Legal
              </label>
              <input type="text" 
                     id="representante_legal" 
                     name="representante_legal" 
                     value="{{ old('representante_legal') }}"
                     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('representante_legal') 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="Nombre del representante legal">
              @error('representante_legal')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Logo de la Empresa -->
            <div>
              <label for="logo" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Logo de la Empresa
              </label>
              <input type="file" 
                     id="logo" 
                     name="logo" 
                     accept="image/jpeg,image/png,image/jpg"
                     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('logo') 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">
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Formatos: JPG, PNG. Máximo: 1MB. Se redimensionará automáticamente a 500px máximo.
              </p>
              @error('logo')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </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 Contacto
            </h4>
            
            <!-- Email de Contacto -->
            <div>
              <label for="email_contacto" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Email de Contacto *
              </label>
              <input type="email" 
                     id="email_contacto" 
                     name="email_contacto" 
                     value="{{ old('email_contacto') }}"
                     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('email_contacto') 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="contacto@empresa.com">
              @error('email_contacto')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Teléfono -->
            <div>
              <label for="telefono" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Teléfono
              </label>
              <input type="tel" 
                     id="telefono" 
                     name="telefono" 
                     value="{{ old('telefono') }}"
                     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('telefono') 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="+1 234 567 890">
              @error('telefono')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Sitio Web -->
            <div>
              <label for="sitio_web" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Sitio Web
              </label>
              <input type="url" 
                     id="sitio_web" 
                     name="sitio_web" 
                     value="{{ old('sitio_web') }}"
                     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('sitio_web') 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="https://www.empresa.com">
              @error('sitio_web')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Dirección -->
            <div>
              <label for="direccion" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Dirección
              </label>
              <input type="text" 
                     id="direccion" 
                     name="direccion" 
                     value="{{ old('direccion') }}"
                     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('direccion') 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="Dirección de la empresa">
              @error('direccion')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Ubigeo -->
            <div>
              <label for="ubigeo" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Ubigeo
              </label>
              <input type="text" 
                     id="ubigeo" 
                     name="ubigeo" 
                     value="{{ old('ubigeo') }}"
                     maxlength="6"
                     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('ubigeo') 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="150101">
              @error('ubigeo')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Departamento -->
            <div>
              <label for="departamento" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Departamento
              </label>
              <input type="text" 
                     id="departamento" 
                     name="departamento" 
                     value="{{ old('departamento') }}"
                     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('departamento') 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="Lima">
              @error('departamento')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Provincia -->
            <div>
              <label for="provincia" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Provincia
              </label>
              <input type="text" 
                     id="provincia" 
                     name="provincia" 
                     value="{{ old('provincia') }}"
                     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('provincia') 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="Lima">
              @error('provincia')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Distrito -->
            <div>
              <label for="distrito" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Distrito
              </label>
              <input type="text" 
                     id="distrito" 
                     name="distrito" 
                     value="{{ old('distrito') }}"
                     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('distrito') 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="Miraflores">
              @error('distrito')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>
          </div>
        </div>

        <!-- Informació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">
            Información Adicional
          </h4>
          
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Descripción -->
            <div>
              <label for="descripcion" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Descripción
              </label>
              <textarea id="descripcion" 
                        name="descripcion" 
                        rows="4"
                        class="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('descripcion') 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="Descripción de la empresa">{{ old('descripcion') }}</textarea>
              @error('descripcion')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>

            <!-- Estado -->
            <div>
              <label for="activa" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">
                Estado
              </label>
              <div class="relative">
                <select id="activa" 
                        name="activa" 
                        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('activa') 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="1" {{ old('activa', '1') == '1' ? 'selected' : '' }}>Activa</option>
                  <option value="0" {{ old('activa') == '0' ? 'selected' : '' }}>Inactiva</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('activa')
                <p class="mt-1 text-sm text-error-500">{{ $message }}</p>
              @enderror
            </div>
          </div>
        </div>

        <!-- Botones de acción -->
        <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="plus" class="w-4 h-4"></i>
            Crear Empresa
          </button>
          <a href="{{ route('dashboard.empresas.index') }}" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
            <i data-lucide="x" class="w-4 h-4"></i>
            Cancelar
          </a>
        </div>
      </form>
    </div>
    <!-- ====== Form End ====== -->
  </div>
</div>
@endsection