@extends('adminlte::page')

@section('title', 'Nueva Solicitud de Pago')

@section('content_header')
    <h1>Nueva Solicitud de Pago</h1>
@stop

@section('content')
@if ($errors->any())
  <div class="alert alert-danger">
    <ul class="mb-0">
      @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
@endif
<form id="payment-request-form" action="{{ route('payment-requests.store') }}" method="POST" enctype="multipart/form-data">
@csrf

<div class="row">
    {{-- =================== IZQUIERDA (2/3) =================== --}}
    <div class="col-lg-8">
        <div class="card card-outline">
            <div class="card-header d-flex align-items-center">
                <h3 class="card-title">Informacion del pago</h3>
                <div class="ml-auto">
                    @can('payment_request.view')
                    <a href="{{ route('payment-requests.index') }}" class="btn btn-default btn-sm">
                        <i class="fas fa-arrow-left"></i> Volver
                    </a>
                    @endcan
                </div>
            </div>

            <div class="card-body">
                <div class="row">
                    {{-- Folios --}}
                    <div class="form-group col-md-3">
                      <label>Folio</label>
                      <input
                        type="text"
                        name="request_folio"
                        id="request_folio"
                        class="form-control"
                        value="{{ old('request_folio') }}"
                        readonly
                        placeholder="Se autollenará con el code de la compañía"
                      >
                      <small class="text-muted">Deriva del <code>code</code> de la compañía.</small>
                    </div>

                    <div class="form-group col-md-3">
                        <label>Folio previo</label>
                        <input type="text" name="previous_folio" class="form-control" value="{{ old('previous_folio') }}">
                        @error('previous_folio')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group col-md-3">
                      <label>Solicitante *</label>
                      <select name="requester_user_id" id="requester_user_id" class="form-control" required>
                        <option value="">Seleccione…</option>
                        @foreach($requesters as $u)
                          <option
                            value="{{ $u->id }}"
                            data-email="{{ $u->email }}"
                            {{ old('requester_user_id') == $u->id ? 'selected' : '' }}
                          >
                            {{ $u->name }} @if($u->email) ({{ $u->email }}) @endif
                          </option>
                        @endforeach
                      </select>
                      @error('requester_user_id')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    {{-- Company / Supplier --}}
                    <div class="form-group col-md-3">
                      <label>Compañía *</label>
                      <select name="company_id" id="company_id" class="form-control" required>
                        <option value="">Seleccione…</option>
                        @foreach($companies as $c)
                          <option
                            value="{{ $c->company_id }}"
                            data-rfc="{{ $c->rfc }}" {{-- <-- clave para auto-selección por RFC --}}
                            data-code="{{ $c->code }}" {{-- <-- NUEVO --}}
                            {{ old('company_id') == $c->company_id ? 'selected' : '' }}
                          >
                            {{ $c->name }}
                            {{-- opcional mostrar RFC --}}
                            {{-- ({{ $c->rfc }}) --}}
                          </option>
                        @endforeach
                      </select>
                      @error('company_id')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group col-md-3">
                      <label>Proveedor *</label>
                      <div class="input-group">
                        <select name="supplier_id" id="supplier_id" class="form-control" required>
                          <option value="">Seleccione…</option>
                          @foreach($suppliers as $s)
                            <option
                              value="{{ $s->supplier_id }}"
                              data-rfc="{{ $s->tax_id ?? $s->rfc ?? '' }}"
                              {{ old('supplier_id') == $s->supplier_id ? 'selected' : '' }}
                            >
                              {{ $s->name }}
                              {{-- opcional mostrar RFC: ({{ $s->tax_id ?? $s->rfc }}) --}}
                            </option>
                          @endforeach
                        </select>
                        @can('supplier.create')
                        <div class="input-group-append">
                          <button type="button" class="btn btn-outline-primary" id="btn_open_quick_add" title="Crear proveedor">
                            <i class="fas fa-user-plus"></i>
                          </button>
                        </div>
                        @endcan
                      </div>
                      @error('supplier_id')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>


                    {{-- CFDI y Moneda --}}
                    <div class="form-group col-md-3">
                      <label>Método CFDI</label>
                      <select name="cfdi_payment_method_id" id="cfdi_payment_method_id" class="form-control">
                        <option value="">(No especificado)</option>
                        @foreach($methods as $m)
                          <option
                            value="{{ $m->payment_method_id }}"
                            data-code="{{ $m->code }}" {{-- <-- PUE / PPD --}}
                            {{ old('cfdi_payment_method_id') == $m->payment_method_id ? 'selected' : '' }}
                          >
                            {{ $m->code }} - {{ $m->description }}
                          </option>
                        @endforeach
                      </select>
                      @error('cfdi_payment_method_id')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>

                    <div class="form-group col-md-3">
                      <label>Moneda *</label>
                      <select name="currency_id" id="currency_id" class="form-control" required>
                        @foreach($currencies as $c)
                          <option
                            value="{{ $c->currency_id }}"
                            data-code="{{ $c->code }}" {{-- <-- clave para auto-selección por código --}}
                            {{ old('currency_id') == $c->currency_id ? 'selected' : '' }}
                          >
                            {{ $c->code }}
                          </option>
                        @endforeach
                      </select>
                      @error('currency_id')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>

                    {{-- Factura --}}
                    <div class="form-group col-md-3">
                        <label>No. factura</label>
                        <input type="text" name="invoice_number" class="form-control" value="{{ old('invoice_number') }}">
                        @error('invoice_number')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group col-md-3">
                        <label>UUID</label>
                        <input type="text" name="invoice_uuid" class="form-control" value="{{ old('invoice_uuid') }}">
                        @error('invoice_uuid')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group col-md-3">
                        <label>Fecha factura</label>
                        <input type="date" name="invoice_date" class="form-control" value="{{ old('invoice_date') }}">
                        @error('invoice_date')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group col-md-3">
                        <label>Vencimiento</label>
                        <input type="date" name="due_date" class="form-control" value="{{ old('due_date') }}">
                        @error('due_date')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>

                    {{-- Importe / FX --}}
                    <div class="form-group col-md-3">
                        <label>Importe original *</label>
                        <input type="number" step="0.01" name="amount_original" id="amount_original" class="form-control" value="{{ old('amount_original') }}" required>
                        @error('amount_original')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>

                    <div class="form-group col-md-3">
                        <label>Tipo de cambio</label>
                        <input type="number" step="0.0001" name="exchange_rate" id="exchange_rate" class="form-control" value="{{ old('exchange_rate') }}">
                        @error('exchange_rate')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group col-md-3">
                        <label>Importe MXN</label>
                        <input type="number" step="0.01" name="amount_mxn" id="amount_mxn" class="form-control" value="{{ old('amount_mxn') }}" readonly>
                        @error('amount_mxn')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>

                    {{-- === EFE / Subcategoría / Budget (dependientes) === --}}
                    <div class="form-row">
                      {{-- 1) EFE --}}
                      <div class="form-group col-md-4">
                        <label for="efe_classification_id">Clasificación EFE</label>
                        <select
                          id="efe_classification_id"
                          name="efe_classification_id"
                          class="form-control"
                          data-subcats-url-template="{{ route('ajax.efe.subcategories', ['efe' => '__ID__']) }}"
                        >
                          <option value="">— Selecciona EFE —</option>
                          @foreach($efes as $efe)
                            <option value="{{ $efe->efe_classification_id }}"
                              {{ old('efe_classification_id') == $efe->efe_classification_id ? 'selected' : '' }}>
                              {{ $efe->name }}
                            </option>
                          @endforeach
                        </select>
                        @error('efe_classification_id')<span class="text-danger small">{{ $message }}</span>@enderror
                      </div>

                      {{-- 2) Subcategoría (guarda en campo classification_subcategory_id) --}}
                      <div class="form-group col-md-4">
                        <label for="classification_subcategory_id">Subcategoría</label>
                        <select
                          id="classification_subcategory_id"
                          name="classification_subcategory_id"
                          class="form-control"
                          data-budgets-url-template="{{ route('ajax.subcategory.budget_classes', ['subcategory' => '__ID__']) }}"
                          {{ old('efe_classification_id') ? '' : 'disabled' }}
                        >
                          <option value="">— Selecciona subcategoría —</option>
                          @foreach($subcategories as $sc) {{-- solo si hubo old() precargamos --}}
                            <option value="{{ $sc->subcategory_classification_id }}"
                              {{ old('classification_subcategory_id') == $sc->subcategory_classification_id ? 'selected' : '' }}>
                              {{ $sc->name }}
                            </option>
                          @endforeach
                        </select>
                        @error('classification_subcategory_id')<span class="text-danger small">{{ $message }}</span>@enderror
                      </div>

                      {{-- 3) Budget Class --}}
                      <div class="form-group col-md-4">
                        <label for="budget_class_id">Partida presupuestal</label>
                        <select
                          id="budget_class_id"
                          name="budget_class_id"
                          class="form-control"
                          {{ old('classification_subcategory_id') ? '' : 'disabled' }}
                        >
                          <option value="">— Selecciona budget —</option>
                          @foreach($budgetClasses as $bc) {{-- solo si hubo old() precargamos --}}
                            <option value="{{ $bc->budget_class_id }}"
                              {{ old('budget_class_id') == $bc->budget_class_id ? 'selected' : '' }}>
                              {{ $bc->name }}
                            </option>
                          @endforeach
                        </select>
                        @error('budget_class_id')<span class="text-danger small">{{ $message }}</span>@enderror
                      </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label>Comentarios</label>
                        <textarea name="comments" rows="3" class="form-control">{{ old('comments') }}</textarea>
                        @error('comments')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                </div>
            </div>

            <div class="card-footer sticky-top bg-white">
                @can('payment_request.create')
                <button type="submit" id="btn_save" class="btn btn-success">
                    <i class="fas fa-save"></i> Guardar
                </button>
                @endcan
                <a href="{{ route('payment-requests.index') }}" class="btn btn-default">Cancelar</a>
            </div>
        </div>
    </div>

    {{-- =================== DERECHA (1/3) =================== --}}
    <div class="col-lg-4">
        <div class="card card-outline">
            <div class="card-header">
                <h3 class="card-title">Comprobante/Factura</h3>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label for="invoice_pdf">Archivo PDF (máx 10 MB)</label>
                    <input type="file"
                           name="invoice_pdf"
                           id="invoice_pdf"
                           class="form-control"
                           accept="application/pdf,.pdf">
                    @error('invoice_pdf')<span class="text-danger small d-block mt-1">{{ $message }}</span>@enderror
                    <small id="invoice_pdf_meta" class="text-muted d-block mt-1"></small>
                </div>

                <div id="pdf-container" class="border rounded position-relative" style="height: 520px; overflow: hidden;">
                    <!-- placeholder como overlay absoluto -->
                    <div id="pdf-placeholder"
                        class="d-flex align-items-center justify-content-center text-muted"
                        style="position:absolute; inset:0; z-index:2; pointer-events:none;">
                        <span>Selecciona un PDF para previsualizarlo aquí…</span>
                    </div>

                    <!-- visor (lo llenamos con preview-html?file=<url firmada>) -->
                    <iframe id="pdf-iframe" class="w-100 h-100 d-none" title="Vista previa PDF"></iframe>
                </div>

                <div class="mt-2 d-flex">
                    <button type="button" id="clear_pdf" class="btn btn-sm btn-outline-secondary mr-2" disabled>
                        <i class="fas fa-times"></i> Quitar archivo
                    </button>
                    <a id="open_pdf_tab" href="#" target="_blank" class="btn btn-sm btn-outline-primary d-none">
                        <i class="fas fa-external-link-alt"></i> Abrir en pestaña
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="supplier_rfc_ai"  id="supplier_rfc_ai">
<input type="hidden" name="supplier_name_ai" id="supplier_name_ai">
<input type="hidden" name="supplier_quick_add_confirmed" id="supplier_quick_add_confirmed" value="0">

