@extends('layouts.panel')

@section('title', 'Gestión de Pagos')

@section('content')
<div class="max-w-7xl mx-auto fade-in pb-12">
    
    {{-- Header Navigation --}}
    <div class="flex items-center justify-between mb-8">
        <div class="flex items-center gap-4">
            <a href="{{ route('manager.staff') }}" class="p-2 -ml-2 hover:bg-slate-100 rounded-full transition-colors text-slate-600">
                <i data-lucide="arrow-left" class="w-6 h-6"></i>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-slate-900">Gestión de Pagos</h1>
                <p class="text-sm text-slate-500">Administra sueldos y adelantos.</p>
            </div>
        </div>
        <button onclick="openHistory()" class="bg-red-50 text-red-600 hover:bg-red-100 px-5 py-2.5 rounded-xl text-sm font-bold transition-colors flex items-center gap-2 border border-red-100">
            <i data-lucide="history" class="w-4 h-4"></i> Historial de Pagos
        </button>
    </div>

    {{-- Loading State --}}
    <div id="loadingState" class="text-center py-20">
        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-slate-900 mx-auto"></div>
        <p class="mt-4 text-slate-500">Cargando perfil...</p>
    </div>

    {{-- Content --}}
    <div id="paymentContent" class="hidden grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        {{-- COL 1: Perfil (Sticky en Desktop) --}}
        <div class="lg:col-span-3 lg:sticky lg:top-8 space-y-6">
            <div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 text-center">
                <div class="relative inline-block mb-4">
                    <img id="profileImage" src="https://ui-avatars.com/api/?name=User&background=cbd5e1&color=64748b" 
                         class="w-32 h-32 rounded-full border-4 border-slate-50 shadow-lg object-cover bg-slate-200">
                    <div class="absolute bottom-1 right-1 w-6 h-6 bg-green-500 border-4 border-white rounded-full"></div>
                </div>
                <h2 id="profileName" class="text-xl font-black text-slate-900 leading-tight px-2 uppercase mb-2">
                    CARGANDO...
                </h2>
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 text-slate-600 text-xs font-bold uppercase tracking-wider mb-4">
                    <span id="profileRole">STAFF</span>
                </div>
                
                <div class="grid grid-cols-2 gap-2 text-left">
                    <div class="bg-slate-50 p-3 rounded-xl border border-slate-100">
                        <p class="text-[10px] text-slate-400 font-bold uppercase">Ingreso</p>
                        <p id="profileJoined" class="text-xs font-bold text-slate-700">--/--/--</p>
                    </div>
                    <div class="bg-slate-50 p-3 rounded-xl border border-slate-100">
                        <p class="text-[10px] text-slate-400 font-bold uppercase">Estado</p>
                        <span class="text-xs font-bold text-emerald-600">Activo</span>
                    </div>
                </div>
            </div>
            
            {{-- Period Card (Movido a izquierda para visibilidad rapida) --}}
            <div class="bg-indigo-900 rounded-3xl p-6 shadow-lg shadow-indigo-200 text-white relative overflow-hidden group">
                {{-- Botón Editar Posicionado en la esquina superior derecha --}}
                <button onclick="openCalendar()" class="absolute top-4 right-4 z-20 w-10 h-10 bg-white/10 hover:bg-white/20 rounded-2xl flex items-center justify-center transition-all hover:rotate-12 hover:scale-110 active:scale-90 border border-white/10 shadow-lg" title="Editar Periodo">
                    <i data-lucide="pencil" class="w-5 h-5 text-white"></i>
                </button>

                <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                    <i data-lucide="calendar" class="w-24 h-24"></i>
                </div>
                <p class="text-indigo-200 text-xs font-bold uppercase tracking-wider mb-1">Periodo Actual</p>
                <div class="flex items-center justify-between mb-4">
                    <span id="periodDates" class="text-lg font-bold">01/02 - 28/02</span>
                </div>
                
                <div class="space-y-1">
                    <p class="text-indigo-200 text-xs font-medium">Sueldo Base Mensual</p>
                    <p id="baseSalary" class="text-3xl font-black">S/ 0.00</p>
                </div>
            </div>
        </div>

        {{-- COL 2: Detalles (Bonos y Descuentos) --}}
        <div class="lg:col-span-5 space-y-6">
            
            {{-- Bonos --}}
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                <div class="p-6 border-b border-slate-50 flex justify-between items-center bg-orange-50/30">
                    <h3 class="font-bold text-slate-800 flex items-center gap-2">
                        <div class="p-1.5 bg-orange-100 text-orange-600 rounded-lg">
                            <i data-lucide="trending-up" class="w-4 h-4"></i>
                        </div>
                        Bonos y Comisiones
                    </h3>
                    <button class="text-orange-600 hover:bg-orange-50 text-xs font-bold px-3 py-1.5 rounded-lg border border-orange-200 transition-colors flex items-center gap-1">
                        <i data-lucide="plus" class="w-3.5 h-3.5"></i> Añadir
                    </button>
                </div>
                <div class="p-8 text-center bg-slate-50/50">
                    <div class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3 text-slate-300">
                        <i data-lucide="award" class="w-6 h-6"></i>
                    </div>
                    <p class="text-sm text-slate-500 font-medium">Sin bonos registrados</p>
                    <p class="text-xs text-slate-400">Este periodo no tiene comisiones extra.</p>
                </div>
            </div>

            {{-- Descuentos --}}
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                <div class="p-6 border-b border-slate-50 flex justify-between items-center bg-red-50/30">
                    <h3 class="font-bold text-slate-800 flex items-center gap-2">
                         <div class="p-1.5 bg-red-100 text-red-600 rounded-lg">
                            <i data-lucide="trending-down" class="w-4 h-4"></i>
                        </div>
                        Descuentos y Adelantos
                    </h3>
                    <button class="text-red-600 hover:bg-red-50 text-xs font-bold px-3 py-1.5 rounded-lg border border-red-200 transition-colors flex items-center gap-1">
                        <i data-lucide="minus" class="w-3.5 h-3.5"></i> Añadir
                    </button>
                </div>
                 <div class="p-8 text-center bg-slate-50/50">
                    <div class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3 text-slate-300">
                        <i data-lucide="receipt" class="w-6 h-6"></i>
                    </div>
                    <p class="text-sm text-slate-500 font-medium">Sin descuentos</p>
                    <p class="text-xs text-slate-400">No hay adelantos ni faltas registradas.</p>
                </div>
            </div>

        </div>

        {{-- COL 3: Panel de Pago (Checkout) --}}
        <div class="lg:col-span-4 space-y-6">
            
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-6">
                <h3 class="font-bold text-slate-800 mb-4 text-sm uppercase tracking-wide">Resumen y Pago</h3>
                
                {{-- Payment Methods --}}
                <div class="grid grid-cols-2 gap-3 mb-6">
                    <button onclick="selectMethod('BCP', this)" class="payment-method-btn bg-[#002A8D] hover:bg-[#002270] text-white font-bold py-3 px-4 rounded-xl shadow-lg shadow-blue-50 transition-all hover:-translate-y-0.5 flex flex-col items-center justify-center gap-1 opacity-80">
                        <span class="text-xs opacity-80 font-normal">Abrir App</span>
                        <span>BCP</span>
                    </button>
                    <button onclick="selectMethod('YAPE', this)" class="payment-method-btn bg-[#742284] hover:bg-[#601b6d] text-white font-bold py-3 px-4 rounded-xl shadow-lg shadow-purple-50 transition-all hover:-translate-y-0.5 flex flex-col items-center justify-center gap-1 ring-2 ring-offset-2 ring-indigo-500">
                        <span class="text-xs opacity-80 font-normal">Abrir App</span>
                        <span>Yape</span>
                    </button>
                </div>

                {{-- Upload Area --}}
                <div class="border-2 border-dashed border-slate-200 rounded-2xl p-6 text-center bg-slate-50 hover:bg-slate-100 transition-colors cursor-pointer group mb-6 relative overflow-hidden">
                    <input type="file" name="comprobante" accept="image/*,.pdf" class="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10" />
                    <div class="group-hover:scale-105 transition-transform duration-300">
                        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mx-auto mb-2 shadow-sm">
                            <i data-lucide="cloud-upload" class="w-5 h-5 text-indigo-500"></i>
                         </div>
                        <h4 class="text-sm font-bold text-slate-700">Subir Comprobante</h4>
                        <p class="text-[10px] text-slate-400">JPG, PNG o PDF (Max 2MB)</p>
                    </div>
                </div>

                {{-- Totals --}}
                <div class="bg-slate-50 rounded-xl p-4 border border-slate-100 mb-6">
                    <div class="flex justify-between items-center mb-2 text-sm">
                        <span class="text-slate-500">Sueldo Base</span>
                        <span class="font-bold text-slate-700" id="summaryBase">S/ 0.00</span>
                    </div>
                    <div class="flex justify-between items-center mb-2 text-sm">
                        <span class="text-slate-500">Bonos</span>
                        <span class="font-bold text-emerald-600">+ S/ 0.00</span>
                    </div>
                    <div class="flex justify-between items-center mb-4 text-sm">
                        <span class="text-slate-500">Descuentos</span>
                        <span class="font-bold text-red-600">- S/ 0.00</span>
                    </div>
                    <div class="border-t border-slate-200 pt-3 flex justify-between items-end">
                        <div>
                            <span class="text-xs font-bold text-slate-400 uppercase">Total Neto</span>
                        </div>
                        <span id="totalNeto" class="text-2xl font-black text-slate-900">S/ 0.00</span>
                    </div>
                </div>

                {{-- Actions --}}
                <button id="btnConfirmar" onclick="confirmarPago()" class="w-full bg-[#10b981] hover:bg-[#059669] text-white font-bold py-4 rounded-xl shadow-lg shadow-emerald-100 flex items-center justify-center gap-2 transition-all hover:shadow-xl hover:-translate-y-0.5 mb-3 group">
                    <div class="bg-white/20 rounded-full p-1 group-hover:scale-110 transition-transform">
                        <i data-lucide="check" class="w-4 h-4 text-white stroke-[3]"></i>
                    </div>
                    CONFIRMAR PAGO
                </button>
                 <button class="w-full bg-white hover:bg-slate-50 text-slate-600 border border-slate-200 font-bold py-3 rounded-xl flex items-center justify-center gap-2 transition-colors">
                    <i data-lucide="send" class="w-4 h-4"></i>
                    Reenviar Comprobante
                </button>

            </div>
        </div>

    </div>
