@extends('adminlte::page')

@section('title', 'Solicitudes de Pago')

@section('content_header')
    <h1>Solicitudes de Pago</h1>
@stop

@section('content')
<div class="card card-outline">
    <div class="card-header">
        <form method="GET" action="{{ route('payment-requests.index') }}" class="form-inline">
            <div class="form-group mr-2">
                <label for="company_id" class="mr-2">Compañía</label>
                <select name="company_id" id="company_id" class="form-control">
                    <option value="">Todas</option>
                    @foreach($companies as $c)
                        <option value="{{ $c->company_id }}" {{ (int)($filters['company_id'] ?? 0) === (int)$c->company_id ? 'selected' : '' }}>
                            {{ $c->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group mr-2">
                <label for="supplier_id" class="mr-2">Proveedor</label>
                <select name="supplier_id" id="supplier_id" class="form-control">
                    <option value="">Todos</option>
                    @foreach($suppliers as $s)
                        <option value="{{ $s->supplier_id }}" {{ (int)($filters['supplier_id'] ?? 0) === (int)$s->supplier_id ? 'selected' : '' }}>
                            {{ $s->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group mr-2">
                <label for="payment_status_id" class="mr-2">Estatus pago</label>
                <select name="payment_status_id" id="payment_status_id" class="form-control">
                    <option value="">Todos</option>
                    @foreach($paymentStatuses as $ps)
                        <option value="{{ $ps->payment_status_id }}"
                            {{ (int)($filters['payment_status_id'] ?? 0) === (int)$ps->payment_status_id ? 'selected' : '' }}>
                            {{ $ps->description }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group mr-2">
                <input type="text" name="q" class="form-control" placeholder="Buscar folio/UUID/factura" value="{{ $filters['q'] ?? '' }}">
            </div>

            <button type="submit" class="btn btn-primary mr-2">
                <i class="fas fa-search"></i> Filtrar
            </button>
            <a href="{{ route('payment-requests.index') }}" class="btn btn-default">Limpiar</a>

            @can('payment_request.create')
            <a href="{{ route('payment-requests.create') }}" class="btn btn-success ml-auto">
                <i class="fas fa-plus-circle"></i> Nueva solicitud
            </a>
            @endcan
        </form>
    </div>

    <div class="card-body">
        <x-adminlte-datatable id="tblPaymentRequests" :heads="$heads" :config="$config" 
            striped
            hoverable
            bordered
            with-buttons>
            @php
                // Sugerencia de colores (Bootstrap/AdminLTE badges)
                $approvalBadgeMap = [
                    'borrador'             => 'badge-secondary',
                    'enviado a aprobación' => 'badge-info',
                    'aprobado'             => 'badge-success',
                    'rechazado'            => 'badge-danger',
                ];
                $paymentBadgeMap = [
                    'pendiente'            => 'badge-warning',
                    'programado'           => 'badge-primary',
                    'parcialmente pagado'  => 'badge-info',
                    'pagado'               => 'badge-success',
                    'cancelado'            => 'badge-dark',
                ];
            @endphp
            @foreach($rows as $r)
                <tr>
                    <td>{{ $r->request_folio . $r->payment_request_id }}</td>
                    <td>{{ $r->company->name ?? '-' }}</td>
                    <td>{{ $r->supplier->name ?? '-' }}</td>
                    <td>
                        {{ $r->invoice_number ?? '-' }}
                        @if($r->invoice_uuid)
                            <small class="text-muted d-block">{{ $r->invoice_uuid }}</small>
                        @endif
                    </td>
                    <td>{{ $r->currency->code ?? '-' }}</td>
                    <td class="text-right">{{ number_format($r->amount_original, 2) }}</td>
                    <td class="text-right">{{ number_format($r->exchange_rate, 4) }}</td>
                    <td class="text-right">{{ number_format($r->amount_mxn, 2) }}</td>
                    {{-- 9 Aprobación --}}
                    @php
                    $apprText = trim(($r->approvalStatus->description ?? '-'));
                    $apprKey  = mb_strtolower($apprText, 'UTF-8');
                    $apprCls  = $approvalBadgeMap[$apprKey] ?? 'badge-light';
                    @endphp
                    {{-- 9 Aprobación --}}
                    @can('payment_request.update')
                    <td>
                        <select class="form-control form-control-sm js-approval-select"
                                data-id="{{ $r->payment_request_id }}"
                                data-url="{{ route('payment_requests.update_approval_status', $r->payment_request_id) }}">
                            @foreach($approvalStatuses as $st)
                                <option value="{{ $st->approval_status_id }}"
                                    {{ (int)$r->approval_status_id === (int)$st->approval_status_id ? 'selected' : '' }}>
                                    {{ $st->description }}
                                </option>
                            @endforeach
                        </select>
                    </td>
                    @else
                        @php
                            $apprText = trim(($r->approvalStatus->description ?? '-'));
                            $apprKey  = mb_strtolower($apprText, 'UTF-8');
                            $apprCls  = $approvalBadgeMap[$apprKey] ?? 'badge-light';
                        @endphp
                        <td><span class="badge {{ $apprCls }}">{{ $apprText }}</span></td>
                    @endcan

                    {{-- 10 Pago --}}
                    @php
                    $payText = trim(($r->paymentStatus->description ?? '-'));
                    $payKey  = mb_strtolower($payText, 'UTF-8');
                    $payCls  = $paymentBadgeMap[$payKey] ?? 'badge-light';
                    @endphp
                    <td><span class="badge {{ $payCls }}">{{ $payText }}</span></td>
                    {{-- 11 Programado --}}
                    @can('payment_request.update')
                    <td>
                    <input
                        type="date"
                        class="form-control form-control-sm js-scheduled-date"
                        id="scheduled-{{ $r->payment_request_id }}"
                        name="scheduled_payment_date"
                        value="{{ optional($r->scheduled_payment_date)->format('Y-m-d') }}"
                        data-url="{{ route('payment_requests.update_scheduled_date', $r->payment_request_id) }}"
                    >
                    </td>
                    @else
                    <td>{{ optional($r->scheduled_payment_date)->format('Y-m-d') }}</td>
                    @endcan

                    <td>
                        @can('payment_request.update')
                        <a href="{{ route('payment-requests.edit', $r->payment_request_id) }}"
                           class="btn btn-xs btn-primary">
                            <i class="fas fa-edit"></i>
                        </a>
                        @endcan
                    </td>
                </tr>
            @endforeach
        </x-adminlte-datatable>
        @can('payment_request.update')
        <template id="tpl-approval-status-options">
        @foreach ($approvalStatuses as $st)
            <option value="{{ $st->approval_status_id }}"
                    data-badge="{{ $st->badge_class ?? 'bg-secondary' }}">
            {{ $st->name }}
            </option>
        @endforeach
        </template>
        @endcan
        <div class="mt-3">
            {{ $rows->links() }}
        </div>
    </div>
</div>
@stop

@push('css')
<style>
/* ===== Estilos para DataTable #tblPaymentRequests ===== */

/* Base blanca + redondeado (con/sin scroll) */
#tblPaymentRequests_wrapper .dataTables_scroll,
#tblPaymentRequests_wrapper .dataTables_scrollHead,
#tblPaymentRequests_wrapper .dataTables_scrollBody,
#tblPaymentRequests_wrapper table.dataTable,
table#tblPaymentRequests.dataTable {
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Encabezados: fondo #F6F7F9, texto #8D8E96, solo borde izquierdo + borde inferior sutil */
#tblPaymentRequests_wrapper table.dataTable thead th,
table#tblPaymentRequests.dataTable thead th {
  background: #F6F7F9 !important;
  color: #8D8E96 !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-left: 1px solid #e0e0e0 !important; /* solo el izquierdo visible */
}
#tblPaymentRequests_wrapper table.dataTable thead th:first-child,
table#tblPaymentRequests.dataTable thead th:first-child {
  border-left: none !important; /* opcional: sin borde en el primero */
}

/* Filas (td): fondo blanco, solo borde inferior, SIN laterales, texto NEGRO */
#tblPaymentRequests_wrapper table.dataTable tbody td,
table#tblPaymentRequests.dataTable tbody td {
  background: #fff !important;
  color: #000 !important; /* texto negro */
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #e0e0e0 !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

/* Hover activo y visible: aplica al tr y a sus celdas */
#tblPaymentRequests_wrapper table.dataTable tbody tr:hover,
table#tblPaymentRequests.dataTable tbody tr:hover {
  background-color: #F6F7F9 !important;
}
#tblPaymentRequests_wrapper table.dataTable tbody tr:hover > td,
table#tblPaymentRequests.dataTable tbody tr:hover > td {
  background-color: #F6F7F9 !important;
}

/* Mantener blanco uniforme cuando no hay hover (sin zebra) */
#tblPaymentRequests_wrapper table.dataTable.stripe tbody tr.odd,
#tblPaymentRequests_wrapper table.dataTable.display tbody tr.odd,
table#tblPaymentRequests.dataTable.stripe tbody tr.odd,
table#tblPaymentRequests.dataTable.display tbody tr.odd {
  background-color: #fff !important;
}

