@extends('layouts.enterprise')

@section('title', 'Ver pagos')

@section('content')
  <div class="card payments-full-width">
    <h1 class="page-title">Ver pagos</h1>
    <p class="subtle">Consulta de egresos con el módulo Pagos de la semana.</p>

    <h2 class="section-title">Pagos de la semana</h2>
    <p class="subtle">Rango: {{ $filters['date_from'] }} a {{ $filters['date_to'] }}</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'] ?? 'approved_scheduled') !== 'approved_scheduled')
        || !empty($filters['date_from'] ?? null)
        || !empty($filters['date_to'] ?? null);
    @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 o proveedor">
          </div>
          <div class="field">
            <label>Estatus</label>
            <select name="status">
              <option value="approved_scheduled" @selected($filters['status'] === 'approved_scheduled')>Aprobadas y programadas</option>
              <option value="{{ \App\Models\Invoice::STATUS_APPROVED }}" @selected($filters['status'] === \App\Models\Invoice::STATUS_APPROVED)>Solo aprobadas</option>
              <option value="{{ \App\Models\Invoice::STATUS_SCHEDULED }}" @selected($filters['status'] === \App\Models\Invoice::STATUS_SCHEDULED)>Solo programadas</option>
              <option value="paid" @selected($filters['status'] === 'paid')>Pagadas</option>
              <option value="all" @selected($filters['status'] === 'all')>Todas</option>
            </select>
          </div>
          <div class="field">
            <label>Pago desde</label>
            <input type="date" name="date_from" value="{{ $filters['date_from'] }}">
          </div>
          <div class="field">
            <label>Pago 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($indexRouteName) }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    <div class="payments-table-wrap">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Proveedor</th>
            <th>RC</th>
            <th>PROJECT NAME</th>
            <th>Estatus</th>
            <th>Fecha pago</th>
            <th>Factura</th>
            <th>Comprobante</th>
            <th>Total</th>
            <th>Monto facturado</th>
            <th>Por facturar</th>
            <th>Pagado</th>
            <th>Saldo pago</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
          @forelse($payments as $invoice)
          @php
            $invoicePdf = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_INVOICE_PDF);
            $proof = $invoice->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_PAYMENT_PROOF);
            $isRejected = $invoice->status === \App\Models\Invoice::STATUS_REJECTED;
            $providerFinancialKey = ($invoice->pipefy_request_id && $invoice->pipefy_request_provider_id)
              ? ((int) $invoice->pipefy_request_id.'|'.(int) $invoice->pipefy_request_provider_id)
              : null;
            $providerAmounts = $providerFinancialKey ? ($providerFinancials[$providerFinancialKey] ?? null) : null;
            $coveredAmount = (float) ($providerAmounts['invoiced_total'] ?? 0);
            $pendingAmount = (float) ($providerAmounts['pending_total_sale'] ?? 0);
            $paidAmount = $hasInvoicePayments
              ? (float) ($invoice->paid_total ?? 0)
              : ($invoice->status === \App\Models\Invoice::STATUS_PAID ? (float) $invoice->total : 0.0);
            if ($hasInvoicePayments && $paidAmount <= 0.009 && $invoice->status === \App\Models\Invoice::STATUS_PAID) {
              $paidAmount = (float) $invoice->total;
            }
            $pendingPayment = max(((float) $invoice->total) - $paidAmount, 0);
            $canRegisterPayment = in_array($invoice->status, [
              \App\Models\Invoice::STATUS_APPROVED,
              \App\Models\Invoice::STATUS_SCHEDULED,
              \App\Models\Invoice::STATUS_PAID,
            ], true) && $pendingPayment > 0.009;
          @endphp
            <tr>
            <td>{{ $invoice->id }}</td>
            <td>{{ $invoice->company?->legal_name }}</td>
            <td>{{ $invoice->rc_number }}</td>
            <td>
              <div>{{ $invoice->pipefyRequest?->project_name ?: '-' }}</div>
              <small class="subtle" style="margin:0;">{{ $invoice->pipefyRequest?->title ?: '-' }}</small>
            </td>
            <td><span class="badge {{ $isRejected ? 'badge--rejected' : '' }}">{{ $invoice->status }}</span></td>
            <td>{{ optional($invoice->payment_date)->format('Y-m-d') }}</td>
            <td>
              @if($invoicePdf)
                <a class="badge" href="{{ asset('storage/'.$invoicePdf->path) }}" target="_blank" rel="noopener">Ver factura</a>
              @else
                <span class="badge">Sin factura</span>
              @endif
            </td>
            <td>
              @if($proof)
                <a class="badge" href="{{ asset('storage/'.$proof->path) }}" target="_blank" rel="noopener">Ver comprobante</a>
              @else
                <span class="badge">Sin comprobante</span>
              @endif
            </td>
            <td>${{ number_format((float) $invoice->total, 2) }}</td>
            <td>
              @if($providerAmounts)
                ${{ number_format($coveredAmount, 2) }}
              @else
                -
              @endif
            </td>
            <td>
              @if($providerAmounts)
                <span class="badge {{ $pendingAmount > 0.01 ? '' : 'badge--ok' }}">
                  ${{ number_format($pendingAmount, 2) }}
                </span>
              @else
                -
              @endif
            </td>
            <td>${{ number_format($paidAmount, 2) }}</td>
            <td>
              <span class="badge {{ $pendingPayment > 0.01 ? '' : 'badge--ok' }}">
                ${{ number_format($pendingPayment, 2) }}
              </span>
            </td>
            <td class="actions-cell">
              @if(!$hasInvoicePayments)
                <span class="badge">Ejecuta migraciones</span>
              @elseif($canRegisterPayment)
                <button type="button" class="btn btn-secondary" onclick="document.getElementById('pay-invoice-dialog-{{ $invoice->id }}').show()">
                  Pagar
                </button>

                <sl-dialog id="pay-invoice-dialog-{{ $invoice->id }}" label="Registrar pago factura #{{ $invoice->id }}">
                  <form id="pay-invoice-form-{{ $invoice->id }}" method="POST" action="{{ route($payRouteName, $invoice) }}" enctype="multipart/form-data">
                    @csrf
                    <div class="field">
                      <label>Monto a pagar</label>
                      <input type="number" name="payment_amount" min="0.01" max="{{ number_format($pendingPayment, 2, '.', '') }}" step="0.01" required placeholder="0.00">
                      <small class="subtle">Saldo pendiente: ${{ number_format($pendingPayment, 2) }}</small>
                    </div>
                    <div class="field">
                      <label>Fecha de pago</label>
                      <input type="date" name="payment_date" value="{{ now()->toDateString() }}">
                    </div>
                    <div class="field"><br>
                      <sl-checkbox name="is_advance" value="1">Marcar como anticipo de pago</sl-checkbox>
                      <br><br>
                    </div>
                    <div class="field">
                      <label>Comprobante</label>
                      <div class="drop-upload js-drop-upload" tabindex="0" aria-label="Subir comprobante">
                        <input
                          id="payment-proof-{{ $invoice->id }}"
                          type="file"
                          name="payment_proof"
                          class="drop-upload__input js-drop-upload-input"
                          accept=".pdf,.jpg,.jpeg,.png"
                          required
                        >
                        <div class="drop-upload__content">
                          <sl-icon name="cloud-upload" label="Subir archivo"></sl-icon>
                          <div class="drop-upload__title">Arrastra y suelta tu comprobante aquí</div>
                          <div class="drop-upload__hint">PDF/JPG/PNG · máx. 10 MB</div>
                          <sl-button type="button" variant="default" size="small" class="js-drop-upload-browse">
                            Seleccionar archivo
                          </sl-button>
                          <small class="drop-upload__filename js-drop-upload-filename">Ningún archivo seleccionado</small>
                        </div>
                      </div>
                    </div>
                    <div class="field">
                      <label>Nota (opcional)</label>
                      <textarea name="payment_note" rows="3" maxlength="1000" placeholder="Detalle del pago parcial."></textarea>
                    </div>
                  </form>
                  <sl-button slot="footer" variant="default" onclick="document.getElementById('pay-invoice-dialog-{{ $invoice->id }}').hide()">Cancelar</sl-button>
                  <sl-button slot="footer" variant="primary" type="submit" form="pay-invoice-form-{{ $invoice->id }}">Guardar pago</sl-button>
                </sl-dialog>
              @else
                <span class="badge">Liquidada</span>
              @endif

              @if($hasInvoicePayments && $invoice->payments->isNotEmpty())
                <div class="subtle" style="margin-top:6px;">
                  Últimos pagos:
                  @foreach($invoice->payments as $movement)
                    <div>
                      ${{ number_format((float) $movement->amount, 2) }}
                      · {{ optional($movement->paid_at)->format('Y-m-d') ?: '-' }}
                      @if($movement->is_advance)
                        · <span class="badge">Anticipo</span>
                      @endif
                    </div>
                  @endforeach
                </div>
              @endif
            </td>
            </tr>
          @empty
            <tr>
              <td colspan="14">No hay pagos para mostrar.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div class="pay-totals">
      <span class="badge">Total con filtros: ${{ number_format((float) $totalByFilter, 2) }}</span>
      <span class="badge">Total búsqueda actual: ${{ number_format((float) $totalCurrent, 2) }}</span>
    </div>

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

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const dropZones = document.querySelectorAll('.js-drop-upload');

      dropZones.forEach(function (zone) {
        const input = zone.querySelector('.js-drop-upload-input');
        const browseButton = zone.querySelector('.js-drop-upload-browse');
        const filename = zone.querySelector('.js-drop-upload-filename');
        if (!input || !filename) return;

        const renderFileName = function () {
          if (input.files && input.files.length > 0) {
            filename.textContent = input.files[0].name;
            zone.classList.add('has-file');
          } else {
            filename.textContent = 'Ningún archivo seleccionado';
            zone.classList.remove('has-file');
          }
        };

        const pickFile = function () {
          input.click();
        };

        browseButton?.addEventListener('click', function (event) {
          event.preventDefault();
          pickFile();
        });

        zone.addEventListener('click', function (event) {
          if (event.target.closest('.js-drop-upload-browse')) return;
          pickFile();
        });

        zone.addEventListener('keydown', function (event) {
          if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            pickFile();
          }
        });

        zone.addEventListener('dragover', function (event) {
          event.preventDefault();
          zone.classList.add('is-dragover');
        });

        zone.addEventListener('dragleave', function (event) {
          if (!zone.contains(event.relatedTarget)) {
            zone.classList.remove('is-dragover');
          }
        });

        zone.addEventListener('drop', function (event) {
          event.preventDefault();
          zone.classList.remove('is-dragover');

          const files = event.dataTransfer?.files;
          if (!files || files.length === 0) return;

          const transfer = new DataTransfer();
          transfer.items.add(files[0]);
          input.files = transfer.files;
          renderFileName();
        });

        input.addEventListener('change', renderFileName);
        renderFileName();
      });
    });
  </script>