<div class="modal fade" id="modalQuickSupplier" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h5 class="modal-title">Crear proveedor</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="form-group mb-2">
          <label class="mb-1">RFC (Tax Id)</label>
          <input type="text" id="qa_supplier_rfc" class="form-control" maxlength="13">
          <small class="text-muted">Formato CFDI (12/13 caracteres)</small>
        </div>
        <div class="form-group mb-2">
          <label class="mb-1">Nombre</label>
          <input type="text" id="qa_supplier_name" class="form-control" maxlength="255">
        </div>
        <div class="form-group mb-2">
          <label class="mb-1">País</label>
          <select id="qa_supplier_country" class="form-control">
            <option value="MX" selected>MX — México</option>
            <option value="CO">CO — Colombia</option>
            <option value="CL">CL — Chile</option>
          </select>
        </div>
        <div id="qa_error" class="text-danger small d-none"></div>
      </div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary btn-sm" id="qa_btn_create">
          <i class="fas fa-plus-circle"></i> Crear
        </button>
      </div>
    </div>
  </div>
</div>

</form>
@stop

@push('js')
<script>
(function(){
  const selCompany   = document.getElementById('company_id');
  const inputReqFolio= document.getElementById('request_folio');

  function getSelectedCompanyCode() {
    if (!selCompany) return '';
    const opt = selCompany.options[selCompany.selectedIndex];
    return (opt && (opt.dataset.code || '').trim()) || '';
  }

  function updateRequestFolioFromCompany() {
    if (!inputReqFolio) return;
    const code = getSelectedCompanyCode();
    inputReqFolio.value = code !== '' ? code : 'SOL'; // fallback temporal
  }

  // Exponer por si otro script quisiera forzarlo
  window.syncFolioFromCompany = updateRequestFolioFromCompany;

  document.addEventListener('DOMContentLoaded', updateRequestFolioFromCompany);
  selCompany && selCompany.addEventListener('change', updateRequestFolioFromCompany);

  // Detecta auto-select de la IA (cambio programático del select)
  if (selCompany) {
    let last = selCompany.value;
    setInterval(() => {
      if (selCompany.value !== last) {
        last = selCompany.value;
        updateRequestFolioFromCompany();
      }
    }, 400);
  }
})();
</script>
@endpush


