@extends('adminlte::page')

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

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

@section('content')
<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" class="form-control" value="{{ old('request_folio') }}">
                        @error('request_folio')<span class="text-danger small">{{ $message }}</span>@enderror
                    </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>

                    {{-- Company / Supplier --}}
                    <div class="form-group col-md-3">
                        <label>Compañía *</label>
                        <select name="company_id" class="form-control" required>
                            <option value="">Seleccione…</option>
                            @foreach($companies as $c)
                                <option value="{{ $c->company_id }}" {{ old('company_id') == $c->company_id ? 'selected' : '' }}>
                                    {{ $c->name }}
                                </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>
                        <select name="supplier_id" class="form-control" required>
                            <option value="">Seleccione…</option>
                            @foreach($suppliers as $s)
                                <option value="{{ $s->supplier_id }}" {{ old('supplier_id') == $s->supplier_id ? 'selected' : '' }}>
                                    {{ $s->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('supplier_id')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>

                    {{-- Estatus --}}
                    <div class="form-group col-md-3">
                        <label>Estatus aprobación *</label>
                        <select name="approval_status_id" class="form-control" required>
                            @foreach($approvalStatuses as $a)
                                <option value="{{ $a->approval_status_id }}" {{ old('approval_status_id') == $a->approval_status_id ? 'selected' : '' }}>
                                    {{ $a->description }}
                                </option>
                            @endforeach
                        </select>
                        @error('approval_status_id')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group col-md-3">
                        <label>Estatus pago *</label>
                        <select name="payment_status_id" class="form-control" required>
                            @foreach($paymentStatuses as $p)
                                <option value="{{ $p->payment_status_id }}" {{ old('payment_status_id') == $p->payment_status_id ? 'selected' : '' }}>
                                    {{ $p->description }}
                                </option>
                            @endforeach
                        </select>
                        @error('payment_status_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" class="form-control">
                            <option value="">(No especificado)</option>
                            @foreach($methods as $m)
                                <option value="{{ $m->payment_method_id }}" {{ 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 }}"
                                    {{ 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>

                    {{-- Clasificación --}}
                    <div class="form-group col-md-3">
                        <label>Clasificación</label>
                        <select name="classification_subcategory_id" class="form-control">
                            <option value="">(Sin clasificación)</option>
                            @foreach($subcategories as $sc)
                                <option value="{{ $sc->classification_subcategory_id }}" {{ old('classification_subcategory_id') == $sc->classification_subcategory_id ? 'selected' : '' }}>
                                    {{ $sc->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('classification_subcategory_id')<span class="text-danger small">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group col-md-3">
                        <label>Partida presupuestal</label>
                        <select name="budget_class_id" class="form-control">
                            <option value="">(No asignada)</option>
                            @foreach($budgetClasses as $bc)
                                <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>

                    {{-- 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>

                    {{-- Programado / Comentarios --}}
                    <div class="form-group col-md-3">
                        <label>Programado pago</label>
                        <input type="date" name="scheduled_payment_date" class="form-control" value="{{ old('scheduled_payment_date') }}">
                        @error('scheduled_payment_date')<span class="text-danger small">{{ $message }}</span>@enderror
                    </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" style="height: 520px; overflow: auto; position: relative;">
                    <div id="pdf-placeholder" class="d-flex align-items-center justify-content-center h-100 text-muted">
                        <span>Selecciona un PDF para previsualizarlo aquí…</span>
                    </div>

                    <!-- Canvas oculto (buffer) -->
                    <canvas id="pdf-canvas" class="d-none"></canvas>

                    <!-- Imagen visible del preview -->
                    <img id="pdf-image" class="d-none"
                        alt="Vista previa PDF (página 1)"
                        style="display:block; max-width:100%; max-height:100%; margin:0 auto;" />
                </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>
</form>
@stop

@push('js')
<script>
(function(){
  // ===== Refs (form) =====
  const form   = document.getElementById('payment-request-form');
  const saveBt = document.getElementById('btn_save');

  const amount = document.getElementById('amount_original');
  const fx     = document.getElementById('exchange_rate');
  const mxn    = document.getElementById('amount_mxn');
  const curSel = document.getElementById('currency_id');

  const company   = document.querySelector('[name="company_id"]');
  const supplier  = document.querySelector('[name="supplier_id"]');
  const apprStat  = document.querySelector('[name="approval_status_id"]');
  const payStat   = document.querySelector('[name="payment_status_id"]');

  // ===== Estado "dirty" para aviso al salir =====
  let isDirty = false;
  function markDirty(){ isDirty = true; }
  document.querySelectorAll('input, select, textarea').forEach(el => {
    el.addEventListener('change', markDirty);
    el.addEventListener('input',  markDirty);
  });
  window.addEventListener('beforeunload', (e) => {
    if (!isDirty) return;
    e.preventDefault();
    e.returnValue = '';
  });

  // ===== Helpers =====
  function getSelectedCurrencyCode(){
    const opt = curSel?.selectedOptions?.[0];
    return opt ? (opt.dataset.code || '') : '';
  }
  function isMXN(){ return (getSelectedCurrencyCode().toUpperCase() === 'MXN'); }
  function parseNum(v, fallback=0){ const n = parseFloat(v); return isNaN(n) ? fallback : n; }

  // ===== Cálculo y validación visual =====
  function recalcMXN(){
    const a = parseNum(amount?.value, 0);
    const e = parseNum(fx?.value, 1);
    if (mxn) mxn.value = (a * e).toFixed(2);
  }
  function normalizeFXbyCurrency(){
    if (!fx) return;
    if (isMXN()) {
      fx.value = fx.value || '1';
      fx.setAttribute('readonly', 'readonly');
      fx.classList.add('bg-light');
    } else {
      fx.removeAttribute('readonly');
      fx.classList.remove('bg-light');
    }
  }
  function setInvalid(el, msg){
    if (!el) return;
    el.setCustomValidity(msg || '');
    el.classList.toggle('is-invalid', !!msg);
  }
  function validateFormClient(){
    let ok = true;
    [company, supplier, apprStat, payStat, curSel, amount].forEach(el => {
      const missing = !el || !el.value;
      setInvalid(el, missing ? 'Campo requerido' : '');
      ok = ok && !missing;
    });
    if (!isMXN()) {
      const fxBad = !fx || !fx.value || parseNum(fx.value) <= 0;
      setInvalid(fx, fxBad ? 'Ingresa tipo de cambio (> 0)' : '');
      ok = ok && !fxBad;
    } else setInvalid(fx, '');
    const amtBad = parseNum(amount?.value) <= 0;
    setInvalid(amount, amtBad ? 'Ingresa un importe mayor a 0' : '');
    ok = ok && !amtBad;
    if (saveBt) saveBt.disabled = !ok;
    return ok;
  }

  let t = null;
  function scheduleValidate(){
    clearTimeout(t);
    t = setTimeout(() => { recalcMXN(); validateFormClient(); }, 120);
  }
  amount && amount.addEventListener('input', scheduleValidate);
  fx && fx.addEventListener('input', scheduleValidate);
  curSel && curSel.addEventListener('change', () => { normalizeFXbyCurrency(); scheduleValidate(); });

  // Atajo Ctrl/Cmd + S
  document.addEventListener('keydown', (e) => {
    const isMac = navigator.platform.toUpperCase().includes('MAC');
    const mod   = isMac ? e.metaKey : e.ctrlKey;
    if (mod && e.key.toLowerCase() === 's') {
      e.preventDefault();
      if (validateFormClient()) form?.requestSubmit();
    }
  });

  // Anti doble-submit
  form && form.addEventListener('submit', (e) => {
    if (!validateFormClient()) { e.preventDefault(); return; }
    isDirty = false;
    if (saveBt) {
      saveBt.disabled = true;
      const i = saveBt.querySelector('i');
      if (i) i.className = 'fas fa-circle-notch fa-spin';
      saveBt.blur();
    }
  });

  // Init
  normalizeFXbyCurrency();
  recalcMXN();
  validateFormClient();
})();
</script>
@endpush

@push('js')
<!-- PDF.js local (UMD). Debes tener /public/vendor/pdfjs/pdf.min.js y pdf.worker.min.js -->
<script src="/vendor/pdfjs/pdf.min.js"></script>
<script>
(function(){
  // ---- Config PDF.js ----
  if (window['pdfjsLib']) {
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/vendor/pdfjs/pdf.worker.min.js';
  }

  // ---- Endpoints ----
  const PREVIEW_UPLOAD_URL = "{{ route('payment-requests.preview-pdf', [], false) }}";

  // ---- Refs UI ----
  const input   = document.getElementById('invoice_pdf');
  const holder  = document.getElementById('pdf-placeholder');
  const meta    = document.getElementById('invoice_pdf_meta');
  const btnClr  = document.getElementById('clear_pdf');
  const aOpen   = document.getElementById('open_pdf_tab');

  const canvas  = document.getElementById('pdf-canvas');
  const img     = document.getElementById('pdf-image');
  const box     = document.getElementById('pdf-container');

  let signedUrl  = null;
  let imgBlobUrl = null;

  // ---- Placeholder robusto ----
  // lo hacemos overlay absoluto para que no “empuje” la imagen
  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');   // centrado
  }
  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');
  }

  // ---- Utilidades ----
  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 resetPreview(){
    if (img) {
      if (imgBlobUrl) { URL.revokeObjectURL(imgBlobUrl); imgBlobUrl = null; }
      img.removeAttribute('src');
      img.classList.add('d-none');
      img.style.display = 'none';
    }
    if (canvas) {
      const ctx = canvas.getContext('2d');
      if (ctx) ctx.clearRect(0,0,canvas.width,canvas.height);
      canvas.classList.add('d-none');
    }
    showPlaceholder('Selecciona un PDF para previsualizarlo aquí…');
    meta && (meta.textContent = '');
    btnClr && (btnClr.disabled = true);
    aOpen && (aOpen.classList.add('d-none'), aOpen.setAttribute('href','#'));
    input && (input.value = '');
    signedUrl = null;
  }
  function isPdf(file){
    const byType = (file.type || '').toLowerCase().includes('pdf');
    const byName = /\.pdf$/i.test(file.name || '');
    return byType || byName;
  }

  async function uploadForSignedUrl(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('Upload preview failed');
    const data = await resp.json(); // { url, preview_url }
    return data?.preview_url || data?.url || null;
  }

  async function renderFirstPageToImage(file){
    if (!window['pdfjsLib']) throw new Error('PDF.js no cargado');
    const buf = await file.arrayBuffer();
    const pdf = await pdfjsLib.getDocument({ data: buf }).promise;
    const page = await pdf.getPage(1);

    const cssWidth = Math.max(320, box.clientWidth || 600);
    const v1 = page.getViewport({ scale: 1 });
    const scale = cssWidth / v1.width;
    const viewport = page.getViewport({ scale });

    canvas.width  = Math.floor(viewport.width);
    canvas.height = Math.floor(viewport.height);
    const ctx = canvas.getContext('2d');

    // ocultamos placeholder ya desde aquí para evitar “parpadeo”
    hidePlaceholder();
    await page.render({ canvasContext: ctx, viewport }).promise;

    return new Promise((resolve, reject) => {
      canvas.toBlob((blob) => {
        if (!blob) return reject(new Error('No se pudo crear blob PNG'));
        if (imgBlobUrl) URL.revokeObjectURL(imgBlobUrl);
        imgBlobUrl = URL.createObjectURL(blob);
        img.src = imgBlobUrl;
        img.style.display = 'block';
        img.classList.remove('d-none');
        hidePlaceholder(); // segunda vez por si algún CSS lo reactivó
        resolve();
      }, 'image/png');
    });
  }

  async function showPreview(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 {
      await renderFirstPageToImage(file);
      // en paralelo: URL firmada para “Abrir en pestaña”
      uploadForSignedUrl(file).then((url) => {
        signedUrl = url;
        if (signedUrl) {
          aOpen && (aOpen.classList.remove('d-none'), aOpen.setAttribute('href', signedUrl));
        }
      }).catch(console.warn);

      btnClr && (btnClr.disabled = false);
      meta && (meta.textContent = file.name + ' · ' + humanSize(file.size));
    } catch (e) {
      console.error(e);
      alert('No se pudo generar la vista previa en imagen. Usa “Abrir en pestaña”.');
      try {
        signedUrl = await uploadForSignedUrl(file);
        if (signedUrl) {
          aOpen && (aOpen.classList.remove('d-none'), aOpen.setAttribute('href', signedUrl));
          showPlaceholder('Vista previa no disponible; usa “Abrir en pestaña”.');
        } else {
          showPlaceholder('No se pudo generar la vista previa.');
        }
      } catch (e2) {
        console.error(e2);
        showPlaceholder('No se pudo generar la vista previa.');
      }
    }
  }

  // Eventos
  input && input.addEventListener('change', (e) => { showPreview(e.target.files?.[0] || null); });
  btnClr && btnClr.addEventListener('click', resetPreview);
  window.addEventListener('beforeunload', () => { if (imgBlobUrl) URL.revokeObjectURL(imgBlobUrl); });

  // Init
  showPlaceholder('Selecciona un PDF para previsualizarlo aquí…');
})();
</script>
@endpush