@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--four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .filters-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .pay-totals {
      margin-top: 12px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .payments-table-wrap {
      width: 100%;
      overflow-x: auto;
      overflow-y: visible;
    }
    .payments-table-wrap table {
      width: 100%;
      min-width: 1480px;
    }
    .actions-cell {
      min-width: 250px;
      vertical-align: middle;
      text-align: center;
    }
    .actions-cell > .btn {
      display: inline-flex;
      justify-content: center;
      white-space: nowrap;
      margin: 0 auto;
    }
    .drop-upload {
      position: relative;
      border: 1px dashed #9ca3af;
      border-radius: 12px;
      background: #f8fafc;
      padding: 12px;
      cursor: pointer;
      transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
      outline: none;
    }
    .drop-upload:hover,
    .drop-upload:focus-visible {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }
    .drop-upload.is-dragover {
      border-color: #2563eb;
      background: #dbeafe;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }
    .drop-upload.has-file {
      border-color: #16a34a;
      background: #f0fdf4;
    }
    .drop-upload__input {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      width: 100%;
      height: 100%;
    }
    .drop-upload__content {
      display: grid;
      gap: 6px;
      justify-items: center;
      text-align: center;
    }
    .drop-upload__content sl-icon {
      font-size: 1.2rem;
      color: #1d4ed8;
    }
    .drop-upload__title {
      font-weight: 600;
      color: #0f172a;
      line-height: 1.25;
    }
    .drop-upload__hint {
      font-size: 0.8rem;
      color: #64748b;
    }
    .drop-upload__filename {
      color: #475569;
      word-break: break-all;
    }
    .badge--ok {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    .pagination-wrap {
      margin-top: 14px;
    }
    @media (max-width: 900px) {
      .filters-grid--four {
        grid-template-columns: 1fr;
      }
    }
    @media (min-width: 1400px) {
      .wrap {
        max-width: 96vw;
      }
      .payments-table-wrap table {
        min-width: 0;
      }
    }
  </style>
@endpush