</div>

{{-- Modal Calendario (Range Picker) --}}
<div id="modalCalendar" class="fixed inset-0 z-[70] flex items-center justify-center bg-slate-900/60 backdrop-blur-sm hidden fade-in">
    <div class="bg-[#F3F4F6] w-full max-w-sm rounded-[2.5rem] shadow-2xl overflow-hidden p-8 border border-white/50">
        <div class="mb-1">
            <span class="text-xs font-bold text-slate-500 tracking-tight">Select range</span>
        </div>
        
        <div class="flex items-center justify-between mb-8">
            <h3 id="calendarRangeDisplay" class="text-3xl font-bold text-[#1F2937] tracking-tighter">Jan 30 – Feb 28</h3>
            <div class="text-[#374151]">
                <i data-lucide="calendar" class="w-6 h-6"></i>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-10">
            <div class="relative">
                <label class="absolute -top-2 left-3 px-1 bg-[#F3F4F6] text-[10px] font-bold text-red-500 z-10">Start Date</label>
                <div class="bg-white rounded-xl p-3 border-2 border-red-500 shadow-sm">
                    <input type="text" id="startDateInput" class="w-full text-sm font-bold text-slate-700 bg-transparent border-none focus:ring-0 p-0" value="01/30/2026">
                </div>
            </div>
            <div class="relative">
                <label class="absolute -top-2 left-3 px-1 bg-[#F3F4F6] text-[10px] font-bold text-slate-400 z-10">End Date</label>
                <div class="bg-white rounded-xl p-3 border border-slate-200 shadow-sm opacity-60">
                    <input type="text" id="endDateInput" class="w-full text-sm font-bold text-slate-400 bg-transparent border-none focus:ring-0 p-0" value="02/28/2026">
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-8 items-center pr-2">
            <button onclick="closeCalendar()" class="text-red-500 font-bold text-sm hover:scale-105 transition-transform">Cancel</button>
            <button onclick="savePeriod()" class="text-red-500 font-black text-sm hover:scale-105 transition-transform uppercase">OK</button>
        </div>
    </div>
