@extends('layouts.app')
@section('content')
  @if ($errors->any())
    <div class="alert alert-danger mb-4">
      <div class="d-flex align-items-center">
        <i class="ti tabler-alert-triangle me-2"></i>
        <strong class="me-1">Revisa los campos:</strong>
      </div>
      <ul class="mt-2 mb-0 ps-3">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <form action="{{ route('quotes.store') }}" method="POST">
    @csrf

    <!-- Paso/Progreso visual -->
    <div class="quote-steps mb-4">
      <span class="step active">Cliente</span>
      <span class="sep"></span>
      <span class="step">Productos</span>
      <span class="sep"></span>
      <span class="step">Evento</span>
      <span class="sep"></span>
      <span class="step">Entrega</span>
      <span class="sep"></span>
      <span class="step">Totales</span>
    </div>

    <div class="row g-4">
      <!-- Columna principal -->
      <div class="col-lg-8">
        {{-- ====== CARD: Cliente ====== --}}
        <div class="card mb-4">
          <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="mb-0"><i class="ti tabler-user me-2"></i>Cliente</h5>
            <span id="mode-badge" class="badge bg-label-primary">Modo: Buscar cliente</span>
          </div>
          <div class="card-body">
            {{-- Toggle Buscar / Crear --}}
            <div class="btn-group w-100 mb-3" role="group" aria-label="Modo de cliente">
              <input type="radio" class="btn-check" name="client_mode" id="mode-existing" checked>
              <label class="btn btn-outline-primary" for="mode-existing">
                <i class="ti tabler-user-check me-1"></i> Buscar cliente
              </label>
              <input type="radio" class="btn-check" name="client_mode" id="mode-new">
              <label class="btn btn-outline-primary" for="mode-new">
                <i class="ti tabler-user-plus me-1"></i> Crear cliente nuevo
              </label>
            </div>

            {{-- Buscar existente --}}
            <div id="customer_search_block" class="mb-3">
              <label class="form-label" for="customer_selector">Escribe 3 letras para buscar</label>
              <select
                id="customer_selector"
                class="form-select select2"
                style="width:100%"
                data-allow-clear="true"
                data-placeholder="Escribe 3 letras (nombre, correo o teléfono)…"
                data-search-url="{{ route('customers.search') }}"
                title="Busca un cliente existente por nombre, correo o teléfono">
                <option value="">Escribe 3 letras (nombre, correo o teléfono)…</option>
              </select>
              <small class="text-muted d-block mt-1">
                ¿No lo encuentras? Cambia a <strong>Crear cliente nuevo</strong>.
              </small>
            </div>

            {{-- Seleccionado (resumen + editar inline) --}}
            <div id="selected_customer_card" class="card border shadow-none d-none">
              <div class="card-body py-2">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <div class="fw-semibold" id="sc_name">—</div>
                    <div class="small text-muted" id="sc_meta">—</div>
                  </div>
                  <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-change-customer">Cambiar</button>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="btn-edit-customer">Editar datos</button>
                  </div>
                </div>

                <div id="edit_customer_block" class="mt-3 d-none">
                  <div class="row g-3">
                    <div class="col-md-6">
                      <label class="form-label" for="edit_first_name">Nombre(s)</label>
                      <input type="text" id="edit_first_name" name="edit_first_name" class="form-control" placeholder="Ej. Juan Carlos" />
                    </div>
                    <div class="col-md-6">
                      <label class="form-label" for="edit_last_name">Apellidos</label>
                      <input type="text" id="edit_last_name" name="edit_last_name" class="form-control" placeholder="Ej. Pérez López" />
                    </div>
                    <div class="col-md-4">
                      <label class="form-label" for="edit_whatsapp">WhatsApp</label>
                      <input type="text" id="edit_whatsapp" name="edit_whatsapp" maxlength="10" pattern="\d{10}" inputmode="numeric" class="form-control" placeholder="10 dígitos, solo números" />
                    </div>
                    <div class="col-md-4">
                      <label class="form-label" for="edit_phone">Teléfono</label>
                      <input type="text" id="edit_phone" name="edit_phone" maxlength="10" pattern="\d{10}" inputmode="numeric" class="form-control" placeholder="10 dígitos, solo números" />
                    </div>
                    <div class="col-md-4">
                      <label class="form-label" for="edit_email">Correo</label>
                      <input type="email" id="edit_email" name="edit_email" class="form-control" placeholder="nombre@dominio.com" />
                    </div>
                  </div>

                  <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" value="1" id="apply_customer_updates" name="apply_customer_updates">
                    <label class="form-check-label" for="apply_customer_updates">
                      Guardar estos cambios en la ficha del cliente
                    </label>
                  </div>
                  <small class="text-muted d-block mt-1">Si no marcas esta casilla, los cambios no se guardan en la base de clientes (solo para esta cotización).</small>
                </div>
              </div>
            </div>

            {{-- Campos ocultos --}}
            <input type="hidden" name="customer_id" id="customer_id">
            <input type="hidden" name="create_customer_if_new" id="create_customer_if_new" value="0">

            {{-- Form cliente nuevo --}}
            <div id="new_customer_form" class="row g-3 d-none mt-1">
              <div class="col-md-6 col-lg-3">
                <label class="form-label" for="customer_whatsapp">WhatsApp</label>
                <input type="text" id="customer_whatsapp" name="customer_whatsapp" class="form-control" pattern="\d{10,15}" maxlength="15" inputmode="numeric" placeholder="10 dígitos" />
              </div>
              <div class="col-md-12 col-lg-6">
                <label class="form-label" for="customer_email">Correo Electrónico</label>
                <input type="email" id="customer_email" name="customer_email" class="form-control" placeholder="nombre@dominio.com" />
              </div>
               <div class="col-md-6 col-lg-3">
                <label class="form-label" for="phone">Teléfono <span class="text-muted">(Opcional)</span></label>
                <input type="text" id="phone" name="phone" class="form-control" pattern="\d{10,15}" maxlength="15" inputmode="numeric" placeholder="10 dígitos" />
              </div>
              <div class="col-md-6">
                <label class="form-label" for="customer_first_name">Nombre(s) <span class="required-asterisk">*</span></label>
                <input type="text" id="customer_first_name" name="customer_first_name" class="form-control" placeholder="Ej. Juan Carlos" data-required-new="1" />
              </div>
              <div class="col-md-6">
                <label class="form-label" for="customer_last_name">Apellidos</label>
                <input type="text" id="customer_last_name" name="customer_last_name" class="form-control" placeholder="Ej. Pérez López" />
              </div>
             
              
            </div>
          </div>
        </div>

        {{-- ====== CARD: Productos y servicios ====== --}}
        <div class="card mb-4 js-lockable">
          <div class="card-header">
            <h5 class="mb-0"><i class="ti tabler-shopping-cart me-2"></i>Productos y Servicios</h5>
          </div>
          <div class="card-body">
            <div id="vuexy-items-container">
              <div class="item">
                <div class="row g-3 align-items-end">
                  <div class="col-md-5">
                    <label class="form-label">Producto / Servicio <span class="required-asterisk">*</span></label>
                    <select name="inventory_id[]" class="form-select" required title="Selecciona el producto o servicio">
                      <option value="">Selecciona un producto o servicio…</option>
                      @foreach ($products as $product)
                        <option value="{{ $product->id }}"
                                data-price="{{ number_format($product->cost, 2, '.', '') }}"
                                data-allow-decimal="{{ $product->allow_decimal_qty ? 1 : 0 }}">
                          {{ $product->name }} — ${{ number_format($product->cost, 2) }}
                        </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-6 col-md-2">
                    <label class="form-label">Cantidad <span class="required-asterisk">*</span></label>
                    <input type="number" name="quantity[]" class="form-control" value="1" min="1" required placeholder="Ej. 1"/>
                  </div>
                  <div class="col-6 col-md-2">
                      <label class="form-label">
                        P. Unitario 
                        <span class="text-muted" style="font-size: 11px;">(editable)</span>
                      </label>
                      <input 
                        type="number"
                        step="0.01"
                        name="unit_price[]"
                        class="form-control js-unit-price"
                        placeholder="Se calcula automáticamente"
                      />
                  </div>

                  <div class="col-6 col-md-2">
                    <label class="form-label">Importe</label>
                    <input type="text" name="total_price[]" class="form-control" readonly placeholder="Se calcula automáticamente"/>
                  </div>
                  <div class="col-6 col-md-1 d-grid">
                    <button type="button" class="btn btn-label-danger remove-item">
                      <i class="ti tabler-x"></i>
                    </button>
                  </div>
                </div>
                <hr class="my-3">
              </div>
            </div>

            <div class="text-end">
              <button type="button" id="add-item" class="btn btn-primary">
                <i class="ti tabler-plus"></i> Agregar
              </button>
            </div>
          </div>
        </div>

        {{-- ====== CARD: Evento y prioridad ====== --}}
        <div class="card mb-4 js-lockable">
          <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="mb-0"><i class="ti tabler-calendar-event me-2"></i>Evento</h5>
            <div id="priority-indicator" class="d-flex align-items-center gap-2">
              <span class="small text-muted">Prioridad:</span>
              <span id="priority-circle" class="prio-dot"></span>
              <span id="priority-label" class="fw-medium">Sin definir</span>
            </div>
          </div>
          <div class="card-body">
            <div class="row g-3">
              <div class="col-md-4">
                <label class="form-label" for="customer_source">¿Cómo nos encontró? <span class="required-asterisk">*</span></label>
                <select id="customer_source" name="customer_source" class="select2 form-select" data-allow-clear="true" required data-placeholder="¿Cómo nos encontró?">
                  <option value="">¿Cómo nos encontró?</option>
                  <option value="Facebook">Facebook</option>
                  <option value="Instagram">Instagram</option>
                  <option value="WhatsApp">WhatsApp</option>
                  <option value="Otro">Otro</option>
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label" for="dynamic_info">Dinámica <span class="required-asterisk">*</span></label>  
                <input type="text" id="dynamic_info" name="dynamic_info" class="form-control" placeholder="Boda, Bautizo, etc." required />
              </div>
              <div class="col-md-4">
                <label class="form-label" for="event_date">Fecha del evento</label>
                <input
                  type="date"
                  id="event_date"
                  name="event_date"
                  class="form-control"
                  placeholder="Selecciona la fecha del evento"
                  min="{{ \Carbon\Carbon::now()->toDateString() }}"
                  value="{{ old('event_date') }}"
                />
                <small class="text-muted">La prioridad se calcula con base en esta fecha.</small>
              </div>
            </div>
          </div>
        </div>

        {{-- ====== CARD: Entrega ====== --}}
        <div class="card mb-4 js-lockable">
          <div class="card-header">
            <h5 class="mb-0"><i class="ti tabler-truck me-2"></i>Entrega</h5>
          </div>
          <div class="card-body">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label" for="delivery_date">Fecha de Entrega</label>
                <input
                type="date"
                id="delivery_date"
                name="delivery_date"
                class="form-control"
                placeholder="Selecciona la fecha de entrega"
                min="{{ \Carbon\Carbon::now()->toDateString() }}"
                value="{{ old('delivery_date') }}"
              />
              </div>
              <div class="col-md-6">
                <label class="form-label" for="delivery_type">Tipo de Entrega <span class="required-asterisk">*</span></label>
                <select id="delivery_type" name="delivery_type" class="select2 form-select" data-allow-clear="true" required data-placeholder="Selecciona el tipo de entrega">
                  <option value="Sucursal">Sucursal (Sin costo)</option>
                  <option value="Punto de Entrega">Punto de Entrega (Con costo)</option>
                </select>
              </div>
            </div>

            {{-- Detalles cortos (sin dirección libre) --}}
            <div class="row g-3 mt-1" id="delivery-details" style="display:none;">
              <div class="col-md-6 d-none"><!-- espacio reservado por si después se necesita --></div>

              <div class="col-md-6">
                <label class="form-label" for="delivery_map_link">
                  Link de Google Maps
                </label>
                <input type="url" name="delivery_map_link" class="form-control" placeholder="Pega aquí el enlace de Google Maps (https://…)"/>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="delivery_cost">
                  Costo de Envío
                </label>
                <input type="number" name="delivery_cost" step="0.01" class="form-control" oninput="updateTotals()" placeholder="Ej. 150.00" />
              </div>
            </div>

            <!-- === Dirección estructurada (visible sólo si es Punto de Entrega) === -->
            <div class="row g-3 mt-1" id="delivery-structured" style="display:none;">
              <div class="col-md-8">
                <label class="form-label">Calle</label>
                <input type="text" name="delivery[street]" class="form-control" placeholder="Ej. Av. Reforma 123">
              </div>
              <div class="col-md-2">
                <label class="form-label">No. ext</label>
                <input type="text" name="delivery[ext_number]" class="form-control" placeholder="Ej. 45">
              </div>
              <div class="col-md-2">
                <label class="form-label">No. int</label>
                <input type="text" name="delivery[int_number]" class="form-control" placeholder="Ej. 2B">
              </div>

              <div class="col-md-4">
                <label class="form-label">Colonia</label>
                <input type="text" name="delivery[neighborhood]" class="form-control" placeholder="Ej. Centro">
              </div>
              <div class="col-md-4">
                <label class="form-label">Localidad</label>
                <input type="text" name="delivery[locality]" class="form-control" placeholder="Ej. San Miguel">
              </div>
              <div class="col-md-4">
                <label class="form-label">Municipio</label>
                <input type="text" name="delivery[municipality]" class="form-control" placeholder="Ej. Puebla">
              </div>

              <div class="col-md-4">
                <label class="form-label">País</label>
                <select name="delivery[country_id]" id="delivery_country_id" class="form-select select2" data-placeholder="Selecciona país…">
                  <option value="">Selecciona país…</option>
                  @foreach(\App\Models\Country::where('is_active',true)->orderBy('name')->get() as $co)
                    <option value="{{ $co->id }}" {{ $co->iso2==='MX' ? 'selected' : '' }}>
                      {{ $co->name }}
                    </option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-4">
                <label class="form-label">Estado</label>
                <select name="delivery[state_id]" id="delivery_state_id" class="form-select select2" data-placeholder="Selecciona estado…">
                  <option value="">Selecciona estado…</option>
                </select>
              </div>
              

              <div class="col-md-4">
                <label class="form-label">C. Postal</label>
                <input type="text" name="delivery[postal_code]" class="form-control js-only-digits" inputmode="numeric" maxlength="5" placeholder="Ej. 72000">
              </div>
            </div>

            {{-- Back-compat: lo seguimos mandando pero oculto (lo llena el JS al enviar) --}}
            <input type="hidden" name="delivery_address" />
          </div>
        </div>

        {{-- ====== CARD: Notas ====== --}}
        <div class="card mb-5">
          <div class="card-header">
            <h5 class="mb-0"><i class="ti tabler-notes me-2"></i>Notas</h5>
          </div>
          <div class="card-body">
            <label class="form-label" for="notes">Notas adicionales</label>
            <textarea id="notes" name="notes" class="form-control" rows="3" placeholder="Aclaraciones, indicaciones, etc."></textarea>
          </div>
        </div>
      </div>

      <!-- Sidebar (Resumen) -->
      <div class="col-lg-4">
        <div class="card sticky-summary js-lockable">
          <div class="card-body">
            <h6 class="text-uppercase text-muted mb-3">Resumen</h6>

            <div class="summary-block">
              <div class="d-flex align-items-center justify-content-between">
                <span class="text-muted">Subtotal</span>
                <strong id="summary-subtotal">$0.00</strong>
              </div>
              <div class="d-flex align-items-center justify-content-between">
                <span class="text-muted">Descuento</span>
                <strong id="summary-discount">$0.00</strong>
              </div>
              <div class="d-flex align-items-center justify-content-between">
                <span class="text-muted">Extra por prioridad</span>
                <strong id="summary-extra">$0.00</strong>
              </div>
              <div class="d-flex align-items-center justify-content-between">
                <span class="text-muted">Envío</span>
                <strong id="summary-shipping">$0.00</strong>
              </div>
              <hr class="my-2">
              <div class="d-flex align-items-center justify-content-between fs-5">
                <span>Total</span>
                <strong id="summary-total">$0.00</strong>
              </div>
            </div>

            {{-- inputs reales (readonly) --}}
            <input type="hidden" id="subtotal" name="subtotal" value="0">
            <input type="number" id="discount" step="0.01" name="discount" class="form-control mt-3"  placeholder="Descuento" />
            <input type="hidden" id="additional_cost" name="additional_cost" value="0">
            <input type="hidden" id="total" name="total" value="0">

            <div class="mt-4 d-grid">
              <button type="submit" class="btn btn-primary btn-lg">
                <i class="ti tabler-device-floppy me-1"></i> Guardar Cotización
              </button>
              <a href="{{ route('quotes.index') }}" class="btn btn-label-secondary mt-2">
                <i class="ti tabler-arrow-left me-1"></i> Volver
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
@endsection

@push('scripts')
  <script src="{{ asset('vuexy-assets/js/pages/customer/geo-selects.js') }}"></script>
  <script src="{{ asset('vuexy-assets/js/pages/quotes/quotes-create.js') }}"></script>
@endpush