/* Badges como “pill” (solo forma, colores los pone Bootstrap/AdminLTE por clase) */
#tblPaymentRequests_wrapper .badge,
table#tblPaymentRequests .badge {
  border-radius: 999px !important;
  padding: .35rem .6rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Importante: NO tocamos .dt-buttons ni .btn para dejar export igual */
</style>
@endpush
@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
(function () {
  const csrf = @json(csrf_token());

  // === APROBACIÓN: <select class="js-approval-select">
  console.log('[approval] script loaded');
  document.addEventListener('change', async function (e) {
    const sel = e.target.closest('.js-approval-select');
    if (!sel) return;

    console.log('[approval] change on', sel.id || '(no-id)', '->', sel.value);
    const url = sel.dataset.url;
    const val = sel.value;
    if (!url) { console.error('[approval] falta data-url'); return; }

    sel.disabled = true;
    try {
      const resp = await fetch(url, {
        method: 'PATCH',
        headers: {
          'X-CSRF-TOKEN': csrf,
          'X-Requested-With': 'XMLHttpRequest',
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ approval_status_id: Number(val) })
      });
      const data = await resp.json().catch(() => ({}));
      if (!resp.ok || data.ok === false) throw new Error(data.message || ('HTTP ' + resp.status));

      Swal.fire({ icon: 'success', title: '¡Actualizado!', text: data.message ?? 'Cambios guardados.', timer: 1600, showConfirmButton: false });
    } catch (err) {
      console.error('[approval] error', err);
      Swal.fire({ icon: 'error', title: 'Error', text: err?.message || 'Ocurrió un problema al actualizar el estatus.' });
    } finally {
      sel.disabled = false;
    }
  });

  // === PROGRAMADO: <input type="date" class="js-scheduled-date">
  console.log('[scheduled] script loaded');
  document.addEventListener('change', async function (e) {
    const input = e.target.closest('.js-scheduled-date');
    if (!input) return;

    console.log('[scheduled] change', input.id || '(no-id)', '->', input.value);
    const url = input.dataset.url;
    if (!url) { console.error('[scheduled] falta data-url'); return; }

    const raw = (input.value || '').trim();
    const payload = { scheduled_payment_date: raw === '' ? null : raw };

    input.disabled = true;
    try {
      const resp = await fetch(url, {
        method: 'PATCH',
        headers: {
          'X-CSRF-TOKEN': csrf,
          'X-Requested-With': 'XMLHttpRequest',
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });
      const data = await resp.json().catch(() => ({}));
      if (!resp.ok || data.ok === false) throw new Error(data.message || ('HTTP ' + resp.status));

      Swal.fire({ icon: 'success', title: '¡Actualizado!', text: data.message ?? 'Cambios guardados.', timer: 1600, showConfirmButton: false });
    } catch (err) {
      console.error('[scheduled] error', err);
      Swal.fire({ icon: 'error', title: 'Error', text: err?.message || 'No se pudo actualizar la fecha programada.' });
    } finally {
      input.disabled = false;
    }
  });
})();
</script>
@endsection