<div>
    <div style="margin-bottom:1.75rem;">
        <h1 style="font-size:1.5rem;font-weight:700;color:#0f172a;margin:0;">Gesti¨®n de desembolsos</h1>
        <p style="font-size:13px;color:#64748b;margin:4px 0 0;">Administra los desembolsos de solicitudes aprobadas</p>
    </div>

    <div style="background:#fff;border-radius:1rem;border:1px solid #e8ecf4;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.04);">
        <div style="overflow-x:auto;">
            <table style="width:100%;border-collapse:collapse;font-size:13.5px;">
                <thead>
                    <tr style="background:#f8fafc;border-bottom:1px solid #e8ecf4;">
                        <th style="padding:0.875rem 1rem;text-align:left;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.07em;">Radicado</th>
                        <th style="padding:0.875rem 1rem;text-align:left;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.07em;">Asociado</th>
                        <th style="padding:0.875rem 1rem;text-align:right;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.07em;">Monto aprobado</th>
                        <th style="padding:0.875rem 1rem;text-align:right;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.07em;">Desembolsado</th>
                        <th style="padding:0.875rem 1rem;text-align:center;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.07em;">Estado</th>
                        <th style="padding:0.875rem 1rem;text-align:center;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.07em;">Acci¨®n</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($solicitudes as $sol)
                    @php $totalDesembolsado = $sol->desembolsos->sum('monto'); $pct = $sol->monto_solicitado > 0 ? min(100, round($totalDesembolsado / $sol->monto_solicitado * 100)) : 0; @endphp
                    <tr style="border-bottom:1px solid #f1f5f9;" onmouseover="this.style.background='#fafbff'" onmouseout="this.style.background=''">
                        <td style="padding:0.875rem 1rem;">
                            <span style="font-family:monospace;font-weight:700;font-size:12.5px;color:#002d6b;background:#eef3fc;padding:2px 8px;border-radius:0.375rem;">
                                {{ $sol->radicado }}
                            </span>
                        </td>
                        <td style="padding:0.875rem 1rem;font-weight:600;color:#1e293b;">{{ $sol->asociado->name }}</td>
                        <td style="padding:0.875rem 1rem;text-align:right;font-weight:600;color:#1e293b;">
                            ${{ number_format($sol->monto_solicitado, 0, ',', '.') }}
                        </td>
                        <td style="padding:0.875rem 1rem;text-align:right;">
                            <div style="font-weight:600;color:#15803d;">${{ number_format($totalDesembolsado, 0, ',', '.') }}</div>
                            <div style="margin-top:4px;background:#e2e8f0;border-radius:999px;height:4px;min-width:80px;">
                                <div style="background:#15803d;height:4px;border-radius:999px;width:{{ $pct }}%;"></div>
                            </div>
                            <div style="font-size:11px;color:#94a3b8;margin-top:2px;">{{ $pct }}%</div>
                        </td>
                        <td style="padding:0.875rem 1rem;text-align:center;">
                            <span class="badge-{{ $sol->estado->color() }}"
                                  style="display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;">
                                {{ $sol->estado->label() }}
                            </span>
                        </td>
                        <td style="padding:0.875rem 1rem;text-align:center;">
                            @if(!$sol->rechazada())
                            <button wire:click="seleccionar({{ $sol->id }})"
                                style="background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;font-size:12px;font-weight:600;padding:0.4rem 0.875rem;border-radius:0.5rem;cursor:pointer;transition:all 0.15s;">
                                + Desembolso
                            </button>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" style="text-align:center;padding:3.5rem;color:#94a3b8;font-size:13.5px;">
                            No hay solicitudes aprobadas pendientes de desembolso
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Modal desembolso --}}
    @if($solicitudSeleccionada)
    <div style="position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem;">
        <div style="background:#fff;border-radius:1.25rem;box-shadow:0 25px 60px rgba(0,0,0,0.25);width:100%;max-width:460px;overflow:hidden;">
            <div style="padding:1.25rem 1.5rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;">
                <h2 style="font-size:15px;font-weight:700;color:#0f172a;margin:0;">Registrar desembolso</h2>
                <button wire:click="$set('solicitudSeleccionada', null)"
                    style="background:none;border:none;cursor:pointer;color:#94a3b8;font-size:1.25rem;line-height:1;padding:0.25rem;">¡Á</button>
            </div>
            <div style="padding:1.5rem;">
                <div style="display:flex;flex-direction:column;gap:1rem;">
                    <div>
                        <label style="display:block;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Monto (COP) *</label>
                        <input wire:model.lazy="monto" type="number" step="1000"
                            style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.7rem 0.875rem;font-size:13.5px;outline:none;"
                            placeholder="0">
                        @error('monto') <p style="color:#dc2626;font-size:12px;margin:4px 0 0;">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label style="display:block;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Fecha desembolso *</label>
                        <input wire:model="fecha_desembolso" type="date"
                            style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.7rem 0.875rem;font-size:13.5px;outline:none;">
                    </div>
                    <div>
                        <label style="display:block;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Medio de pago *</label>
                        <select wire:model="medio_pago"
                            style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.7rem 0.875rem;font-size:13.5px;outline:none;background:#fff;">
                            <option value="transferencia">Transferencia bancaria</option>
                            <option value="cheque">Cheque</option>
                            <option value="efectivo">Efectivo</option>
                        </select>
                    </div>
                    <div>
                        <label style="display:block;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">N¡ã comprobante</label>
                        <input wire:model.lazy="numero_comprobante" type="text"
                            style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.7rem 0.875rem;font-size:13.5px;outline:none;"
                            placeholder="Opcional">
                    </div>
                    <div>
                        <label style="display:block;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Observaciones</label>
                        <textarea wire:model.lazy="observaciones" rows="2"
                            style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.7rem 0.875rem;font-size:13.5px;outline:none;resize:vertical;font-family:inherit;"></textarea>
                    </div>
                </div>
                <div style="display:flex;gap:0.75rem;margin-top:1.5rem;">
                    <button wire:click="$set('solicitudSeleccionada', null)"
                        style="flex:1;border:1.5px solid #e2e8f0;background:#fff;color:#475569;border-radius:0.625rem;padding:0.7rem;font-size:13.5px;font-weight:600;cursor:pointer;">
                        Cancelar
                    </button>
                    <button wire:click="registrarDesembolso"
                        style="flex:1;background:#002d6b;color:#fff;border:none;border-radius:0.625rem;padding:0.7rem;font-size:13.5px;font-weight:600;cursor:pointer;">
                        Registrar desembolso
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endif

<style>
.badge-blue    { background:#dbeafe; color:#1d4ed8; }
.badge-gray    { background:#f1f5f9; color:#475569; }
.badge-yellow  { background:#fef9c3; color:#854d0e; }
.badge-green   { background:#dcfce7; color:#15803d; }
.badge-red     { background:#fee2e2; color:#b91c1c; }
.badge-indigo  { background:#e0e7ff; color:#3730a3; }
.badge-orange  { background:#ffedd5; color:#c2410c; }
.badge-teal    { background:#ccfbf1; color:#0f766e; }
.badge-emerald { background:#d1fae5; color:#065f46; }
.badge-cyan    { background:#cffafe; color:#0e7490; }
.badge-purple  { background:#f3e8ff; color:#7e22ce; }
</style>
</div>