@extends('layouts.app')

@section('content')
<div class="flex justify-between items-start mb-8">
    <div>
        <h2 class="text-3xl font-bold text-gold mb-1">دورة رواتب شهر: {{ $cycle->month }}</h2>
        <p class="text-gray-500 font-bold tracking-widest text-xs uppercase">{{ $cycle->branch->name }} | {{ $cycle->status === 'approved' ? 'معتمدة' : 'مسودة' }}</p>
    </div>
    
    <div class="flex gap-4">
        @if($cycle->status !== 'approved')
            @can('approve_payrolls')
            <form action="{{ route('admin.payrolls.approve', $cycle->id) }}" method="POST" onsubmit="return confirm('بمجرد الاعتماد لا يمكنك التعديل مجدداً. هل أنت متأكد؟')">
                @csrf
                <button type="submit" class="btn-gold px-8 py-3 rounded-xl shadow-lg shadow-gold/20">اعتماد الرواتب</button>
            </form>
            @endcan
        @endif
        
        @can('export_payrolls')
        <div class="flex gap-2">
            <a href="{{ route('admin.payrolls.pdf', $cycle->id) }}" class="px-6 py-3 bg-gray-800 text-white rounded-xl hover:bg-gray-700 transition-all">تصدير PDF</a>
            <a href="{{ route('admin.payrolls.excel', $cycle->id) }}" class="px-6 py-3 bg-green-900/40 text-green-400 rounded-xl hover:bg-green-900/60 transition-all border border-green-900/30">تصدير Excel</a>
        </div>
        @endcan
        <a href="{{ route('admin.payrolls.index') }}" class="px-6 py-3 bg-gray-900 text-gray-500 rounded-xl">عودة</a>
    </div>
</div>

