@extends('dashboard.layouts.app')

@section('title', 'Crear Serie de Numeración')

@section('content')
<div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
  <!-- Breadcrumb Start -->
  <div x-data="{ pageName: `Crear Serie de Numeración`}" 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.series.index') }}">
              Series
              <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="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Información de la Serie</h3>
      <p class="text-sm text-gray-500 dark:text-gray-400">Complete los datos para crear una nueva serie de numeración.</p>
    </div>

    <form action="{{ route('dashboard.series.store') }}" method="POST" class="p-6">
      @csrf

      <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <!-- Columna Izquierda -->
        <div class="space-y-6">
          <!-- Empresa -->
          <div>
            <label for="empresa_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Empresa <span class="text-red-500">*</span>
            </label>
            <div class="relative">
              <select name="empresa_id" id="empresa_id" 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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                <option value="">Seleccione una empresa</option>
                @foreach($empresasAcceso as $empresa)
                  <option value="{{ $empresa->id }}" {{ old('empresa_id') == $empresa->id ? 'selected' : '' }}>
                    {{ $empresa->nombre }} ({{ $empresa->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"/></svg>
              </span>
            </div>
            @error('empresa_id')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>

          <!-- Serie -->
          <div>
            <label for="serie" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Serie <span class="text-red-500">*</span>
            </label>
            <input type="text" name="serie" id="serie" value="{{ old('serie') }}" required maxlength="4" 
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="Ej: F001, B001, N001">
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Máximo 4 caracteres alfanuméricos</p>
            @error('serie')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>

          <!-- Tipo de Comprobante -->
          <div>
            <label for="tipo_comprobante_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Tipo de Comprobante <span class="text-red-500">*</span>
            </label>
            <div class="relative">
              <select name="tipo_comprobante_id" id="tipo_comprobante_id" 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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
                <option value="">Seleccione el tipo</option>
                @foreach($tiposComprobante as $tipo)
                  <option value="{{ $tipo->id }}" {{ old('tipo_comprobante_id') == $tipo->id ? 'selected' : '' }}>
                    {{ $tipo->descripcion }}
                  </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"/></svg>
              </span>
            </div>
            @error('tipo_comprobante_id')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>

          <!-- Descripción -->
          <div>
            <label for="descripcion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Descripción
            </label>
            <input type="text" name="descripcion" id="descripcion" value="{{ old('descripcion') }}" 
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="Descripción opcional de la serie">
            @error('descripcion')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>

          <!-- Correlativo Inicial -->
          <div>
            <label for="correlativo_inicial" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Correlativo Inicial <span class="text-red-500">*</span>
            </label>
            <input type="text" name="correlativo_inicial" id="correlativo_inicial" value="{{ old('correlativo_inicial', '00000001') }}" required maxlength="8" 
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="00000001">
            @error('correlativo_inicial')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>

          <!-- Correlativo Final -->
          <div>
            <label for="correlativo_final" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Correlativo Final
            </label>
            <input type="text" name="correlativo_final" id="correlativo_final" value="{{ old('correlativo_final') }}" maxlength="8" 
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="Dejar vacío para sin límite">
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Opcional. Dejar vacío para series sin límite</p>
            @error('correlativo_final')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>
        </div>

        <!-- Columna Derecha -->
        <div class="space-y-6">
          <!-- Longitud del Correlativo -->
          <div>
            <label for="longitud_correlativo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Longitud del Correlativo <span class="text-red-500">*</span>
            </label>
            <input type="number" name="longitud_correlativo" id="longitud_correlativo" value="{{ old('longitud_correlativo', 8) }}" required min="1" max="8" 
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800">
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Número de dígitos del correlativo (1-8)</p>
            @error('longitud_correlativo')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>

          <!-- Prefijo y Sufijo -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label for="prefijo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Prefijo
              </label>
              <input type="text" name="prefijo" id="prefijo" value="{{ old('prefijo') }}" maxlength="10" 
                     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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                     placeholder="Prefijo opcional">
              @error('prefijo')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
              @enderror
            </div>
            <div>
              <label for="sufijo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Sufijo
              </label>
              <input type="text" name="sufijo" id="sufijo" value="{{ old('sufijo') }}" maxlength="10" 
                     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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                     placeholder="Sufijo opcional">
              @error('sufijo')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Límite de Monto para Boletas -->
          <div>
            <label for="limite_monto_boleta" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Límite de Monto para Boletas
            </label>
            <input type="number" name="limite_monto_boleta" id="limite_monto_boleta" value="{{ old('limite_monto_boleta') }}" step="0.01" 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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="Ej: 700.00">
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Solo aplica para boletas. Dejar vacío para sin límite</p>
            @error('limite_monto_boleta')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>

          <!-- Días de Anulación -->
          <div>
            <label for="dias_anulacion" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              Días Permitidos para Anulación
            </label>
            <input type="number" name="dias_anulacion" id="dias_anulacion" value="{{ old('dias_anulacion', 7) }}" min="0" max="365" 
                   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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                   placeholder="7">
            @error('dias_anulacion')
              <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
          </div>

          <!-- Checkboxes -->
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Rellenar con ceros a la izquierda
              </label>
              <div x-data="{ switcherToggle: {{ old('rellenar_ceros', true) ? 'true' : 'false' }} }">
                <label class="flex cursor-pointer items-center">
                  <div class="relative">
                    <input type="checkbox" name="rellenar_ceros" id="rellenar_ceros" value="1" {{ old('rellenar_ceros', true) ? '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="flex items-center justify-between">
              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Serie activa
              </label>
              <div x-data="{ switcherToggle: {{ old('activa', true) ? 'true' : 'false' }} }">
                <label class="flex cursor-pointer items-center">
                  <div class="relative">
                    <input type="checkbox" name="activa" id="activa" value="1" {{ old('activa', true) ? '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="flex items-center justify-between">
              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                Permitir anulación de comprobantes
              </label>
              <div x-data="{ switcherToggle: {{ old('permitir_anulacion', true) ? 'true' : 'false' }} }">
                <label class="flex cursor-pointer items-center">
                  <div class="relative">
                    <input type="checkbox" name="permitir_anulacion" id="permitir_anulacion" value="1" {{ old('permitir_anulacion', true) ? '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>

      <!-- Observaciones -->
      <div class="mt-6">
        <label for="observaciones" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
          Observaciones
        </label>
        <textarea name="observaciones" id="observaciones" rows="3" 
                  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 border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800"
                  placeholder="Observaciones adicionales sobre la serie">{{ old('observaciones') }}</textarea>
        @error('observaciones')
          <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
        @enderror
      </div>

      <!-- Botones -->
      <div class="mt-8 flex items-center justify-end gap-3">
        <a href="{{ route('dashboard.series.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]">
          Cancelar
        </a>
        <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
          <i data-lucide="save" class="h-4 w-4"></i>
          Crear Serie
        </button>
      </div>
    </form>
  </div>
</div>


@endsection