@extends('layouts.enterprise')

@section('title', 'Facturas Admin')

@section('content')
  <div class="card admin-invoices-page">
    <h1 class="page-title">{{ $canManage ? 'Facturas (Admin)' : 'Mis facturas' }}</h1>
    <p class="subtle">
      {{ $canManage ? 'Gestión de estatus y comprobantes de pago.' : 'Consulta de estatus y comprobantes de pago de tus facturas.' }}
    </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
      $hasActiveFilters = (($filters['q'] ?? '') !== '')
        || (($filters['status'] ?? 'all') !== 'all')
        || !empty($filters['date_from'] ?? null)
        || !empty($filters['date_to'] ?? null);
      $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('admin.invoices.index') }}" 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 o proveedor">
          </div>
          <div class="field">
            <label>Estatus</label>
            <select name="status">
              <option value="all" @selected(($filters['status'] ?? 'all') === 'all')>Todos</option>
              @foreach(\App\Models\Invoice::STATUSES as $statusOption)
                <option value="{{ $statusOption }}" @selected(($filters['status'] ?? 'all') === $statusOption)>
                  {{ $statusOption }}
                </option>
              @endforeach
            </select>
          </div>
          <div class="field">
            <label>Fecha desde</label>
            <input type="date" name="date_from" value="{{ $filters['date_from'] ?? '' }}">
          </div>
          <div class="field">
            <label>Fecha hasta</label>
            <input type="date" name="date_to" value="{{ $filters['date_to'] ?? '' }}">
          </div>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route('admin.invoices.index') }}">Limpiar</a>
          <span class="badge">Resultados: {{ $invoices->total() }}</span>
        </div>
      </form>
    </sl-details>

    <div class="admin-invoices-table-wrap">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Proveedor</th>
            <th>RC</th>
            <th>JN</th>
            <th>Estatus</th>
            <th>Motivo de cancelación</th>
            <th>Fecha pago</th>
            <th>Comprobante</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
          @forelse($invoices as $inv)
          @php
            $paymentProof = $inv->files->first();
            $rejectionLog = $inv->logs->first();
            $isRejected = $inv->status === \App\Models\Invoice::STATUS_REJECTED;
            $providerMatch = (array) data_get($inv->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;
            $canUploadProof = in_array($inv->status, [
              \App\Models\Invoice::STATUS_APPROVED,
              \App\Models\Invoice::STATUS_SCHEDULED,
              \App\Models\Invoice::STATUS_PAID,
            ], true) && !$paymentProof;
            $canMarkPaid = in_array($inv->status, [
              \App\Models\Invoice::STATUS_APPROVED,
              \App\Models\Invoice::STATUS_SCHEDULED,
            ], true) && $paymentProof;
            $statusOptions = array_values(array_filter(
              \App\Models\Invoice::STATUSES,
              fn ($status) => !in_array($status, [
                \App\Models\Invoice::STATUS_REJECTED,
                \App\Models\Invoice::STATUS_PAID,
              ], true)
            ));
          @endphp
            <tr>
              <td>{{ $inv->id }}</td>
              <td>{{ $inv->company?->legal_name }}</td>
              <td>{{ $inv->rc_number }}</td>
              <td>
                {{ $inv->pipefyRequest?->title ?: ($inv->jn_number ?: '-') }}
                @if($inv->pipefyRequest?->project_name)
                  <br><small class="subtle">{{ $inv->pipefyRequest->project_name }}</small>
                @endif
              </td>
              <td>
                <span class="badge {{ $isRejected ? 'badge--rejected' : '' }}">{{ $inv->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>{{ $isRejected ? '-' : optional($inv->payment_date)->format('Y-m-d') }}</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>
                @if($canManage)
                  <form method="POST" action="{{ route('admin.invoices.status', $inv) }}" style="margin-bottom:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                    @csrf
                    <select name="status">
                      @foreach($statusOptions as $st)
                        <option value="{{ $st }}" @selected($inv->status === $st)>{{ $st }}</option>
                      @endforeach
                    </select>
                    <input name="note" placeholder="nota opcional" />
                    <button class="btn btn-secondary">Actualizar</button>
                  </form>

                  @if($canMarkPaid)
                    <form method="POST" action="{{ route('admin.invoices.status', $inv) }}" style="display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px;">
                      @csrf
                      <input type="hidden" name="status" value="paid">
                      <button class="btn" type="submit">Marcar como pagada</button>
                    </form>
                  @endif

                  <button
                    type="button"
                    class="btn btn-secondary"
                    style="margin-bottom:10px;"
                    onclick="document.getElementById('reject-invoice-dialog-{{ $inv->id }}').show()"
                  >
                    Rechazar con motivo
                  </button>

                  <sl-dialog id="reject-invoice-dialog-{{ $inv->id }}" label="Rechazar factura #{{ $inv->id }}">
                    <form id="reject-invoice-form-{{ $inv->id }}" class="js-reject-reason-form" method="POST" action="{{ route('admin.invoices.status', $inv) }}">
                      @csrf
                      <input type="hidden" name="status" value="rejected">
                      <input type="hidden" name="reject_invoice_id" value="{{ $inv->id }}">
                      <input type="hidden" name="note" class="js-reject-note-final" value="{{ old('reject_invoice_id') == $inv->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') == $inv->id && old('note_preset') === $reason)>{{ $reason }}</option>
                          @endforeach
                          <option value="__custom__" @selected(old('reject_invoice_id') == $inv->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') == $inv->id ? old('note_custom') : '' }}</textarea>
                      </div>
                    </form>

                    <sl-button
                      slot="footer"
                      variant="default"
                      onclick="document.getElementById('reject-invoice-dialog-{{ $inv->id }}').hide()"
                    >
                      Cancelar
                    </sl-button>
                    <sl-button slot="footer" variant="danger" type="submit" form="reject-invoice-form-{{ $inv->id }}">
                      Confirmar rechazo
                    </sl-button>
                  </sl-dialog>

                  @if($canUploadProof)
                    <form method="POST" action="{{ route('admin.invoices.payment_proof', $inv) }}" enctype="multipart/form-data" style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                      @csrf
                      <input type="file" name="payment_proof" required>
                      <button class="btn">Subir comprobante y pagar</button>
                    </form>
                  @elseif($paymentProof)
                    <span class="badge">Comprobante ya cargado</span>
                  @else
                    <span class="badge">Disponible después de aprobar</span>
                  @endif
                @else
                  <span class="badge">Solo lectura</span>
                @endif
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="8">No hay facturas para mostrar.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div style="margin-top:16px;">
      {{ $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;
    }
    .admin-invoices-page {
      width: 100%;
    }
    .admin-invoices-table-wrap {
      width: 100%;
      overflow-x: auto;
    }
    .admin-invoices-table-wrap table {
      min-width: 1180px;
    }
    .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;
    }
    @media (max-width: 900px) {
      .filters-grid--four {
        grid-template-columns: 1fr;
      }
    }
  </style>
@endpush