<div class="bg-[#050505] border border-gray-800 rounded-3xl overflow-hidden">
    <table class="w-full text-right border-collapse">
        <thead>
            <tr class="bg-black/80 border-b border-gray-800">
                <th class="px-6 py-5 text-gray-500 text-xs font-black uppercase">الموظف</th>
                <th class="px-6 py-5 text-gray-500 text-xs font-black uppercase text-center">الأساسي</th>
                <th class="px-6 py-5 text-gray-500 text-xs font-black uppercase text-center">البدلات</th>
                <th class="px-6 py-5 text-gray-500 text-xs font-black uppercase text-center">الخصومات</th>
                <th class="px-6 py-5 text-gray-500 text-xs font-black uppercase text-center">العمولات</th>
                <th class="px-6 py-5 text-gray-500 text-xs font-black uppercase text-center">الصافي</th>
                @if($cycle->status !== 'approved')
                <th class="px-6 py-5 text-gray-500 text-xs font-black uppercase text-center">إدارة</th>
                @endif
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-900">
            @foreach($cycle->payrolls as $payroll)
            <tr class="group hover:bg-white/[0.02] transition-colors">
                <td class="px-6 py-6">
                    <div class="font-bold text-white">{{ $payroll->employee->name }}</div>
                    <div class="text-[10px] text-gray-600 font-bold uppercase mt-0.5">{{ $payroll->employee->job_title }}</div>
                </td>
                <td class="px-6 py-6 text-center">
                    @if($cycle->status !== 'approved')
                    <input type="number" 
                           onchange="updateSalary({{ $payroll->id }}, this.value)" 
                           value="{{ $payroll->basic_salary }}" 
                           step="0.01" 
                           class="w-32 bg-black/40 border border-gray-800 rounded-lg px-3 py-1.5 text-center text-white focus:border-gold outline-none">
                    @else
                    <span class="font-bold">{{ number_format($payroll->basic_salary, 2) }}</span>
                    @endif
                </td>
                <td class="px-6 py-6 text-center font-bold text-green-400">
                    +{{ number_format($payroll->total_allowances, 2) }}
                </td>
                <td class="px-6 py-6 text-center font-bold text-red-400">
                    -{{ number_format($payroll->total_deductions, 2) }}
                </td>
                <td class="px-6 py-6 text-center font-bold text-blue-400">
                    +{{ number_format($payroll->total_commissions, 2) }}
                </td>
                <td class="px-6 py-6 text-center font-black text-gold text-lg">
                    {{ number_format($payroll->net_salary, 2) }}
                </td>
                @if($cycle->status !== 'approved')
                <td class="px-6 py-6 text-center">
                    <button onclick="openItemsModal({{ $payroll->id }}, '{{ $payroll->employee->name }}')" 
                            class="p-2 bg-gray-800 hover:bg-gold hover:text-black rounded-lg transition-all">
                        ➕ تفاصيل
                    </button>
                </td>
                @endif
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Modal for Payroll Items -->
<div id="itemsModal" class="hidden fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-[#0a0a0a] border border-gray-800 w-full max-w-4xl rounded-3xl overflow-hidden">
        <div class="flex justify-between items-center px-8 py-6 border-b border-gray-800">
            <h3 class="text-xl font-bold text-white">تفاصيل راتب: <span id="modalEmployeeName" class="text-gold"></span></h3>
            <button onclick="closeItemsModal()" class="text-gray-500 hover:text-white">✕</button>
        </div>
        
        <div class="p-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Add New Item Form -->
            <div>
                <h4 class="font-bold text-gray-400 mb-6 uppercase text-xs tracking-widest">إضافة بند جديد</h4>
                <form id="addItemForm" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-xs text-gray-500 mb-2">نوع البند</label>
                        <select name="type" required class="w-full bg-black border-gray-800 rounded-xl px-4 py-3 text-white outline-none focus:border-gold">
                            <option value="allowance">بدل / مكافأة (+)</option>
                            <option value="commission">عمولة (+)</option>
                            <option value="deduction">خصم / سلفة (-)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-2">اسم البند</label>
                        <input type="text" name="name" required placeholder="مثلاً: بدل سكن، خصم تأخير" class="w-full bg-black border-gray-800 rounded-xl px-4 py-3 text-white outline-none focus:border-gold">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-2">المبلغ</label>
                        <input type="number" name="amount" step="0.01" required class="w-full bg-black border-gray-800 rounded-xl px-4 py-3 text-white outline-none focus:border-gold">
                    </div>
                    <button type="submit" class="btn-gold w-full py-4 mt-4 font-bold">إضافة البند</button>
                </form>
            </div>
            
            <!-- List Current Items -->
            <div class="border-r border-gray-800 pr-8">
                <h4 class="font-bold text-gray-400 mb-6 uppercase text-xs tracking-widest">البنود الحالية</h4>
                <div id="itemsList" class="space-y-3 max-h-[400px] overflow-y-auto pr-2">
                    <!-- Items will be loaded here via Alpine or standard Blade if pre-rendered -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function updateSalary(payrollId, amount) {
        fetch(`/admin/payrolls/${payrollId}/update`, {
            method: 'PATCH',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ basic_salary: amount })
        })
        .then(res => res.json())
        .then(data => {
            if(data.success) location.reload();
        });
    }

    function openItemsModal(payrollId, employeeName) {
        document.getElementById('modalEmployeeName').innerText = employeeName;
        document.getElementById('addItemForm').action = `/admin/payrolls/${payrollId}/items`;
        
        // Fetch current items via AJAX and populate itemsList
        // For brevity in this implementation, we'll reload the page on each change
        // but here we could load them dynamically
        
        // For now, let's just show items that were already rendered in a hidden list or just use server-side Blade logic
        // Let's refine the Blade logic below to pass data to JS
        const payrolls = @json($cycle->payrolls->load('items'));
        const payroll = payrolls.find(p => p.id === payrollId);
        
        const list = document.getElementById('itemsList');
        list.innerHTML = '';
        
        payroll.items.forEach(item => {
            const div = document.createElement('div');
            const typeLabels = {
                'allowance': { text: 'بدل', class: 'text-green-400' },
                'deduction': { text: 'خصم', class: 'text-red-400' },
                'commission': { text: 'عمولة', class: 'text-blue-400' }
            };
            
            div.className = "flex justify-between items-center bg-black/40 p-4 rounded-2xl border border-gray-800 group";
            div.innerHTML = `
                <div>
                    <div class="text-xs ${typeLabels[item.type].class} font-black uppercase mb-0.5">${typeLabels[item.type].text}</div>
                    <div class="font-bold text-white text-sm">${item.name}</div>
                </div>
                <div class="flex items-center gap-4">
                    <span class="font-bold text-lg ${typeLabels[item.type].class}">${item.type === 'deduction' ? '-' : '+'}${item.amount}</span>
                    <form action="/admin/payrolls/items/${item.id}" method="POST" onsubmit="return confirm('حذف؟')">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-gray-700 hover:text-red-500 transition-colors">🗑️</button>
                    </form>
                </div>
            `;
            list.appendChild(div);
        });

        document.getElementById('itemsModal').classList.remove('hidden');
    }

    function closeItemsModal() {
        document.getElementById('itemsModal').classList.add('hidden');
    }
</script>
@endsection