</div>

{{-- Modal Historial --}}
<div id="modalHistory" class="fixed inset-0 z-[60] flex items-center justify-center bg-slate-900/50 backdrop-blur-sm hidden fade-in">
    <div class="bg-white w-full max-w-4xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
        {{-- Modal Header --}}
        <div class="px-8 py-6 border-b border-slate-100 flex justify-between items-center bg-slate-50">
            <div>
                <h3 class="text-xl font-black text-slate-900">Historial de Pagos</h3>
                <p class="text-sm text-slate-500">Registro detallado de transacciones pasadas.</p>
            </div>
            <button onclick="closeHistory()" class="p-2 hover:bg-slate-200 rounded-full transition-colors">
                <i data-lucide="x" class="w-6 h-6 text-slate-400"></i>
            </button>
        </div>

        {{-- Modal Body (Scrollable) --}}
        <div class="p-6 overflow-auto custom-scrollbar flex-1 bg-slate-50/50">
            <div id="historyTableBody" class="space-y-4">
               {{-- JS Render Cards here --}}
               <div class="text-center py-12 text-slate-400">
                    <i data-lucide="loader" class="w-8 h-8 animate-spin mx-auto mb-2"></i>
                    <p class="text-sm font-medium">Cargando historial real...</p>
               </div>
            </div>
        </div>

        {{-- Modal Footer --}}
        <div class="px-8 py-5 border-t border-slate-100 bg-white flex justify-between items-center">
            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Pagado (Año Actual)</span>
            <span id="totalAnual" class="text-xl font-black text-slate-900">S/ 0.00</span>
        </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', async () => {
        const urlParams = new URLSearchParams(window.location.search);
        const staffId = urlParams.get('id');
        const API_URL = "{{ url('/api/Security') }}"; 
        
        // Blade Injection for Auth Context
        const empresaId = "{{ Auth::guard('admin')->user()->empresa_id ?? Auth::user()->empresa_id ?? '' }}" || localStorage.getItem('empresa_id');

        if(!staffId) {
            window.location.href = "{{ route('manager.staff') }}";
            return;
        }

        try {
             const response = await fetch(`${API_URL}/Staff?empresa_id=${empresaId}`);
             const result = await response.json();
             
             if(result.success && result.data) {
                 const member = result.data.find(m => m.id_usuario == staffId || m.id == staffId);
                 if(member) {
                     renderData(member);
                     loadHistory(member.id_usuario || member.id); // Load history details from API
                 } else {
                     alert('Miembro no encontrado');
                     window.location.href = "{{ route('manager.staff') }}";
                 }
             }
        } catch (e) {
            console.error(e);
            alert('Error cargando datos');
        }
    });

    function renderData(member) {
        document.getElementById('loadingState').classList.add('hidden');
        document.getElementById('paymentContent').classList.remove('hidden');

        // 1. Perfil
        const name = member.nombre_completo || 'Usuario';
        document.getElementById('profileName').innerText = name;
        
        // Role with Location 
        const role = member.rol || 'STAFF';
        document.getElementById('profileRole').innerText = role; // Removed - LOQUEANDO CITY text to keep it clean
        
        // Fecha Ingreso
        if(member.fecha_ingreso) {
            const d = new Date(member.fecha_ingreso);
            const options = { day: '2-digit', month: '2-digit', year: '2-digit' };
            document.getElementById('profileJoined').innerText = d.toLocaleDateString('es-ES', options);
        } else {
             document.getElementById('profileJoined').innerText = '--/--/--';
        }

        // Foto Logic (Robust)
        if(member.foto_url && member.foto_url !== 'null') {
             let cleanFoto = member.foto_url.replace(/\\/g, '/').replace('uploads / ', '').replace('uploads/', '').trim();
             if(cleanFoto.startsWith('/')) cleanFoto = cleanFoto.substring(1);
             
             let finalUrl = cleanFoto;
             if (!cleanFoto.startsWith('http')) {
                  finalUrl = `{{ url('/api/Security/uploads') }}/${cleanFoto}?t=${new Date().getTime()}`;
             }
             document.getElementById('profileImage').src = finalUrl;
        }

        // 2. Periodo & Sueldos
        const sueldo = parseFloat(member.sueldo || 0).toFixed(2);
        document.getElementById('baseSalary').innerText = `S/ ${sueldo}`;
        document.getElementById('summaryBase').innerText = `S/ ${sueldo}`;
        document.getElementById('totalNeto').innerText = `S/ ${sueldo}`;

        // Fechas Periodo (Simulado mes actual)
        const now = new Date();
        const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
        const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
        
        // Format: dd/mm
        const fmt = (d) => d.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit' });
        document.getElementById('periodDates').innerText = `${fmt(firstDay)} - ${fmt(lastDay)}`;

        if(window.lucide) lucide.createIcons();
    }

    // --- Calendar Logic (Range Picker) ---
    function openCalendar() {
        const modal = document.getElementById('modalCalendar');
        if (!modal) return;
        
        // Abrir primero para asegurar visibilidad inmediata
        modal.classList.remove('hidden');

        try {
            const rangeText = document.getElementById('periodDates')?.innerText || "";
            const display = document.getElementById('calendarRangeDisplay');
            const startInput = document.getElementById('startDateInput');
            const endInput = document.getElementById('endDateInput');

            if (display) display.innerText = rangeText || 'Select range';

            // Parse current range if possible (expecting formats like "01/02 - 28/02")
            const parts = rangeText.split('-');
            if (parts.length === 2 && startInput && endInput) {
                const currentYear = new Date().getFullYear();
                const startPart = parts[0].trim();
                const endPart = parts[1].trim();
                
                const s = startPart.split('/');
                const e = endPart.split('/');
                
                if (s.length >= 2 && e.length >= 2) {
                    // Input expected: MM/DD/YYYY
                    startInput.value = `${s[1].padStart(2, '0')}/${s[0].padStart(2, '0')}/${currentYear}`;
                    endInput.value = `${e[1].padStart(2, '0')}/${e[0].padStart(2, '0')}/${currentYear}`;
                    
                    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                    const sMonth = months[parseInt(s[1]) - 1] || 'Jan';
                    const eMonth = months[parseInt(e[1]) - 1] || 'Feb';
                    if (display) display.innerText = `${sMonth} ${s[0]} – ${eMonth} ${e[0]}`;
                }
            }
        } catch (err) {
            console.error("Error opening calendar parser:", err);
        }
    }

    function closeCalendar() {
        const modal = document.getElementById('modalCalendar');
        if (modal) modal.classList.add('hidden');
    }

    function savePeriod() {
        const startInput = document.getElementById('startDateInput');
        const endInput = document.getElementById('endDateInput');
        const periodDates = document.getElementById('periodDates');
        
        if (!startInput || !endInput || !periodDates) {
            closeCalendar();
            return;
        }

        try {
            const startVal = startInput.value;
            const endVal = endInput.value;
            const s = startVal.split('/');
            const e = endVal.split('/');
            
            if(s.length >= 2 && e.length >= 2) {
                // Formatting back to DD/MM for the main view
                const newRange = `${s[1]}/${s[0]} - ${e[1]}/${e[0]}`;
                periodDates.innerText = newRange;
            }
        } catch(ex) {
            console.error("Error saving period:", ex);
        }

        closeCalendar();
    }

    // Initialize real-time listeners for the range picker
    document.addEventListener('DOMContentLoaded', () => {
        const startInput = document.getElementById('startDateInput');
        const endInput = document.getElementById('endDateInput');
        
        const updateHeadline = () => {
             const display = document.getElementById('calendarRangeDisplay');
             const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
             try {
                 const s = startInput.value.split('/');
                 const e = endInput.value.split('/');
                 if(s.length >= 2 && e.length >= 2) {
                     display.innerText = `${months[parseInt(s[0])-1]} ${s[1]} – ${months[parseInt(e[0])-1]} ${e[1]}`;
                 }
             } catch(ex) {}
        };

        if(startInput) startInput.oninput = updateHeadline;
        if(endInput) endInput.oninput = updateHeadline;
    });

    // --- History Logic ---
    function openHistory() {
        document.getElementById('modalHistory').classList.remove('hidden');
    }

    function closeHistory() {
        document.getElementById('modalHistory').classList.add('hidden');
    }

    async function loadHistory(staffId) {
        const container = document.getElementById('historyTableBody');
        const totalAnualEl = document.getElementById('totalAnual');
        
        container.innerHTML = `
            <div class="text-center py-12 text-slate-400">
                <i data-lucide="loader" class="w-8 h-8 animate-spin mx-auto mb-2"></i>
                <p class="text-sm font-medium">Buscando registros...</p>
            </div>
        `;
        if(window.lucide) lucide.createIcons();

        try {
            const API_URL = "{{ url('/api/Security') }}";
            const response = await fetch(`${API_URL}/Pagos/Historial?id=${staffId}`);
            const result = await response.json();

            container.innerHTML = ''; // Clear loading

            // 1. Sync Meta Data
            if(result.meta) {
                if(result.meta.periodo_actual) {
                     document.getElementById('periodDates').innerText = result.meta.periodo_actual;
                }
                if(result.meta.sueldo_base) {
                     const sb = parseFloat(result.meta.sueldo_base).toFixed(2);
                     document.getElementById('baseSalary').innerText = `S/ ${sb}`;
                     document.getElementById('summaryBase').innerText = `S/ ${sb}`;
                     document.getElementById('totalNeto').innerText = `S/ ${sb}`;
                }
            }

            if(result.success && result.data && result.data.length > 0) {
                let totalAnual = 0;
                const currentYear = new Date().getFullYear();

                const getMonthName = (m) => {
                    const months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
                    return (months[m - 1] || "Mes").toUpperCase();
                };

                result.data.forEach(item => {
                    const monto = parseFloat(item.monto_neto || 0);
                    const anio = item.periodo_anio;
                    if(anio == currentYear) totalAnual += monto;

                    const card = document.createElement('div');
                    card.className = "bg-white rounded-2xl p-5 shadow-sm border border-slate-100 flex items-center justify-between hover:border-emerald-200 transition-all group";
                    
                    const fechaFmt = item.fecha_generado ? new Date(item.fecha_generado).toLocaleDateString('es-ES') : '--/--/--';
                    
                    card.innerHTML = `
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600 shadow-sm border border-emerald-100">
                                <i data-lucide="dollar-sign" class="w-6 h-6"></i>
                            </div>
                            <div>
                                <div class="text-slate-800 font-black text-sm uppercase tracking-tight">${getMonthName(item.periodo_mes)} ${item.periodo_anio}</div>
                                <div class="text-slate-400 text-[11px] font-medium">${fechaFmt}</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-slate-900 font-extrabold text-lg">S/ ${monto.toFixed(2)}</div>
                            <div class="flex flex-col items-end gap-1 mt-1">
                                ${item.comprobante_url ? `
                                    <a href="${item.comprobante_url}" target="_blank" class="text-blue-500 text-[10px] font-bold flex items-center gap-1 hover:text-blue-600 transition-colors">
                                        <i data-lucide="file-text" class="w-3 h-3"></i> VER RECIBO
                                    </a>
                                ` : ''}
                                <button class="text-emerald-500 text-[10px] font-bold flex items-center gap-1 hover:text-emerald-600 transition-colors uppercase">
                                    <i data-lucide="send" class="w-3 h-3"></i> Reenviar
                                </button>
                            </div>
                        </div>
                    `;
                    container.appendChild(card);
                });

                totalAnualEl.innerText = `S/ ${totalAnual.toFixed(2)}`;
            } else {
                container.innerHTML = `
                    <div class="flex flex-col items-center justify-center py-16 text-slate-300">
                        <div class="bg-slate-50 p-6 rounded-full mb-4">
                             <i data-lucide="inbox" class="w-12 h-12 opacity-20"></i>
                        </div>
                        <span class="text-sm font-bold uppercase tracking-widest opacity-50">No hay pagos registrados</span>
                    </div>
                `;
                totalAnualEl.innerText = 'S/ 0.00';
            }
            if(window.lucide) lucide.createIcons();

        } catch (e) {
            console.error(e);
            container.innerHTML = '<div class="text-center py-8 text-red-400 font-bold">Error al conectar con el historial</div>';
        }
    }

    // --- Confirmar Pago Logic ---
    // Variable global para metodo seleccionado
    let selectedMethod = 'YAPE'; 

    function selectMethod(method, btn) {
        selectedMethod = method;
        // Visual feedback (reset others)
        document.querySelectorAll('.payment-method-btn').forEach(b => {
             b.classList.remove('ring-2', 'ring-offset-2', 'ring-indigo-500');
             b.classList.add('opacity-80');
        });
        btn.classList.add('ring-2', 'ring-offset-2', 'ring-indigo-500');
        btn.classList.remove('opacity-80');
    }

    async function confirmarPago() {
        const fileInput = document.querySelector('input[type="file"]');
        const file = fileInput.files[0];
        const staffId = new URLSearchParams(window.location.search).get('id');
        const totalNeto = document.getElementById('totalNeto').innerText.replace('S/', '').trim();
        const sueldoBase = document.getElementById('baseSalary').innerText.replace('S/', '').trim();
        
        if(!selectedMethod) { alert('Selecciona un método de pago'); return; }

        // Recolectar Conceptos (Bonos y Descuentos)
        const conceptos = [];
        document.querySelectorAll('#bonusList > div').forEach(div => {
            const desc = div.querySelector('span:first-child')?.innerText;
            const monto = div.querySelector('span:last-child')?.innerText.replace('+ S/', '').trim();
            if(desc && monto) conceptos.push({ tipo: 'BONO', descripcion: desc, monto: parseFloat(monto) });
        });
        document.querySelectorAll('#discountList > div').forEach(div => {
            const desc = div.querySelector('span:first-child')?.innerText;
            const monto = div.querySelector('span:last-child')?.innerText.replace('- S/', '').trim();
            if(desc && monto) conceptos.push({ tipo: 'DESCUENTO', descripcion: desc, monto: parseFloat(monto) });
        });

        const rangeText = document.getElementById('periodDates').innerText;
        let fechaInicio = null;
        let fechaFin = null;
        
        try {
            const parts = rangeText.split('-');
            if(parts.length === 2) {
                const currentYear = new Date().getFullYear();
                const s = parts[0].trim().split('/');
                const e = parts[1].trim().split('/');
                fechaInicio = `${currentYear}-${s[1]}-${s[0]}`;
                fechaFin = `${currentYear}-${e[1]}-${e[0]}`;
            }
        } catch(ex) {}

        const formData = new FormData();
        formData.append('staff_id', staffId);
        formData.append('monto', totalNeto);
        formData.append('metodo', selectedMethod);
        formData.append('sueldo_base', sueldoBase);
        formData.append('conceptos', JSON.stringify(conceptos));
        if(fechaInicio) formData.append('fecha_inicio', fechaInicio);
        if(fechaFin) formData.append('fecha_fin', fechaFin);
        if(file) formData.append('comprobante', file);

        const btn = document.getElementById('btnConfirmar');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i data-lucide="loader" class="w-4 h-4 animate-spin"></i> PROCESANDO...';
        btn.disabled = true;

        try {
            const API_URL = "{{ url('/api/Security') }}";
            const response = await fetch(`${API_URL}/Pagos`, {
                method: 'POST',
                body: formData
            });
            
            const result = await response.json();

            if(result.success) {
                alert('¡Pago registrado y sincronizado con éxito!');
                location.reload(); // Recargar para ver en historial
            } else {
                alert('Error: ' + (result.message || 'No se pudo registrar el pago'));
            }

        } catch(e) {
            console.error(e);
            alert('Error de conexión');
        } finally {
            btn.innerHTML = originalText;
            btn.disabled = false;
            if(window.lucide) lucide.createIcons();
        }
    }
</script>
@endpush