@push('js')
<script>
(function(){
  // ========= Endpoints =========
  const PREVIEW_UPLOAD_URL = "{{ route('payment-requests.preview-pdf', [], false) }}";   // POST -> { url, preview_url }
  const PREVIEW_HTML_URL   = "{{ route('payment-requests.preview-html', [], false) }}";  // GET  -> ?file=<url firmada>
  const EXTRACT_URL        = "{{ route('payment-requests.extract', [], false) }}";       // POST -> JSON IA
  const QUICK_STORE_URL    = "{{ route('suppliers.quick-store', [], false) }}";          // POST -> crear proveedor

  // ========= Refs UI =========
  const input    = document.getElementById('invoice_pdf');
  const holder   = document.getElementById('pdf-placeholder');
  const iframe   = document.getElementById('pdf-iframe') || (function(){
    const box = document.getElementById('pdf-container');
    if (!box) return null;
    const el = document.createElement('iframe');
    el.id = 'pdf-iframe';
    el.title = 'Vista previa PDF';
    el.className = 'w-100 h-100 d-none';
    box.appendChild(el);
    return el;
  })();
  const clearBtn = document.getElementById('clear_pdf');
  const openTab  = document.getElementById('open_pdf_tab');
  const meta     = document.getElementById('invoice_pdf_meta');

  // Quick-Add elements
  const btnOpen = document.getElementById('btn_open_quick_add');
  const modal   = $('#modalQuickSupplier'); // AdminLTE/Bootstrap usa jQuery
  const iRfc    = document.getElementById('qa_supplier_rfc');
  const iName   = document.getElementById('qa_supplier_name');
  const iCountry= document.getElementById('qa_supplier_country');
  const errBox  = document.getElementById('qa_error');
  const btnDo   = document.getElementById('qa_btn_create');
  const selSup  = document.getElementById('supplier_id');
  const hidFlag = document.getElementById('supplier_quick_add_confirmed');

  // Hidden para IA (si los tienes en el form)
  const hidRfcAI  = document.getElementById('supplier_rfc_ai');
  const hidNameAI = document.getElementById('supplier_name_ai');

  let currentSignedUrl = null;
  let onloadTimer = null;

  // ========= Placeholder overlay =========
  if (holder) {
    holder.style.position = 'absolute';
    holder.style.left = holder.style.top = holder.style.right = holder.style.bottom = '0';
    holder.style.zIndex = '2';
    holder.style.pointerEvents = 'none';
    holder.classList.add('d-flex');
  }
  function showPlaceholder(msg){
    if (!holder) return;
    holder.innerHTML = '<span>'+(msg || 'Selecciona un PDF para previsualizarlo aquí…')+'</span>';
    holder.classList.remove('d-none');
    holder.removeAttribute('hidden');
    holder.style.setProperty('display','flex','important');
  }
  function hidePlaceholder(){
    if (!holder) return;
    holder.classList.add('d-none');
    holder.setAttribute('hidden','hidden');
    holder.style.setProperty('display','none','important');
  }

  // ========= Helpers =========
  const RFC_RE = /^[A-Z&Ñ]{3,4}\d{6}[A-Z0-9]{3}$/i;

  function humanSize(bytes){
    if (bytes == null) return '';
    const u = ['B','KB','MB','GB']; let i=0, v=bytes;
    while (v>=1024 && i<u.length-1){ v/=1024; i++; }
    return v.toFixed(i===0?0:1)+' '+u[i];
  }
  function isPdf(file){
    const byType = (file.type || '').toLowerCase().includes('pdf');
    const byName = /\.pdf$/i.test(file.name || '');
    return byType || byName;
  }
  function setIfEmpty(selector, val){
    const el = document.querySelector(selector);
    if (el && val != null && String(el.value).trim() === '') el.value = val;
  }
  function toNumber(val){
    if (val == null) return null;
    const n = parseFloat(String(val).replace(/[^\d.-]/g,''));
    return isNaN(n) ? null : n;
  }
  function selectByData(selectEl, dataAttr, valueUpper, onlyIfEmpty=true){
    if (!selectEl || !valueUpper) return false;
    if (onlyIfEmpty && selectEl.value) return false;
    const opt = [...selectEl.options].find(o => (o.dataset[dataAttr]||'').toUpperCase() === valueUpper);
    if (opt) { opt.selected = true; return true; }
    return false;
  }
  function resetPreview(){
    if (onloadTimer) { clearTimeout(onloadTimer); onloadTimer = null; }
    if (iframe) { iframe.removeAttribute('src'); iframe.classList.add('d-none'); iframe.onload = null; }
    showPlaceholder('Selecciona un PDF para previsualizarlo aquí…');
    clearBtn && (clearBtn.disabled = true);
    openTab  && (openTab.classList.add('d-none'), openTab.setAttribute('href','#'));
    meta     && (meta.textContent = '');
    input    && (input.value = '');
    currentSignedUrl = null;
  }

  async function uploadForPreview(file){
    const token = (document.querySelector('meta[name="csrf-token"]')?.content) || '{{ csrf_token() }}';
    const fd = new FormData(); fd.append('file', file);
    const resp = await fetch(PREVIEW_UPLOAD_URL, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json' },
      body: fd
    });
    if (!resp.ok) throw new Error('No se pudo subir el PDF para previsualización');
    return await resp.json(); // { url, preview_url }
  }
  function setViewerSrc(signedUrl){
    if (!iframe) return;
    const viewerUrl = PREVIEW_HTML_URL + '?file=' + encodeURIComponent(signedUrl);
    hidePlaceholder();
    iframe.classList.remove('d-none');
    iframe.src = viewerUrl;
    iframe.onload = function(){ hidePlaceholder(); };
    onloadTimer = setTimeout(() => hidePlaceholder(), 1200);
  }

  async function extractWithAI(file){
    const token = (document.querySelector('meta[name="csrf-token"]')?.content) || '{{ csrf_token() }}';
    const fd = new FormData(); fd.append('file', file);
    const r = await fetch(EXTRACT_URL, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json' },
      body: fd
    });
    if (!r.ok) {
      let msg = 'Extracción IA falló';
      try {
        const j = await r.json();
        if (j?.error) msg += `: ${j.error}`;
        if (j?.details) console.error('OpenAI details:', j.details);
      } catch {
        const t = await r.text();
        console.error('OpenAI raw error:', t);
      }
      throw new Error(msg);
    }
    return await r.json();
  }

  function applyExtraction(data){
    // Guardar IA en hidden (opcional)
    if (hidRfcAI)  hidRfcAI.value  = (data?.supplier_rfc || '').toUpperCase();
    if (hidNameAI) hidNameAI.value = data?.supplier_name || '';

    // Campos directos
    setIfEmpty('[name="invoice_uuid"]',   data.invoice_uuid || '');
    setIfEmpty('[name="invoice_number"]', data.invoice_number || '');
    setIfEmpty('[name="invoice_date"]',   data.invoice_date || '');

    const total = toNumber(data.total);
    if (total != null) setIfEmpty('#amount_original', total.toFixed(2));

    // Moneda
    const curSel = document.getElementById('currency_id');
    if (curSel && data.currency_code) {
      const ok = selectByData(curSel, 'code', (data.currency_code||'').toUpperCase(), /*onlyIfEmpty=*/false);
      if (ok && data.currency_code.toUpperCase() === 'MXN') {
        const fx = document.getElementById('exchange_rate');
        if (fx && !fx.value) { fx.value = '1'; fx.setAttribute('readonly','readonly'); }
        const amt = toNumber(document.getElementById('amount_original')?.value) || 0;
        const mxn = document.getElementById('amount_mxn');
        if (mxn && !mxn.value) mxn.value = (amt * 1).toFixed(2);
      }
    }

    // Método CFDI
    const mSel = document.getElementById('cfdi_payment_method_id');
    if (mSel && data.cfdi_method) selectByData(mSel, 'code', data.cfdi_method.toUpperCase());

    // RFC → compañía
    const compSel = document.getElementById('company_id');
    if (compSel) selectByData(compSel, 'rfc', (data.receiver_rfc||'').toUpperCase());

    // RFC → proveedor; si no hay match, sugerimos Quick-Add (si el botón existe = tiene permiso)
    const suppRfc = (data.supplier_rfc || '').toUpperCase();
    if (selSup && suppRfc) {
      const matched = [...selSup.options].some(o => (o.dataset.rfc||'').toUpperCase() === suppRfc);
      if (matched) {
        selectByData(selSup, 'rfc', suppRfc, /*onlyIfEmpty=*/false);
      } else if (btnOpen) {
        suggestQuickAddSupplier(suppRfc, data.supplier_name || '');
      }
    }

    // Concepto → comments (opcional)
    setIfEmpty('[name="comments"]', data.concept_description || '');

    // Marca visual
    ['invoice_uuid','invoice_number','invoice_date','amount_original'].forEach(n => {
      const el = document.querySelector(`[name="${n}"]`);
      if (el && el.value) el.classList.add('border','border-primary');
    });
  }

  // ========= Quick-Add =========
  function openQuickModal(prefillRfc = '', prefillName = '', prefillCountry = 'MX'){
    if (iRfc)     iRfc.value     = (prefillRfc || '').toUpperCase();
    if (iName)    iName.value    = prefillName || '';
    if (iCountry) iCountry.value = (prefillCountry || 'MX').toUpperCase();
    if (errBox)   errBox.classList.add('d-none');
    modal.modal('show');
  }
  function suggestQuickAddSupplier(rfc, name){ openQuickModal(rfc, name, 'MX'); }
  window.suggestQuickAddSupplier = suggestQuickAddSupplier;

  btnOpen && btnOpen.addEventListener('click', () => openQuickModal('', '', 'MX'));

  btnDo && btnDo.addEventListener('click', async () => {
    const rfc     = (iRfc?.value || '').toUpperCase().trim();
    const name    = (iName?.value || '').trim();
    const country = (iCountry?.value || 'MX').toUpperCase().trim();
    if (!RFC_RE.test(rfc)) {
      if (errBox) { errBox.textContent = 'RFC inválido. Revisa el formato.'; errBox.classList.remove('d-none'); }
      return;
    }
    if (!name) {
      if (errBox) { errBox.textContent = 'Nombre requerido.'; errBox.classList.remove('d-none'); }
      return;
    }
    if (!country || country.length !== 2) {
      if (errBox) { errBox.textContent = 'country_iso inválido (usa código ISO-2, ej. MX).'; errBox.classList.remove('d-none'); }
      return;
    }

    try {
      const token = (document.querySelector('meta[name="csrf-token"]')?.content) || '{{ csrf_token() }}';
      const res = await fetch(QUICK_STORE_URL, {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': token, 'Accept': 'application/json', 'Content-Type':'application/json'},
        body: JSON.stringify({ rfc, name, country_iso: country })
      });
      const json = await res.json().catch(()=>({}));
      if (!res.ok) {
        if (errBox) { errBox.textContent = (json.message || json.error || 'No se pudo crear el proveedor.'); errBox.classList.remove('d-none'); }
        return;
      }
      if (selSup) {
        const opt = document.createElement('option');
        opt.value = json.supplier_id;
        opt.dataset.rfc = json.rfc;
        opt.textContent = json.name;
        selSup.appendChild(opt);
        selSup.value = json.supplier_id;
      }
      if (hidFlag) hidFlag.value = '1';
      modal.modal('hide');
    } catch (e) {
      console.error(e);
      if (errBox) { errBox.textContent = 'Error de red. Intenta de nuevo.'; errBox.classList.remove('d-none'); }
    }
  });

  // ========= Orquestación =========
  async function handleFileChosen(file){
    resetPreview();
    if (!file) return;
    if (!isPdf(file)) { alert('Selecciona un archivo PDF (.pdf).'); return; }
    if (file.size > 10 * 1024 * 1024) { alert('El PDF excede 10 MB.'); return; }

    showPlaceholder('Generando vista previa…');

    try {
      const [previewData, aiData] = await Promise.allSettled([
        uploadForPreview(file),
        extractWithAI(file),
      ]);

      // Preview
      if (previewData.status === 'fulfilled') {
        const { url, preview_url } = previewData.value || {};
        currentSignedUrl = preview_url || url || null;
        if (currentSignedUrl) {
          setViewerSrc(currentSignedUrl);
          clearBtn && (clearBtn.disabled = false);
          openTab  && (openTab.classList.remove('d-none'), openTab.setAttribute('href', currentSignedUrl));
          meta     && (meta.textContent = file.name + ' · ' + humanSize(file.size));
        } else {
          showPlaceholder('Vista previa no disponible; usa “Abrir en pestaña”.');
        }
      } else {
        console.error(previewData.reason);
        showPlaceholder('Vista previa no disponible; usa “Abrir en pestaña”.');
      }

      // IA
      if (aiData.status === 'fulfilled') {
        applyExtraction(aiData.value || {});
      } else {
        console.error(aiData.reason);
      }
    } catch (e) {
      console.error(e);
      alert('No se pudo procesar el PDF. Intenta de nuevo o abre en pestaña.');
      showPlaceholder('No se pudo generar la vista previa.');
    }
  }

  // Eventos
  input   && input.addEventListener('change', (e)=>{ const f=e.target.files?.[0]; if (f) handleFileChosen(f); });
  clearBtn&& clearBtn.addEventListener('click', resetPreview);

  // Init
  showPlaceholder();
})();
</script>
@endpush

