@extends('layouts.enterprise')

@section('title', 'Aprobacion de facturas')

@section('content')
  <div class="card accountant-invoices-page">
    <h1 class="page-title">Aprobacion de facturas</h1>
    <p class="subtle">Vista completa de revisión para contabilidad.</p>

    @if(session('ok'))
      <div class="notice">{{ session('ok') }}</div>
    @endif
    @if($errors->any())
      <div class="error">
        <ul>
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    @php
      $indexRouteName = $indexRouteName ?? 'accountant.invoices.index';
      $statusRouteName = $statusRouteName ?? 'accountant.invoices.status';
      $isAdminArea = $isAdminArea ?? false;
      $hasActiveFilters = (($filters['q'] ?? '') !== '')
        || (($filters['status'] ?? 'all') !== 'all')
        || (($filters['from'] ?? '') !== '')
        || (($filters['to'] ?? '') !== '');
      $rejectReasonOptions = [
        'RFC inválido o no coincide con el proveedor.',
        'RC no existe o no coincide con la solicitud.',
        'Monto total no coincide con la solicitud.',
        'Conceptos/COD no coinciden con la solicitud.',
        'XML inválido o estructura incorrecta.',
        'Faltan documentos obligatorios (PDF/XML/OC).',
        'Datos fiscales incompletos o incorrectos.',
        'Factura duplicada.',
      ];
    @endphp

    <sl-details class="filters-collapse" @if($hasActiveFilters) open @endif>
      <div slot="summary" class="filters-summary">
        <img src="{{ asset('build/assets/logo.png') }}" alt="" class="filter-favicon">
        <span>Filtros</span>
        @if($hasActiveFilters)
          <span class="badge">Activos</span>
        @endif
      </div>
      <form method="GET" action="{{ route($indexRouteName) }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--four">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="ID, RC, proveedor o proyecto">
          </div>
          <div class="field">
            <label>Estatus</label>
            <select name="status">
              <option value="all" @selected($filters['status'] === 'all')>Todos</option>
              @foreach(\App\Models\Invoice::STATUSES as $statusOption)
                <option value="{{ $statusOption }}" @selected($filters['status'] === $statusOption)>{{ $statusOption }}</option>
              @endforeach
            </select>
          </div>
          <div class="field">
            <label>Factura desde</label>
            <input type="date" name="from" value="{{ $filters['from'] }}">
          </div>
          <div class="field">
            <label>Factura hasta</label>
            <input type="date" name="to" value="{{ $filters['to'] }}">
          </div>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route($indexRouteName) }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    <h2 class="section-title">Facturas pendientes de aprobacion</h2>

    <div class="invoices-table-wrap">
      <table class="invoices-table" data-no-responsive="1">
        <thead>
          <tr>
            <th>ID</th>
            <th>Proveedor</th>
            <th>RC</th>
            <th>JN Number</th>
            <th>PROJECT NAME</th>
            <th>Estatus</th>
            <th>Motivo de cancelación</th>
            <th>Fecha factura</th>
            <th>Fecha pago</th>
            <th>Total</th>
            <th>Comprobante</th>
            <th>Documentos</th>
            <th class="actions-header">Acciones</th>
          </tr>
        </thead>
        <tbody>
          @forelse($invoices as $invoice)
          @php
            $invoicePdf = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_INVOICE_PDF);
            $invoiceXml = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_INVOICE_XML);
            $purchaseOrder = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_PURCHASE_ORDER);
            $paymentProof = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_PAYMENT_PROOF);
            $rejectionLog = $invoice->logs->first();
            $isRejected = $invoice->status === \App\Models\Invoice::STATUS_REJECTED;
            $providerMatch = (array) data_get($invoice->pipefy_payload, 'provider_match', []);
            $providerTrackableTotal = (int) ($providerMatch['provider_trackable_items_total'] ?? 0);
            $providerCoveredAfter = (int) ($providerMatch['provider_items_covered_after'] ?? 0);
            $providerPendingAfter = (int) ($providerMatch['provider_items_pending_after'] ?? max($providerTrackableTotal - $providerCoveredAfter, 0));
            $isPartialForProvider = $providerTrackableTotal > 0
              ? (bool) ($providerMatch['is_partial_for_provider'] ?? false)
              : null;
            $statusLockedForAccountant = !$isAdminArea && !in_array(
              (string) $invoice->status,
              $accountantEditableStatuses ?? [],
              true
            );
          @endphp
          <tr>
            <td>{{ $invoice->id }}</td>
            <td>{{ $invoice->company?->legal_name }}</td>
            <td>{{ $invoice->rc_number }}</td>
            <td>{{ $invoice->jn_number ?: ($invoice->pipefyRequest?->title ?: '-') }}</td>
            <td>
              <div>{{ $invoice->pipefyRequest?->project_name ?: '-' }}</div>
              <small class="subtle" style="margin:0;">Proyecto: {{ $invoice->pipefyRequest?->title ?: ($invoice->jn_number ?: '-') }}</small>
            </td>
            <td>
              <span class="badge {{ $isRejected ? 'badge--rejected' : '' }}">{{ $invoice->status }}</span>
              @if($isPartialForProvider !== null)
                @if($isPartialForProvider)
                  <span class="badge" style="background:#fff7ed; color:#b45309; border:1px solid #fed7aa;">
                    Parcial (pendientes {{ $providerPendingAfter }})
                  </span>
                @else
                  <span class="badge" style="background:#dcfce7; color:#166534; border:1px solid #86efac;">
                    Completa ({{ $providerCoveredAfter }}/{{ $providerTrackableTotal }})
                  </span>
                @endif
              @endif
            </td>
            <td>
              @if($isRejected)
                {{ $rejectionLog?->note ?: 'Sin motivo registrado.' }}
              @else
                -
              @endif
            </td>
            <td>{{ optional($invoice->invoice_date)->format('Y-m-d') }}</td>
            <td>{{ $isRejected ? '-' : optional($invoice->payment_date)->format('Y-m-d') }}</td>
            <td>${{ number_format((float) $invoice->total, 2) }}</td>
            <td>
              @if($isRejected)
                -
              @elseif($paymentProof)
                <a class="badge" href="{{ asset('storage/'.$paymentProof->path) }}" target="_blank" rel="noopener">Ver comprobante</a>
              @else
                <span class="badge">Sin comprobante</span>
              @endif
            </td>
            <td style="min-width:180px;">
              @if($invoicePdf)
                <a class="btn btn-secondary" style="padding:6px 10px; margin-right:6px; margin-bottom:6px; display:inline-block;" href="{{ asset('storage/'.$invoicePdf->path) }}" target="_blank" rel="noopener">Factura PDF</a>
              @endif
              @if($invoiceXml)
                <a class="btn btn-secondary" style="padding:6px 10px; margin-right:6px; margin-bottom:6px; display:inline-block;" href="{{ asset('storage/'.$invoiceXml->path) }}" target="_blank" rel="noopener">Factura XML</a>
              @endif
              @if($purchaseOrder)
                <a class="btn btn-secondary" style="padding:6px 10px; margin-bottom:6px; display:inline-block;" href="{{ asset('storage/'.$purchaseOrder->path) }}" target="_blank" rel="noopener">OC PDF</a>
              @endif
              @if(!$invoicePdf && !$invoiceXml && !$purchaseOrder)
                <span class="badge">Sin archivos</span>
              @endif
            </td>
            <td class="actions-cell">
              <div class="actions-stack">
                @if($statusLockedForAccountant)
                  <span class="badge badge--locked">Solo admin puede cambiar este estatus</span>
                @else
                  <form method="POST" action="{{ route($statusRouteName, $invoice) }}" class="actions-form actions-form--status">
                    @csrf
                    <select name="status" aria-label="Estatus de factura #{{ $invoice->id }}">
                      @foreach(\App\Models\Invoice::STATUSES as $statusOption)
                        <option value="{{ $statusOption }}" @selected($invoice->status === $statusOption)>{{ $statusOption }}</option>
                      @endforeach
                    </select>
                    <input type="text" name="note" maxlength="1000" placeholder="Nota (obligatoria si rejected)">
                    <button class="btn btn-secondary" type="submit">Cambiar estatus</button>
                  </form>

                  <form method="POST" action="{{ route($statusRouteName, $invoice) }}" class="actions-form">
                    @csrf
                    <input type="hidden" name="status" value="approved">
                    <button class="btn" type="submit">Aprobar</button>
                  </form>

                  <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="document.getElementById('reject-invoice-dialog-{{ $invoice->id }}').show()"
                  >
                    Rechazar
                  </button>

                  <sl-dialog id="reject-invoice-dialog-{{ $invoice->id }}" label="Rechazar factura #{{ $invoice->id }}">
                    <form id="reject-invoice-form-{{ $invoice->id }}" class="js-reject-reason-form" method="POST" action="{{ route($statusRouteName, $invoice) }}">
                      @csrf
                      <input type="hidden" name="status" value="rejected">
                      <input type="hidden" name="reject_invoice_id" value="{{ $invoice->id }}">
                      <input type="hidden" name="note" class="js-reject-note-final" value="{{ old('reject_invoice_id') == $invoice->id ? old('note') : '' }}">
                      <div class="field">
                        <label>Error más común</label>
                        <select name="note_preset" class="js-reject-note-preset" required>
                          <option value="">Selecciona un motivo</option>
                          @foreach($rejectReasonOptions as $reason)
                            <option value="{{ $reason }}" @selected(old('reject_invoice_id') == $invoice->id && old('note_preset') === $reason)>{{ $reason }}</option>
                          @endforeach
                          <option value="__custom__" @selected(old('reject_invoice_id') == $invoice->id && old('note_preset') === '__custom__')>No hay ninguno (escribir motivo)</option>
                        </select>
                      </div>
                      <div class="field js-reject-note-custom-wrap" style="display:none;">
                        <label>Motivo personalizado</label>
                        <textarea name="note_custom" class="js-reject-note-custom" rows="4" maxlength="1000" placeholder="Escribe el motivo del rechazo.">{{ old('reject_invoice_id') == $invoice->id ? old('note_custom') : '' }}</textarea>
                      </div>
                    </form>

                    <sl-button
                      slot="footer"
                      variant="default"
                      onclick="document.getElementById('reject-invoice-dialog-{{ $invoice->id }}').hide()"
                    >
                      Cancelar
                    </sl-button>
                    <sl-button slot="footer" variant="danger" type="submit" form="reject-invoice-form-{{ $invoice->id }}">
                      Confirmar rechazo
                    </sl-button>
                  </sl-dialog>
                @endif
              </div>
            </td>
          </tr>
          @empty
            <tr>
              <td colspan="13">No hay facturas pendientes.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div class="pagination-wrap">
      {{ $invoices->onEachSide(1)->links('vendor.pagination.enterprise') }}
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const CUSTOM = '__custom__';

      document.querySelectorAll('.js-reject-reason-form').forEach(function (form) {
        const preset = form.querySelector('.js-reject-note-preset');
        const customWrap = form.querySelector('.js-reject-note-custom-wrap');
        const custom = form.querySelector('.js-reject-note-custom');
        const finalNote = form.querySelector('.js-reject-note-final');
        if (!preset || !customWrap || !custom || !finalNote) return;

        const sync = function () {
          const presetValue = (preset.value || '').trim();
          if (presetValue === CUSTOM) {
            customWrap.style.display = 'block';
            custom.required = true;
            finalNote.value = (custom.value || '').trim();
            return;
          }

          customWrap.style.display = 'none';
          custom.required = false;
          finalNote.value = presetValue;
        };

        preset.addEventListener('change', sync);
        custom.addEventListener('input', function () {
          if ((preset.value || '').trim() === CUSTOM) {
            finalNote.value = (custom.value || '').trim();
          }
        });

        form.addEventListener('submit', function (event) {
          sync();
          if (!(finalNote.value || '').trim()) {
            event.preventDefault();
            alert('Selecciona un motivo o escribe uno personalizado.');
            preset.focus();
          }
        });

        sync();
      });
    });
  </script>

  @if($errors->any() && old('status') === \App\Models\Invoice::STATUS_REJECTED && old('reject_invoice_id'))
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const invoiceId = @json((string) old('reject_invoice_id'));
        const dialog = document.getElementById(`reject-invoice-dialog-${invoiceId}`);
        if (dialog && typeof dialog.show === 'function') {
          dialog.show();
        }
      });
    </script>
  @endif
