@extends('dashboard.layouts.app')

@section('title', 'Crear Nuevo Cliente')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Crear Nuevo Cliente`}" class="mb-6">
    <div class="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.clientes.index') }}">
              Clientes
              <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">
    <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 Nuevo Cliente
        </h3>
        <p class="text-gray-500 dark:text-gray-400 mt-1">
          Completa la información para registrar un nuevo cliente
        </p>
      </div>
      <form method="POST" action="{{ route('dashboard.clientes.store') }}" class="space-y-6">
        @csrf
        <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 de Identificación
            </h4>
            
            <!-- Tipo de Documento -->
            <div>
              <label for="tipo_documento" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Tipo de Documento *</label>
              <div class="relative">
                <select id="tipo_documento" name="tipo_documento" required 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('tipo_documento') 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="">Seleccionar tipo</option>
                  <option value="2" {{ old('tipo_documento') == '2' ? 'selected' : '' }}>DNI</option>
                  <option value="4" {{ old('tipo_documento') == '4' ? 'selected' : '' }}>RUC</option>
                  <option value="5" {{ old('tipo_documento') == '5' ? 'selected' : '' }}>Pasaporte</option>
                  <option value="3" {{ old('tipo_documento') == '3' ? 'selected' : '' }}>Carné de Extranjería</option>
                  <option value="1" {{ old('tipo_documento') == '1' ? 'selected' : '' }}>DOC.TRIB.NO.DOM.SIN.RUC</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('tipo_documento')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <!-- Número de Documento -->
            <div>
              <label for="numero_documento" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Número de Documento *</label>
              <input type="text" name="numero_documento" id="numero_documento" value="{{ old('numero_documento') }}" 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('numero_documento') 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 número de documento">
              @error('numero_documento')<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" name="razon_social" id="razon_social" value="{{ old('razon_social') }}" 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('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 del cliente">
              @error('razon_social')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <!-- Nombre Comercial -->
            <div>
              <label for="nombre_comercial" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Nombre Comercial</label>
              <input type="text" name="nombre_comercial" id="nombre_comercial" value="{{ old('nombre_comercial') }}" 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_comercial') 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 comercial (opcional)">
              @error('nombre_comercial')<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 -->
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Email</label>
              <input type="email" name="email" id="email" value="{{ old('email') }}" 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') 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="cliente@email.com">
              @error('email')<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" name="telefono" id="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="+51 999 999 999">
              @error('telefono')<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" name="direccion" id="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 del cliente">
              @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" name="ubigeo" id="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>
          </div>
        </div>

        <!-- Información Comercial -->
        <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 Comercial
          </h4>
          
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Condición de Pago -->
            <div>
              <label for="condicion_pago" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Condición de Pago *</label>
              <div class="relative">
                <select id="condicion_pago" name="condicion_pago" required 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('condicion_pago') 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="CONTADO" {{ old('condicion_pago') == 'CONTADO' ? 'selected' : '' }}>Contado</option>
                  <option value="CREDITO" {{ old('condicion_pago') == 'CREDITO' ? 'selected' : '' }}>Crédito</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('condicion_pago')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <!-- Días de Crédito -->
            <div>
              <label for="dias_credito" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Días de Crédito</label>
              <input type="number" name="dias_credito" id="dias_credito" value="{{ old('dias_credito', 0) }}" min="0" 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('dias_credito') 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="0">
              @error('dias_credito')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>

            <!-- Descuento Porcentaje -->
            <div>
              <label for="descuento_porcentaje" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Descuento (%)</label>
              <input type="number" name="descuento_porcentaje" id="descuento_porcentaje" value="{{ old('descuento_porcentaje', 0) }}" min="0" max="100" step="0.01" 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('descuento_porcentaje') 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="0.00">
              @error('descuento_porcentaje')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
            </div>
          </div>
        </div>

        <!-- Observaciones -->
        <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>
            <label for="observaciones" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300">Observaciones</label>
            <textarea id="observaciones" name="observaciones" 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('observaciones') 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="Observaciones adicionales sobre el cliente">{{ old('observaciones') }}</textarea>
            @error('observaciones')<p class="mt-1 text-sm text-error-500">{{ $message }}</p>@enderror
          </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 Cliente
          </button>
          <a href="{{ route('dashboard.clientes.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>
  </div>
</div>
@endsection