@extends('layouts.app')
@section('title', 'تفاصيل مسير الرواتب - DOTS HR Pro')

@section('content')
<style>
.stat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
.stat-modal-overlay.active{opacity:1;pointer-events:auto}
.stat-modal{background:var(--card-bg,#fff);border-radius:12px;width:92%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(20px);transition:transform .25s}
.stat-modal-overlay.active .stat-modal{transform:translateY(0)}
.stat-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border,#eee)}
.stat-modal-header h3{margin:0;font-size:1.05rem}
.stat-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary,#666);line-height:1;padding:0 4px}
.stat-modal-close:hover{color:var(--danger,#ef4444)}
.stat-modal-body{padding:20px;overflow-y:auto}
.stat-modal-body table{width:100%;border-collapse:collapse}
.stat-modal-body th,.stat-modal-body td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--border,#eee);font-size:.9rem}
.stat-modal-body th{background:var(--bg,#f9fafb);font-weight:600;font-size:.85rem;color:var(--text-secondary,#666)}
.stat-modal-body tr:last-child td{border-bottom:none}
.stat-modal-body .modal-total-row{background:var(--bg,#f9fafb);font-weight:700}
.stat-card[onclick]{transition:transform .15s,box-shadow .15s}
.stat-card[onclick]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
</style>
<div class="page-header">
    <div>
        <h1 class="page-title">مسير رواتب {{ $payroll->month }}</h1>
        <p class="page-subtitle">{{ $payroll->items->count() }} موظف</p>
    </div>
    <div class="page-actions">
        @if($payroll->status === 'draft')
            <form method="POST" action="{{ route('payroll.approve', $payroll) }}" style="display:inline">@csrf<button class="btn btn-success"><i class="fas fa-check"></i> اعتماد</button></form>
        @endif
        <div style="position:relative;display:inline-block;" id="exportDropdownWrap">
            <button class="btn btn-secondary" onclick="document.getElementById('exportMenu').classList.toggle('pr-show');" type="button">
                <i class="fas fa-download"></i> تصدير <i class="fas fa-caret-down" style="margin-right:4px;"></i>
            </button>
            <div id="exportMenu" style="display:none;position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);min-width:180px;z-index:100;overflow:hidden;">
                <a href="{{ route('payroll.export', $payroll) }}" style="display:flex;align-items:center;gap:8px;padding:10px 16px;text-decoration:none;color:#374151;font-size:0.9rem;transition:background .15s;">
                    <i class="fas fa-file-csv" style="color:#28a745;width:18px;text-align:center;"></i> تصدير Excel / CSV
                </a>
                <a href="{{ route('payroll.export-pdf', $payroll) }}" style="display:flex;align-items:center;gap:8px;padding:10px 16px;text-decoration:none;color:#374151;font-size:0.9rem;border-top:1px solid #f0f0f0;transition:background .15s;">
                    <i class="fas fa-file-pdf" style="color:#dc3545;width:18px;text-align:center;"></i> تصدير PDF
                </a>
            </div>
        </div>
        <a href="{{ route('payroll.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card" style="cursor:pointer" onclick="openStatModal('modal-employees')"><div class="stat-icon" style="background:rgba(99,102,241,.12);color:#6366f1"><i class="fas fa-users"></i></div><div class="stat-info"><div class="stat-value">{{ $payroll->items->count() }}</div><div class="stat-label">عدد الموظفين</div></div></div>
    <div class="stat-card" style="cursor:pointer" onclick="openStatModal('modal-earnings')"><div class="stat-icon" style="background:rgba(16,185,129,.12);color:#10b981"><i class="fas fa-plus-circle"></i></div><div class="stat-info"><div class="stat-value">{{ number_format(($payroll->total_basic ?? 0) + ($payroll->total_allowances ?? 0), 0) }}</div><div class="stat-label">إجمالي الاستحقاقات</div></div></div>
    <div class="stat-card" style="cursor:pointer" onclick="openStatModal('modal-deductions')"><div class="stat-icon" style="background:rgba(239,68,68,.12);color:#ef4444"><i class="fas fa-minus-circle"></i></div><div class="stat-info"><div class="stat-value">{{ number_format($payroll->total_deductions ?? 0, 0) }}</div><div class="stat-label">إجمالي الخصومات</div></div></div>
    <div class="stat-card" style="cursor:pointer" onclick="openStatModal('modal-net')"><div class="stat-icon" style="background:rgba(245,158,11,.12);color:#f59e0b"><i class="fas fa-wallet"></i></div><div class="stat-info"><div class="stat-value">{{ number_format($payroll->total_net ?? 0, 0) }}</div><div class="stat-label">صافي الرواتب</div></div></div>
</div>

<div class="card">
    <div class="card-header"><h3><i class="fas fa-list"></i> تفاصيل الرواتب</h3></div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr><th>الموظف</th><th>الراتب الأساسي</th><th>بدل السكن</th><th>بدل النقل</th><th>بدلات أخرى</th><th>مكافآت</th><th>خصم التأمينات</th><th>خصم الإجازات</th><th>خصومات جزائية</th><th>إجمالي الخصومات</th><th>صافي الراتب</th><th style="width:100px">إجراءات</th></tr>
            </thead>
            <tbody>
                @forelse($payroll->items as $item)
                <tr>
                    <td>
                        <div class="user-cell">
                            <div class="user-avatar-sm">{{ mb_substr($item->employee->first_name ?? '?', 0, 1) }}</div>
                            <div>
                                <div class="user-name">{{ $item->employee->full_name ?? '—' }}</div>
                                <div class="user-email">{{ $item->employee->employee_code ?? '' }}</div>
                            </div>
                        </div>
                    </td>
                    <td>{{ number_format($item->basic_salary, 2) }}</td>
                    <td>{{ number_format($item->housing_allowance, 2) }}</td>
                    <td>{{ number_format($item->transportation_allowance, 2) }}</td>
                    <td>{{ number_format($item->other_allowances, 2) }}</td>
                    <td>
                        @if(($item->adjustment_bonus ?? 0) > 0)
                            <span style="color:var(--success,#10b981);font-weight:600">+{{ number_format($item->adjustment_bonus, 2) }}</span>
                        @else
                            —
                        @endif
                    </td>
                    <td class="text-danger">{{ number_format($item->social_insurance, 2) }}</td>
                    <td>
                        @if(($item->leave_deduction ?? 0) > 0)
                            <span style="color:var(--danger);font-weight:600">-{{ number_format($item->leave_deduction, 2) }}</span>
                        @else
                            —
                        @endif
                    </td>
                    <td>
                        @if(($item->adjustment_deduction ?? 0) > 0)
                            <span style="color:var(--danger);font-weight:600">-{{ number_format($item->adjustment_deduction, 2) }}</span>
                        @else
                            —
                        @endif
                    </td>
                    <td class="text-danger"><strong>{{ number_format($item->deductions, 2) }}</strong></td>
                    <td><strong>{{ number_format($item->net_salary, 2) }}</strong></td>
                    <td>
                        <div style="display:flex;gap:6px;justify-content:center">
                            <a href="/payroll/{{ $payroll->id }}/payslip/{{ $item->id }}" class="btn btn-sm btn-ghost" title="عرض القسيمة"><i class="fas fa-eye"></i></a>
                            <a href="/payroll/{{ $payroll->id }}/payslip/{{ $item->id }}/pdf" class="btn btn-sm btn-ghost" title="تحميل PDF" style="color:var(--danger,#ef4444)"><i class="fas fa-file-pdf"></i></a>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="12"><div class="empty-state-sm">لا توجد بيانات</div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Modal: عدد الموظفين -->
<div class="stat-modal-overlay" id="modal-employees" onclick="if(event.target===this)closeStatModal(this.querySelector('.stat-modal-close'))">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-users"></i> قائمة الموظفين ({{ $payroll->items->count() }})</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <thead>
                    <tr><th>#</th><th>الموظف</th><th>الرقم الوظيفي</th></tr>
                </thead>
                <tbody>
                    @forelse($payroll->items as $item)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $item->employee->full_name ?? '—' }}</td>
                        <td>{{ $item->employee->employee_code ?? '—' }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="3">لا توجد بيانات</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal: إجمالي الاستحقاقات -->
<div class="stat-modal-overlay" id="modal-earnings" onclick="if(event.target===this)closeStatModal(this.querySelector('.stat-modal-close'))">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-plus-circle"></i> تفاصيل الاستحقاقات</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <thead>
                    <tr><th>الموظف</th><th>الراتب الأساسي</th><th>بدل السكن</th><th>بدل النقل</th><th>بدلات أخرى</th><th>إجمالي الاستحقاقات</th></tr>
                </thead>
                <tbody>
                    @php $earningsTotal = 0; @endphp
                    @forelse($payroll->items as $item)
                    @php
                        $itemEarnings = ($item->basic_salary ?? 0) + ($item->housing_allowance ?? 0) + ($item->transportation_allowance ?? 0) + ($item->other_allowances ?? 0);
                        $earningsTotal += $itemEarnings;
                    @endphp
                    <tr>
                        <td>{{ $item->employee->full_name ?? '—' }}</td>
                        <td>{{ number_format($item->basic_salary, 2) }}</td>
                        <td>{{ number_format($item->housing_allowance, 2) }}</td>
                        <td>{{ number_format($item->transportation_allowance, 2) }}</td>
                        <td>{{ number_format($item->other_allowances, 2) }}</td>
                        <td><strong>{{ number_format($itemEarnings, 2) }}</strong></td>
                    </tr>
                    @empty
                    <tr><td colspan="6">لا توجد بيانات</td></tr>
                    @endforelse
                </tbody>
                @if($payroll->items->count())
                <tfoot>
                    <tr class="modal-total-row"><td colspan="5">الإجمالي</td><td>{{ number_format($earningsTotal, 2) }}</td></tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>

<!-- Modal: إجمالي الخصومات -->
<div class="stat-modal-overlay" id="modal-deductions" onclick="if(event.target===this)closeStatModal(this.querySelector('.stat-modal-close'))">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-minus-circle"></i> تفاصيل الخصومات</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <thead>
                    <tr><th>الموظف</th><th>خصم التأمينات</th><th>خصومات أخرى</th><th>خصم الإجازات</th><th>إجمالي الخصومات</th></tr>
                </thead>
                <tbody>
                    @php $deductionsTotal = 0; @endphp
                    @forelse($payroll->items as $item)
                    @php
                        $itemDeductions = ($item->social_insurance ?? 0) + ($item->deductions ?? 0) + ($item->leave_deduction ?? 0);
                        $deductionsTotal += $itemDeductions;
                    @endphp
                    <tr>
                        <td>{{ $item->employee->full_name ?? '—' }}</td>
                        <td class="text-danger">{{ number_format($item->social_insurance, 2) }}</td>
                        <td class="text-danger">{{ number_format($item->deductions, 2) }}</td>
                        <td class="text-danger">{{ number_format($item->leave_deduction, 2) }}</td>
                        <td><strong>{{ number_format($itemDeductions, 2) }}</strong></td>
                    </tr>
                    @empty
                    <tr><td colspan="5">لا توجد بيانات</td></tr>
                    @endforelse
                </tbody>
                @if($payroll->items->count())
                <tfoot>
                    <tr class="modal-total-row"><td colspan="4">الإجمالي</td><td>{{ number_format($deductionsTotal, 2) }}</td></tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>

<!-- Modal: صافي الرواتب -->
<div class="stat-modal-overlay" id="modal-net" onclick="if(event.target===this)closeStatModal(this.querySelector('.stat-modal-close'))">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-wallet"></i> صافي الرواتب</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <thead>
                    <tr><th>الموظف</th><th>الرقم الوظيفي</th><th>صافي الراتب</th></tr>
                </thead>
                <tbody>
                    @forelse($payroll->items as $item)
                    <tr>
                        <td>{{ $item->employee->full_name ?? '—' }}</td>
                        <td>{{ $item->employee->employee_code ?? '—' }}</td>
                        <td><strong>{{ number_format($item->net_salary, 2) }}</strong></td>
                    </tr>
                    @empty
                    <tr><td colspan="3">لا توجد بيانات</td></tr>
                    @endforelse
                </tbody>
                @if($payroll->items->count())
                <tfoot>
                    <tr class="modal-total-row"><td colspan="2">الإجمالي</td><td>{{ number_format($payroll->total_net ?? 0, 2) }}</td></tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>

<script>
function openStatModal(id){document.getElementById(id).classList.add('active')}
function closeStatModal(el){el.closest('.stat-modal-overlay').classList.remove('active')}
document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.querySelectorAll('.stat-modal-overlay.active').forEach(m=>m.classList.remove('active'));var em=document.getElementById('exportMenu');if(em)em.style.display='none';}});
document.addEventListener('click',function(e){var wrap=document.getElementById('exportDropdownWrap');var menu=document.getElementById('exportMenu');if(wrap && menu && !wrap.contains(e.target)){menu.style.display='none';}});
document.querySelectorAll('#exportMenu a').forEach(function(a){a.addEventListener('mouseenter',function(){this.style.background='#f3f4f6';});a.addEventListener('mouseleave',function(){this.style.background='#fff';});});
// Toggle helper for the dropdown
document.querySelector('#exportDropdownWrap .btn').addEventListener('click',function(e){e.stopPropagation();var menu=document.getElementById('exportMenu');menu.style.display=menu.style.display==='none'?'block':'none';});
</script>
@endsection