@extends('layouts.enterprise')

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

@section('content')
  <div class="card accountant-invoices-list-shell">
    <h1 class="page-title">Listado de facturas</h1>
    <p class="subtle">Gestión de facturas para carga de comprobantes y cambio a pagada.</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')
        || (($filters['from'] ?? '') !== '')
        || (($filters['to'] ?? '') !== '');
    @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.list') }}" 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')>Todos</option>
              @foreach(\App\Models\Invoice::STATUSES as $status)
                <option value="{{ $status }}" @selected($filters['status'] === $status)>{{ $status }}</option>
              @endforeach
            </select>
          </div>
          <div class="field">
            <label>Pago desde</label>
            <input type="date" name="from" value="{{ $filters['from'] }}">
          </div>
          <div class="field">
            <label>Pago 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('accountant.invoices.list') }}">Limpiar</a>
        </div>
      </form>
    </sl-details>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Proveedor</th>
          <th>RC</th>
          <th>JN</th>
          <th>Estatus</th>
          <th>Monto facturado</th>
          <th>Monto pendiente</th>
          <th>Fecha pago</th>
          <th>Comprobante</th>
          <th class="actions-header">Acciones</th>
        </tr>
      </thead>
      <tbody>
        @forelse($invoices as $invoice)
          @php
            $proof = $invoice->files->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;
            $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;
            $pendingAmount = $providerAmounts['pending_total_sale'] ?? null;
            $coveredAmount = $providerAmounts['invoiced_total'] ?? null;
            $canManagePayment = in_array($invoice->status, [
              \App\Models\Invoice::STATUS_APPROVED,
              \App\Models\Invoice::STATUS_SCHEDULED,
              \App\Models\Invoice::STATUS_PAID,
            ], true);
            $canUploadPaymentProof = $canManagePayment && !$proof;
            $stepOneLabel = 'Paso 1: Selecciona el comprobante';
            $stepTwoLabel = 'Paso 2: Subir comprobante y marcar pagada';
          @endphp
          <tr>
            <td>{{ $invoice->id }}</td>
            <td>{{ $invoice->company?->legal_name }}</td>
            <td>{{ $invoice->rc_number }}</td>
            <td>
              {{ $invoice->pipefyRequest?->title ?: ($invoice->jn_number ?: '-') }}
              @if($invoice->pipefyRequest?->project_name)
                <br><small class="subtle">{{ $invoice->pipefyRequest->project_name }}</small>
              @endif
            </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>${{ number_format((float) $invoice->total, 2) }}</td>
            <td>
              @if($pendingAmount !== null)
                <span class="badge {{ $pendingAmount > 0.01 ? '' : 'badge--ok' }}">
                  ${{ number_format((float) $pendingAmount, 2) }}
                </span>
                @if($coveredAmount !== null)
                  <small class="subtle" style="display:block; margin-top:4px;">
                    Acumulado: ${{ number_format((float) $coveredAmount, 2) }}
                  </small>
                @endif
              @else
                -
              @endif
            </td>
            <td>{{ $isRejected ? '-' : optional($invoice->payment_date)->format('Y-m-d') }}</td>
            <td>
              @if($isRejected)
                -
              @elseif($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 class="actions-cell actions-cell--wide">
              @if($isRejected)
                -
              @elseif($canManagePayment)
                <div class="actions-stack">
                  @if($canUploadPaymentProof)
                    <form method="POST" action="{{ route('accountant.invoices.payment_proof', $invoice) }}" enctype="multipart/form-data" class="actions-form js-proof-form" data-input-id="payment-proof-{{ $invoice->id }}" data-name-id="payment-proof-name-{{ $invoice->id }}">
                      @csrf
                      <div class="actions-file-picker">
                        <input
                          id="payment-proof-{{ $invoice->id }}"
                          type="file"
                          name="payment_proof"
                          class="actions-file-input-hidden js-proof-input"
                          data-name-target="payment-proof-name-{{ $invoice->id }}"
                          accept=".pdf,.jpg,.jpeg,.png"
                        >
                        <button type="button" class="btn btn-secondary actions-picker-btn" onclick="document.getElementById('payment-proof-{{ $invoice->id }}').click()">
                          {{ $stepOneLabel }}
                        </button>
                        <small class="actions-file-name" id="payment-proof-name-{{ $invoice->id }}">Ningún archivo seleccionado</small>
                      </div>
                      <button class="btn" type="submit">
                        {{ $stepTwoLabel }}
                      </button>
                    </form>
                  @else
                    <span class="badge">Comprobante ya cargado</span>
                  @endif
                </div>
              @else
                <span class="badge">Disponible al aprobar</span>
              @endif
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="10">No hay facturas registradas.</td>
          </tr>
        @endforelse
      </tbody>
    </table>

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

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.js-proof-input').forEach(function (input) {
        input.addEventListener('change', function () {
          const targetId = input.dataset.nameTarget;
          const label = targetId ? document.getElementById(targetId) : null;
          if (!label) return;

          label.style.color = 'var(--muted)';
          label.textContent = input.files && input.files.length > 0
            ? input.files[0].name
            : 'Ningún archivo seleccionado';
        });
      });

      document.querySelectorAll('.js-proof-form').forEach(function (form) {
        form.addEventListener('submit', function (event) {
          const inputId = form.dataset.inputId;
          const nameId = form.dataset.nameId;
          const input = inputId ? document.getElementById(inputId) : null;
          const label = nameId ? document.getElementById(nameId) : null;

          if (!input || !input.files || input.files.length === 0) {
            event.preventDefault();
            if (label) {
              label.textContent = 'Selecciona un archivo para continuar.';
              label.style.color = '#b91c1c';
            }
          }
        });
      });
    });
  </script>
@endpush

@push('styles')
  <style>
    .wrap {
      max-width: min(1820px, calc(100vw - 32px));
      padding-left: 16px;
      padding-right: 16px;
    }
    .accountant-invoices-list-shell {
      width: 100%;
    }
    .actions-header {
      text-align: center !important;
    }
    .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;
    }
    .pagination-wrap {
      margin-top: 14px;
    }
    .actions-cell {
      text-align: center !important;
      vertical-align: middle;
    }
    .actions-cell--wide {
      min-width: 360px;
    }
    .actions-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 0 auto;
    }
    .badge--ok {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    .actions-form {
      display: flex;
      gap: 8px;
      align-items: center !important;
      justify-content: center !important;
      flex-wrap: wrap;
      margin: 0;
      width: 100%;
    }
    .actions-file-picker {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .actions-file-input-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .actions-picker-btn {
      width: min(100%, 300px);
    }
    .actions-file-name {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.2;
      min-height: 1.1rem;
      display: block;
      text-align: center;
    }
    @media (max-width: 900px) {
      .filters-grid--four {
        grid-template-columns: 1fr;
      }
      .actions-cell--wide {
        min-width: 260px;
      }
    }
  </style>
@endpush