@section('js')
<script>
(function () {
  const $efe   = document.getElementById('efe_classification_id');
  const $sub   = document.getElementById('classification_subcategory_id');
  const $bud   = document.getElementById('budget_class_id');

  if (!$efe || !$sub || !$bud) return;

  // Helper para limpiar y deshabilitar
  const resetSelect = (sel, placeholder, disable=true) => {
    sel.innerHTML = '';
    const opt = document.createElement('option');
    opt.value = '';
    opt.textContent = placeholder;
    sel.appendChild(opt);
    sel.disabled = !!disable;
  };

  // Carga subcategorías por EFE
  const loadSubcategories = async (efeId, preselect=null) => {
    const tpl = $efe.dataset.subcatsUrlTemplate; // .../ajax/efe/__ID__/subcategories
    const url = tpl.replace('__ID__', encodeURIComponent(efeId));

    resetSelect($sub, '— Selecciona subcategoría —', false);
    resetSelect($bud, '— Selecciona budget —', true); // al cambiar EFE, reinicia budgets

    try {
      const resp = await fetch(url, { headers: { 'Accept': 'application/json' }});
      const data = await resp.json();
      if (!resp.ok || !data.ok) throw new Error(data.message || ('HTTP ' + resp.status));

      (data.data || []).forEach(row => {
        const opt = document.createElement('option');
        opt.value = row.subcategory_classification_id;
        opt.textContent = row.name;
        if (preselect && String(preselect) === String(row.subcategory_classification_id)) {
          opt.selected = true;
        }
        $sub.appendChild(opt);
      });

      // Habilitar subcategoría (si no hay datos, igual habilita para mostrar placeholder)
      $sub.disabled = false;

      // Si hay preselect, dispara la carga de budgets
      if (preselect) {
        $sub.dispatchEvent(new Event('change'));
      }
    } catch (err) {
      console.error('[efe->subcategories] error', err);
      resetSelect($sub, '— Error al cargar subcategorías —', true);
    }
  };

  // Carga budgets por Subcategoría
  const loadBudgets = async (subId, preselect=null) => {
    const tpl = $sub.dataset.budgetsUrlTemplate; // .../ajax/subcategory/__ID__/budget-classes
    const url = tpl.replace('__ID__', encodeURIComponent(subId));

    resetSelect($bud, '— Selecciona budget —', false);

    try {
      const resp = await fetch(url, { headers: { 'Accept': 'application/json' }});
      const data = await resp.json();
      if (!resp.ok || !data.ok) throw new Error(data.message || ('HTTP ' + resp.status));

      (data.data || []).forEach(row => {
        const opt = document.createElement('option');
        opt.value = row.budget_class_id;
        opt.textContent = row.name;
        if (preselect && String(preselect) === String(row.budget_class_id)) {
          opt.selected = true;
        }
        $bud.appendChild(opt);
      });

      $bud.disabled = false;
    } catch (err) {
      console.error('[sub->budgets] error', err);
      resetSelect($bud, '— Error al cargar budgets —', true);
    }
  };

  // Eventos
  $efe.addEventListener('change', () => {
    const efeId = $efe.value || null;
    if (!efeId) {
      resetSelect($sub, '— Selecciona subcategoría —', true);
      resetSelect($bud, '— Selecciona budget —', true);
      return;
    }
    loadSubcategories(efeId, /* preselect */ null);
  });

  $sub.addEventListener('change', () => {
    const subId = $sub.value || null;
    if (!subId) {
      resetSelect($bud, '— Selecciona budget —', true);
      return;
    }
    loadBudgets(subId, /* preselect */ null);
  });

  // --- Rehidratación con old() sin romper UX:
  // Si al cargar ya hay EFE seleccionada pero no se llenaron subcats/budgets, los cargamos.
  const oldEfe = $efe.value || null;
  const oldSub = "{{ old('classification_subcategory_id') }}";
  const oldBud = "{{ old('budget_class_id') }}";

  if (oldEfe && $sub.options.length <= 1) {
    // Precarga subcategorías y (si hay) budget
    loadSubcategories(oldEfe, oldSub || null).then(() => {
      if (oldSub && $bud.options.length <= 1) {
        loadBudgets(oldSub, oldBud || null);
      }
    });
  }
})();
</script>
@endsection