@endpush

@push('styles')
  <style>
    .wrap {
      max-width: 100%;
      width: 100%;
      padding-left: 16px;
      padding-right: 16px;
    }
    .accountant-invoices-page {
      width: 100%;
    }
    .filters-collapse {
      margin-bottom: 14px;
    }
    .filters-collapse::part(base) {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8fafc;
    }
    .filters-collapse::part(summary) {
      padding: 12px 14px;
      font-weight: 600;
      color: #0b1220;
    }
    .filters-collapse::part(content) {
      padding: 0 14px 14px;
    }
    .filters-summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .filter-favicon {
      width: 18px;
      height: 18px;
      object-fit: contain;
      border-radius: 4px;
      background: #fff;
      border: 1px solid var(--border);
      padding: 2px;
    }
    .dashboard-filters {
      margin: 0;
      padding: 0;
    }
    .filters-grid {
      display: grid;
      gap: 10px;
      margin-bottom: 10px;
    }
    .filters-grid--four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .filters-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .invoices-table-wrap {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .invoices-table {
      min-width: 1500px;
      margin: 0;
      border: 0;
    }
    .invoices-table th,
    .invoices-table td {
      vertical-align: top;
      white-space: normal;
      word-break: normal;
      overflow-wrap: normal;
    }
    .actions-header {
      text-align: center !important;
    }
    .actions-cell {
      text-align: center !important;
      vertical-align: middle;
    }
    .actions-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 0 auto;
    }
    .actions-form {
      display: flex;
      gap: 8px;
      align-items: center !important;
      justify-content: center !important;
      flex-wrap: wrap;
      margin: 0;
      width: 100%;
    }
    .actions-form--status select,
    .actions-form--status input {
      min-height: 36px;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 0.85rem;
      background: #fff;
    }
    .actions-form--status select {
      min-width: 130px;
    }
    .actions-form--status input {
      min-width: 180px;
    }
    .pagination-wrap {
      margin-top: 14px;
    }
    @media (max-width: 1200px) {
      .invoices-table {
        min-width: 1320px;
      }
    }
    @media (max-width: 900px) {
      .wrap {
        padding-left: 10px;
        padding-right: 10px;
      }
      .card.accountant-invoices-page {
        padding: 14px;
      }
      .filters-grid--four {
        grid-template-columns: 1fr;
      }
      .actions-stack {
        min-width: 260px;
      }
      .actions-form--status {
        flex-direction: column;
        align-items: stretch !important;
      }
      .actions-form--status select,
      .actions-form--status input,
      .actions-form--status button {
        width: 100%;
      }
      .invoices-table th,
      .invoices-table td {
        word-break: break-word;
        overflow-wrap: anywhere;
      }
    }
  </style>
@endpush