@extends('layouts.enterprise')

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

@section('content')
  <div class="bank-screen">
    <h1 class="page-title">Ver ingresos</h1>
    <p class="subtle">Comparativo de ingresos relacionados vs monto esperado con IVA (16%) por solicitud.</p>

    @php
      $indexRoute = request()->routeIs('accountant.*') ? route('accountant.incomes.summary') : route('admin.incomes.summary');
      $movementsRoute = request()->routeIs('accountant.*') ? 'accountant.incomes.index' : 'admin.incomes.index';
      $hasActiveFilters = (($filters['q'] ?? '') !== '')
        || (($filters['scope'] ?? 'related') !== 'related')
        || (($filters['comparison'] ?? 'all') !== 'all');
    @endphp

    @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

    <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="{{ $indexRoute }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--three">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Proyecto, JN, RC o ID">
          </div>
          <div class="field">
            <label>Alcance</label>
            <select name="scope">
              <option value="related" @selected(($filters['scope'] ?? 'related') === 'related')>Solo relacionadas</option>
              <option value="all" @selected(($filters['scope'] ?? 'related') === 'all')>Todas</option>
            </select>
          </div>
          <div class="field">
            <label>Comparativo</label>
            <select name="comparison">
              <option value="all" @selected(($filters['comparison'] ?? 'all') === 'all')>Todos</option>
              <option value="below" @selected(($filters['comparison'] ?? 'all') === 'below')>Ingresos por debajo</option>
              <option value="on_target" @selected(($filters['comparison'] ?? 'all') === 'on_target')>En objetivo</option>
              <option value="above" @selected(($filters['comparison'] ?? 'all') === 'above')>Ingresos por encima</option>
              <option value="no_target" @selected(($filters['comparison'] ?? 'all') === 'no_target')>Sin monto esperado</option>
            </select>
          </div>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ $indexRoute }}">Limpiar</a>
          <span class="badge">Solicitudes: {{ $requests->total() }}</span>
        </div>
      </form>
    </sl-details>

    @php
      $deltaTotal = $linkedTotal - $expectedTotal;
      $completionTotal = $expectedTotal > 0 ? (($linkedTotal / $expectedTotal) * 100) : 0;
    @endphp
    <div style="margin-bottom: 12px; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;">
      <span class="badge">Total relacionado: ${{ number_format($linkedTotal, 2) }}</span>
      <span class="badge">Total esperado: ${{ number_format($expectedTotal, 2) }}</span>
      <span class="badge">Diferencia: ${{ number_format($deltaTotal, 2) }}</span>
      <span class="badge">Avance: {{ number_format($completionTotal, 2) }}%</span>
      <span class="badge">Solicitudes: {{ number_format($requestsTotal) }}</span>
    </div>

    <div class="movements-table-wrap">
      <table class="movements-table">
        <thead>
          <tr>
            <th>Proyecto</th>
            <th>JN</th>
            <th>RC</th>
            <th>Esperado (con IVA)</th>
            <th>Ingresos relacionados</th>
            <th>Diferencia</th>
            <th>Avance</th>
            <th>Estatus</th>
            <th>Acción</th>
          </tr>
        </thead>
        <tbody>
          @forelse($requests as $req)
            @php
              $statusTolerance = 0.01;
              $expected = $req->expected_income_total !== null ? (float) $req->expected_income_total : null;
              $linked = (float) ($req->linked_income_total ?? 0);
              $difference = $expected !== null ? ($linked - $expected) : null;
              $progress = ($expected !== null && $expected > 0) ? (($linked / $expected) * 100) : null;
              $progressForBar = $progress !== null ? max(0, min(100, $progress)) : 0;
              $isComplete = $progress !== null && $progress >= 100;
              $statusLabel = $expected === null
                ? 'Sin objetivo'
                : ((abs($linked - $expected) <= $statusTolerance)
                    ? 'Completo'
                    : ($linked > $expected ? 'Excedido' : 'Incompleto'));
            @endphp
            <tr>
              <td class="cell-project">{{ $req->project_name ?: 'Sin PROJECT NAME' }}</td>
              <td>{{ $req->title ?: '-' }}</td>
              <td>{{ $req->rc_list ?: '-' }}</td>
              <td>{{ $expected !== null ? '$'.number_format($expected, 2) : '-' }}</td>
              <td>${{ number_format($linked, 2) }}</td>
              <td>{{ $difference !== null ? '$'.number_format($difference, 2) : '-' }}</td>
              <td style="min-width: 160px;">
                @if($progress !== null)
                  <div class="progress-wrap">
                    <div class="progress-track {{ $isComplete ? 'is-complete' : '' }}">
                      <span style="width: {{ $progressForBar }}%;"></span>
                    </div>
                    <small>{{ number_format($progress, 2) }}%</small>
                  </div>
                @else
                  -
                @endif
              </td>
              <td>
                <span class="badge {{ $statusLabel === 'Completo' ? 'badge-income' : ($statusLabel === 'Excedido' ? 'badge-warning' : '') }}">
                  {{ $statusLabel }}
                </span>
              </td>
              <td>
                <a
                  class="btn btn-secondary"
                  href="{{ route($movementsRoute, ['linked' => 'linked', 'request_id' => $req->id]) }}"
                >
                  Ver
                </a>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="9">No hay solicitudes para mostrar.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div style="margin-top:16px;">
      {{ $requests->onEachSide(1)->links('vendor.pagination.enterprise') }}
    </div>
  </div>
@endsection

@push('styles')
  <style>
    .wrap {
      max-width: 100%;
      width: 100%;
      padding-left: 16px;
      padding-right: 16px;
    }
    .bank-screen {
      width: 100%;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 20px;
    }
    .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--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .filters-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .movements-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .movements-table {
      min-width: 1180px;
      border: 0;
      margin: 0;
    }
    .cell-project {
      min-width: 220px;
      max-width: 340px;
      white-space: normal;
      word-break: break-word;
    }
    .progress-wrap {
      display: grid;
      gap: 4px;
    }
    .progress-track {
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
      border: 1px solid #cbd5e1;
    }
    .progress-track > span {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
    }
    .progress-track.is-complete > span {
      background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
    }
    .badge-warning {
      background: #fff7ed;
      color: #b45309;
      border: 1px solid #fed7aa;
    }
    .badge-income {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    @media (max-width: 900px) {
      .wrap {
        padding-left: 10px;
        padding-right: 10px;
      }
      .bank-screen {
        padding: 14px;
      }
      .filters-grid--three {
        grid-template-columns: 1fr;
      }
    }
  </style>
@endpush