@extends('layouts.enterprise')

@section('title', 'Aprobación de complementos de pago')

@section('content')
  <div class="card">
    <h1 class="page-title">Aprobación de complementos de pago</h1>
    <p class="subtle">Revisión de complementos para facturas pagadas con Método PPD y Forma 99.</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['review_status'] ?? 'pending') !== 'pending');
    @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('accountant.invoices.complements') }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--two">
          <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 revisión</label>
            <select name="review_status">
              <option value="pending" @selected(($filters['review_status'] ?? 'pending') === 'pending')>Pendientes</option>
              <option value="rejected" @selected(($filters['review_status'] ?? '') === 'rejected')>Rechazados</option>
              <option value="approved" @selected(($filters['review_status'] ?? '') === 'approved')>Aprobados</option>
              <option value="all" @selected(($filters['review_status'] ?? '') === 'all')>Todos</option>
            </select>
          </div>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route('accountant.invoices.complements') }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Proveedor</th>
          <th>RC</th>
          <th>Cargado</th>
          <th>Factura</th>
          <th>Complemento</th>
          <th>Estatus</th>
          <th>Nota</th>
          <th class="actions-header">Acciones</th>
        </tr>
      </thead>
      <tbody>
        @forelse($invoices as $invoice)
          @php
            $invoicePdfFile = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_INVOICE_PDF);
            $invoiceXmlFile = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_INVOICE_XML);
            $complementXmlFile = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_PAYMENT_COMPLEMENT_XML);
            $complementPdfFile = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_PAYMENT_COMPLEMENT_PDF);
            $legacyComplementFile = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_PAYMENT_COMPLEMENT);
            $complementStatus = strtolower((string) ($invoice->payment_complement_status ?? 'pending'));
          @endphp
          <tr>
            <td>{{ $invoice->id }}</td>
            <td>{{ $invoice->company?->legal_name }}</td>
            <td>{{ $invoice->rc_number }}</td>
            <td>{{ optional($invoice->payment_complement_uploaded_at)->format('Y-m-d H:i') ?: '-' }}</td>
            <td>
              @if($invoicePdfFile)
                <a class="badge" href="{{ asset('storage/'.$invoicePdfFile->path) }}" target="_blank" rel="noopener">Ver factura PDF</a>
              @elseif($invoiceXmlFile)
                <a class="badge" href="{{ asset('storage/'.$invoiceXmlFile->path) }}" target="_blank" rel="noopener">Ver factura XML</a>
              @else
                <span class="badge">Sin archivo</span>
              @endif
            </td>
            <td>
              @if($complementXmlFile)
                <a class="badge" href="{{ asset('storage/'.$complementXmlFile->path) }}" target="_blank" rel="noopener">Ver XML</a>
              @endif
              @if($complementPdfFile)
                <a class="badge" href="{{ asset('storage/'.$complementPdfFile->path) }}" target="_blank" rel="noopener">Ver PDF</a>
              @endif
              @if(!$complementXmlFile && !$complementPdfFile && $legacyComplementFile)
                <a class="badge" href="{{ asset('storage/'.$legacyComplementFile->path) }}" target="_blank" rel="noopener">Ver complemento</a>
              @else
                @if(!$complementXmlFile && !$complementPdfFile && !$legacyComplementFile)
                  <span class="badge">Sin archivo</span>
                @endif
              @endif
            </td>
            <td>
              @if($complementStatus === 'approved')
                <span class="badge" style="background:#dcfce7; color:#166534; border:1px solid #86efac;">Aprobado</span>
              @elseif($complementStatus === 'rejected')
                <span class="badge badge--rejected">Rechazado</span>
              @else
                <span class="badge" style="background:#fff7ed; color:#b45309; border:1px solid #fed7aa;">Pendiente</span>
              @endif
            </td>
            <td>{{ $invoice->payment_complement_review_note ?: '-' }}</td>
            <td class="actions-cell">
              <div class="actions-stack">
                <form method="POST" action="{{ route('accountant.invoices.payment_complement_status', $invoice) }}" class="actions-form">
                  @csrf
                  <input type="hidden" name="payment_complement_status" value="approved">
                  <button class="btn" type="submit">Aprobar complemento</button>
                </form>

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

                <sl-dialog id="reject-complement-dialog-{{ $invoice->id }}" label="Rechazar complemento #{{ $invoice->id }}">
                  <form id="reject-complement-form-{{ $invoice->id }}" method="POST" action="{{ route('accountant.invoices.payment_complement_status', $invoice) }}">
                    @csrf
                    <input type="hidden" name="payment_complement_status" value="rejected">
                    <input type="hidden" name="reject_complement_invoice_id" value="{{ $invoice->id }}">
                    <div class="field">
                      <label>Motivo de rechazo</label>
                      <textarea name="payment_complement_note" rows="5" maxlength="1000" required placeholder="Describe por qué se rechaza este complemento.">{{ old('payment_complement_note') }}</textarea>
                    </div>
                  </form>

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

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

@push('scripts')
  @if($errors->any() && old('payment_complement_status') === 'rejected' && old('reject_complement_invoice_id'))
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const invoiceId = @json((string) old('reject_complement_invoice_id'));
        const dialog = document.getElementById(`reject-complement-dialog-${invoiceId}`);
        if (dialog && typeof dialog.show === 'function') {
          dialog.show();
        }
      });
    </script>
  @endif
@endpush

@push('styles')
  <style>
    .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--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .filters-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .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%;
    }
    .pagination-wrap {
      margin-top: 14px;
    }
    @media (max-width: 900px) {
      .filters-grid--two {
        grid-template-columns: 1fr;
      }
    }
  </style>
@endpush