@extends('layouts.app')

@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">خصومات الإجازات</h1>
        <p class="page-subtitle">معاينة خصومات الإجازات للشهر {{ $month }}/{{ $year }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('payroll.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right"></i> العودة للرواتب
        </a>
    </div>
</div>

{{-- Filter --}}
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body">
        <form method="GET" class="filter-form">
            <div class="filter-group">
                <label class="form-label">الشهر</label>
                <select name="month" class="form-select">
                    @for ($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create(null, $m)->translatedFormat('F') }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="filter-group">
                <label class="form-label">السنة</label>
                <select name="year" class="form-select">
                    @for ($y = now()->year - 1; $y <= now()->year + 1; $y++)
                        <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div class="filter-group" style="align-self: flex-end;">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> عرض
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Summary --}}
<div class="stats-grid cols-3" style="margin-bottom: 1.5rem;">
    <div class="stat-card" onclick="openStatModal('modal-total-deductions')" style="cursor:pointer;">
        <div class="stat-icon" style="background: var(--danger-light); color: var(--danger);">
            <i class="fas fa-money-bill-wave"></i>
        </div>
        <div class="stat-value">{{ number_format($totalDeductions, 2) }}</div>
        <div class="stat-label">إجمالي خصومات الإجازات</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-employees-deducted')" style="cursor:pointer;">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning);">
            <i class="fas fa-users"></i>
        </div>
        <div class="stat-value">{{ count($summary) }}</div>
        <div class="stat-label">موظفين عليهم خصومات</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-total-days')" style="cursor:pointer;">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);">
            <i class="fas fa-calendar-times"></i>
        </div>
        <div class="stat-value">{{ collect($summary)->sum(fn($s) => collect($s['details'])->sum('days')) }}</div>
        <div class="stat-label">إجمالي أيام الخصم</div>
    </div>
</div>

{{-- Modal: إجمالي خصومات الإجازات --}}
<div class="stat-modal-overlay" id="modal-total-deductions" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-money-bill-wave"></i> خصومات الإجازات حسب الموظف</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if(count($summary) === 0)
                <p style="text-align:center;color:var(--text-secondary,#666);">لا توجد خصومات في هذا الشهر</p>
            @else
                <table>
                    <thead>
                        <tr><th style="text-align:right;">الموظف</th><th style="text-align:right;">القسم</th><th>مبلغ الخصم</th></tr>
                    </thead>
                    <tbody>
                        @foreach($summary as $emp)
                            <tr>
                                <td style="text-align:right;">{{ $emp['employee_name'] }}</td>
                                <td style="text-align:right;">{{ $emp['department'] }}</td>
                                <td style="color:var(--danger);">-{{ number_format($emp['total_deduction'], 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="modal-total-row">
                            <td colspan="2" style="text-align:right;">الإجمالي الكلي</td>
                            <td style="color:var(--danger);">-{{ number_format($totalDeductions, 2) }}</td>
                        </tr>
                    </tfoot>
                </table>
            @endif
        </div>
    </div>
</div>

{{-- Modal: موظفين عليهم خصومات --}}
<div class="stat-modal-overlay" id="modal-employees-deducted" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-users"></i> الموظفون عليهم خصومات</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if(count($summary) === 0)
                <p style="text-align:center;color:var(--text-secondary,#666);">لا يوجد موظفين عليهم خصومات في هذا الشهر</p>
            @else
                <table>
                    <thead>
                        <tr><th style="text-align:right;">الموظف</th><th style="text-align:right;">القسم</th></tr>
                    </thead>
                    <tbody>
                        @foreach($summary as $emp)
                            <tr>
                                <td style="text-align:right;">{{ $emp['employee_name'] }}</td>
                                <td style="text-align:right;">{{ $emp['department'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>
</div>

{{-- Modal: إجمالي أيام الخصم --}}
<div class="stat-modal-overlay" id="modal-total-days" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-calendar-times"></i> أيام الخصم حسب الموظف ونوع الإجازة</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            @if(count($summary) === 0)
                <p style="text-align:center;color:var(--text-secondary,#666);">لا توجد أيام خصم في هذا الشهر</p>
            @else
                <table>
                    <thead>
                        <tr><th style="text-align:right;">الموظف</th><th style="text-align:right;">نوع الإجازة</th><th>عدد الأيام</th></tr>
                    </thead>
                    <tbody>
                        @foreach($summary as $emp)
                            @foreach($emp['details'] as $detail)
                                <tr>
                                    <td style="text-align:right;">{{ $emp['employee_name'] }}</td>
                                    <td style="text-align:right;">{{ $detail['leave_type'] }}</td>
                                    <td>{{ $detail['days'] }} يوم</td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="modal-total-row">
                            <td colspan="2" style="text-align:right;">إجمالي أيام الخصم</td>
                            <td>{{ collect($summary)->sum(fn($s) => collect($s['details'])->sum('days')) }}</td>
                        </tr>
                    </tfoot>
                </table>
            @endif
        </div>
    </div>
</div>

{{-- Details Table --}}
<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-list"></i> تفاصيل الخصومات</h3>
    </div>
    <div class="card-body">
        @if (count($summary) === 0)
            <div class="empty-state">
                <i class="fas fa-check-circle" style="font-size: 3rem; color: var(--success); margin-bottom: 1rem;"></i>
                <h3>لا توجد خصومات إجازات</h3>
                <p>لا يوجد موظفين لديهم إجازات بدون أجر أو جزئية في هذا الشهر</p>
            </div>
        @else
            <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>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($summary as $emp)
                            @foreach ($emp['details'] as $idx => $detail)
                                <tr>
                                    @if ($idx === 0)
                                        <td rowspan="{{ count($emp['details']) }}" style="vertical-align: middle; font-weight: 600;">
                                            {{ $emp['employee_name'] }}
                                        </td>
                                        <td rowspan="{{ count($emp['details']) }}" style="vertical-align: middle;">
                                            {{ $emp['department'] }}
                                        </td>
                                    @endif
                                    <td>{{ $detail['leave_type'] }}</td>
                                    <td>{{ $detail['start_date'] }} → {{ $detail['end_date'] }}</td>
                                    <td>{{ $detail['days'] }} يوم</td>
                                    <td>
                                        @if ($detail['pay_type'] === 'unpaid')
                                            <span class="status-badge status-danger">بدون أجر</span>
                                        @else
                                            <span class="status-badge status-pending">{{ $detail['pay_percentage'] }}%</span>
                                        @endif
                                    </td>
                                    <td>{{ number_format($detail['daily_rate'], 2) }}</td>
                                    <td style="color: var(--danger); font-weight: 600;">
                                        -{{ number_format($detail['deduction'], 2) }}
                                    </td>
                                </tr>
                            @endforeach
                            <tr style="background: var(--bg); font-weight: 700;">
                                <td colspan="7" style="text-align: left;">إجمالي خصومات {{ $emp['employee_name'] }}</td>
                                <td style="color: var(--danger);">-{{ number_format($emp['total_deduction'], 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr style="font-weight: 700; font-size: 1.1em;">
                            <td colspan="7">الإجمالي الكلي</td>
                            <td style="color: var(--danger);">-{{ number_format($totalDeductions, 2) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        @endif
    </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'))}});
</script>
@endsection