@extends('layouts.app')

@section('title', 'المكافآت والخصومات - DOTS HR Pro')

@section('content')
@push('styles')
<style>
.sa-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}
.sa-modal-overlay.active{opacity:1;pointer-events:auto}
.sa-modal{background:var(--card-bg,#fff);border-radius:12px;width:92%;max-width:620px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(20px);transition:transform .25s}
.sa-modal-overlay.active .sa-modal{transform:translateY(0)}
.sa-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border,#eee)}
.sa-modal-header h3{margin:0;font-size:1.05rem}
.sa-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary,#666);line-height:1;padding:0 4px}
.sa-modal-close:hover{color:var(--danger,#ef4444)}
.sa-modal-body{padding:20px;overflow-y:auto}
.sa-type-tabs{display:flex;gap:8px;margin-bottom:16px}
.sa-type-tab{flex:1;padding:10px;border-radius:8px;border:2px solid var(--border,#e5e7eb);background:var(--card-bg,#fff);cursor:pointer;text-align:center;font-weight:600;font-size:.9rem;transition:all .2s}
.sa-type-tab:hover{border-color:var(--primary,#1B2A4A)}
.sa-type-tab.active-bonus{border-color:#10b981;background:rgba(16,185,129,.08);color:#10b981}
.sa-type-tab.active-deduction{border-color:#ef4444;background:rgba(239,68,68,.08);color:#ef4444}
.sa-type-tab i{display:block;font-size:1.2rem;margin-bottom:4px}
.sa-calc-group{display:flex;gap:8px;margin-bottom:12px}
.sa-calc-btn{flex:1;padding:8px;border-radius:8px;border:2px solid var(--border,#e5e7eb);background:var(--card-bg,#fff);cursor:pointer;text-align:center;font-size:.82rem;font-weight:600;transition:all .2s}
.sa-calc-btn:hover{border-color:var(--primary,#1B2A4A)}
.sa-calc-btn.active{border-color:var(--primary,#1B2A4A);background:rgba(27,42,74,.06);color:var(--primary,#1B2A4A)}
.sa-calc-btn i{display:block;font-size:1rem;margin-bottom:2px}
.sa-dur-group{display:flex;gap:8px;margin-bottom:12px}
.sa-dur-btn{flex:1;padding:8px;border-radius:8px;border:2px solid var(--border,#e5e7eb);background:var(--card-bg,#fff);cursor:pointer;text-align:center;font-size:.85rem;font-weight:600;transition:all .2s}
.sa-dur-btn:hover{border-color:var(--primary,#1B2A4A)}
.sa-dur-btn.active{border-color:var(--primary,#1B2A4A);background:rgba(27,42,74,.06);color:var(--primary,#1B2A4A)}
.sa-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600}
.sa-badge-bonus{background:rgba(16,185,129,.1);color:#10b981}
.sa-badge-deduction{background:rgba(239,68,68,.1);color:#ef4444}
.sa-badge-pending{background:rgba(245,158,11,.1);color:#f59e0b}
.sa-badge-approved{background:rgba(16,185,129,.1);color:#10b981}
.sa-badge-rejected{background:rgba(239,68,68,.1);color:#ef4444}
.sa-badge-fixed{background:rgba(99,102,241,.1);color:#6366f1}
.sa-badge-percentage{background:rgba(236,72,153,.1);color:#ec4899}
.sa-badge-days{background:rgba(14,165,233,.1);color:#0ea5e9}
.sa-badge-permanent{background:rgba(27,42,74,.1);color:#1B2A4A}
.sa-badge-temporary{background:rgba(245,158,11,.1);color:#f59e0b}
</style>
@endpush

<div class="page-header">
    <div>
        <h1 class="page-title">المكافآت والخصومات</h1>
        <p class="page-subtitle">إدارة المكافآت والخصومات الجزائية للموظفين</p>
    </div>
    <div class="page-actions">
        <button class="btn btn-primary" onclick="openSaModal()">
            <i class="fas fa-plus"></i> إضافة جديد
        </button>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background:rgba(245,158,11,.1);color:#f59e0b">
            <i class="fas fa-clock"></i>
        </div>
        <div class="stat-value">{{ $stats->pending_count ?? 0 }}</div>
        <div class="stat-label">بانتظار الموافقة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:rgba(16,185,129,.1);color:#10b981">
            <i class="fas fa-gift"></i>
        </div>
        <div class="stat-value">{{ $stats->active_bonuses ?? 0 }}</div>
        <div class="stat-label">مكافآت فعالة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:rgba(239,68,68,.1);color:#ef4444">
            <i class="fas fa-minus-circle"></i>
        </div>
        <div class="stat-value">{{ $stats->active_deductions ?? 0 }}</div>
        <div class="stat-label">خصومات فعالة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:rgba(99,102,241,.1);color:#6366f1">
            <i class="fas fa-balance-scale"></i>
        </div>
        <div class="stat-value">{{ number_format(($stats->total_bonuses ?? 0) - ($stats->total_deductions ?? 0), 2) }}</div>
        <div class="stat-label">صافي التأثير ({{ $currency }})</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-filter"></i> تصفية</h3>
    </div>
    <div class="card-body">
        <form method="GET" action="/salary-adjustments" class="filter-form">
            <div class="form-grid cols-4">
                <div class="form-group">
                    <label class="form-label">النوع</label>
                    <select name="type" class="form-select">
                        <option value="">الكل</option>
                        <option value="bonus" {{ request('type') == 'bonus' ? 'selected' : '' }}>مكافأة</option>
                        <option value="deduction" {{ request('type') == 'deduction' ? 'selected' : '' }}>خصم</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الحالة</label>
                    <select name="status" class="form-select">
                        <option value="">الكل</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>بانتظار الموافقة</option>
                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>معتمد</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>مرفوض</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الموظف</label>
                    <select name="employee_id" class="form-select">
                        <option value="">الكل</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>
                                {{ $emp->first_name }} {{ $emp->last_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="display:flex;align-items:flex-end;gap:8px">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> بحث</button>
                    <a href="/salary-adjustments" class="btn btn-secondary"><i class="fas fa-redo"></i></a>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <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>
                    </tr>
                </thead>
                <tbody>
                    @forelse($adjustments as $adj)
                    <tr>
                        <td>{{ $adj->id }}</td>
                        <td>
                            <strong>{{ $adj->first_name }} {{ $adj->last_name }}</strong>
                            <br><small class="code-badge">{{ $adj->employee_code ?? '-' }}</small>
                        </td>
                        <td>
                            @if($adj->type === 'bonus')
                                <span class="sa-badge sa-badge-bonus"><i class="fas fa-arrow-up"></i> مكافأة</span>
                            @else
                                <span class="sa-badge sa-badge-deduction"><i class="fas fa-arrow-down"></i> خصم</span>
                            @endif
                        </td>
                        <td>{{ $adj->category ?? '—' }}</td>
                        <td>
                            @if($adj->calc_method === 'fixed')
                                <span class="sa-badge sa-badge-fixed"><i class="fas fa-money-bill"></i> مبلغ ثابت</span>
                            @elseif($adj->calc_method === 'percentage')
                                <span class="sa-badge sa-badge-percentage"><i class="fas fa-percent"></i> نسبة</span>
                            @else
                                <span class="sa-badge sa-badge-days"><i class="fas fa-calendar-day"></i> أيام</span>
                            @endif
                        </td>
                        <td>
                            <strong>
                            @if($adj->calc_method === 'fixed')
                                {{ number_format($adj->amount, 2) }} {{ $currency }}
                            @elseif($adj->calc_method === 'percentage')
                                {{ $adj->percentage }}%
                                <br><small style="color:var(--text-secondary,#999)">≈ {{ number_format($adj->basic_salary * $adj->percentage / 100, 2) }} {{ $currency }}</small>
                            @else
                                {{ $adj->days }} يوم
                                <br><small style="color:var(--text-secondary,#999)">≈ {{ number_format(($adj->basic_salary / 30) * $adj->days, 2) }} {{ $currency }}</small>
                            @endif
                            </strong>
                        </td>
                        <td>
                            @if($adj->duration === 'permanent')
                                <span class="sa-badge sa-badge-permanent"><i class="fas fa-infinity"></i> دائم</span>
                            @else
                                <span class="sa-badge sa-badge-temporary"><i class="fas fa-hourglass-half"></i> مؤقت</span>
                                @if($adj->start_month || $adj->end_month)
                                    <br><small style="color:var(--text-secondary,#999)">{{ $adj->start_month ?? '?' }} → {{ $adj->end_month ?? 'مفتوح' }}</small>
                                @endif
                            @endif
                        </td>
                        <td>
                            @if($adj->status === 'pending')
                                <span class="sa-badge sa-badge-pending"><i class="fas fa-clock"></i> بانتظار</span>
                            @elseif($adj->status === 'approved')
                                <span class="sa-badge sa-badge-approved"><i class="fas fa-check"></i> معتمد</span>
                            @else
                                <span class="sa-badge sa-badge-rejected"><i class="fas fa-times"></i> مرفوض</span>
                            @endif
                        </td>
                        <td>
                            <div class="action-btns">
                                @if($adj->status === 'pending')
                                    <form method="POST" action="/salary-adjustments/{{ $adj->id }}/approve" style="display:inline">
                                        @csrf
                                        <button type="submit" class="action-btn" title="موافقة" style="color:#10b981">
                                            <i class="fas fa-check-circle"></i>
                                        </button>
                                    </form>
                                    <form method="POST" action="/salary-adjustments/{{ $adj->id }}/reject" style="display:inline">
                                        @csrf
                                        <button type="submit" class="action-btn" title="رفض" style="color:#ef4444">
                                            <i class="fas fa-times-circle"></i>
                                        </button>
                                    </form>
                                @endif
                                <form method="POST" action="/salary-adjustments/{{ $adj->id }}" style="display:inline" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="action-btn" title="حذف" style="color:var(--text-secondary,#999)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9">
                            <div class="empty-state">
                                <i class="fas fa-balance-scale"></i>
                                <p>لا توجد مكافآت أو خصومات مسجلة</p>
                                <button class="btn btn-primary" onclick="openSaModal()">إضافة مكافأة / خصم</button>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($adjustments->hasPages())
        <div class="pagination-wrap">{{ $adjustments->appends(request()->query())->links() }}</div>
        @endif
    </div>
</div>

{{-- Add Modal --}}
<div class="sa-modal-overlay" id="sa-add-modal">
    <div class="sa-modal">
        <div class="sa-modal-header">
            <h3><i class="fas fa-plus-circle"></i> إضافة مكافأة / خصم</h3>
            <button type="button" class="sa-modal-close" onclick="closeSaModal()">&times;</button>
        </div>
        <div class="sa-modal-body">
            <form method="POST" action="/salary-adjustments" id="sa-form">
                @csrf
                <input type="hidden" name="type" id="sa-type" value="bonus">
                <input type="hidden" name="calc_method" id="sa-calc" value="fixed">
                <input type="hidden" name="duration" id="sa-duration" value="temporary">

                {{-- Type Selection --}}
                <label class="form-label">النوع</label>
                <div class="sa-type-tabs">
                    <div class="sa-type-tab active-bonus" onclick="setSaType('bonus',this)">
                        <i class="fas fa-gift"></i> مكافأة
                    </div>
                    <div class="sa-type-tab" onclick="setSaType('deduction',this)">
                        <i class="fas fa-minus-circle"></i> خصم
                    </div>
                </div>

                {{-- Employee --}}
                <div class="form-group">
                    <label class="form-label">الموظف <span style="color:#ef4444">*</span></label>
                    <select name="employee_id" class="form-select" required>
                        <option value="">اختر الموظف...</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">{{ $emp->first_name }} {{ $emp->last_name }} ({{ $emp->employee_code ?? '-' }})</option>
                        @endforeach
                    </select>
                </div>

                {{-- Category --}}
                <div class="form-group">
                    <label class="form-label">التصنيف</label>
                    <input type="text" name="category" class="form-input" placeholder="مثال: مكافأة أداء، خصم تأخير، خصم غياب...">
                </div>

                {{-- Calc Method --}}
                <label class="form-label">طريقة الحساب</label>
                <div class="sa-calc-group">
                    <div class="sa-calc-btn active" onclick="setSaCalc('fixed',this)">
                        <i class="fas fa-money-bill"></i> مبلغ ثابت
                    </div>
                    <div class="sa-calc-btn" onclick="setSaCalc('percentage',this)">
                        <i class="fas fa-percent"></i> نسبة من الراتب
                    </div>
                    <div class="sa-calc-btn" onclick="setSaCalc('days',this)">
                        <i class="fas fa-calendar-day"></i> عدد أيام
                    </div>
                </div>

                {{-- Amount Fields --}}
                <div class="form-group" id="sa-field-fixed">
                    <label class="form-label">المبلغ ({{ $currency }})</label>
                    <input type="number" name="amount" class="form-input" step="0.01" min="0" placeholder="0.00">
                </div>
                <div class="form-group" id="sa-field-percentage" style="display:none">
                    <label class="form-label">النسبة (%)</label>
                    <input type="number" name="percentage" class="form-input" step="0.01" min="0" max="100" placeholder="0.00">
                </div>
                <div class="form-group" id="sa-field-days" style="display:none">
                    <label class="form-label">عدد الأيام</label>
                    <input type="number" name="days" class="form-input" min="0" placeholder="0">
                </div>

                {{-- Duration --}}
                <label class="form-label">المدة</label>
                <div class="sa-dur-group">
                    <div class="sa-dur-btn" onclick="setSaDur('permanent',this)">
                        <i class="fas fa-infinity"></i> دائم
                    </div>
                    <div class="sa-dur-btn active" onclick="setSaDur('temporary',this)">
                        <i class="fas fa-hourglass-half"></i> مؤقت
                    </div>
                </div>

                {{-- Month Range --}}
                <div id="sa-month-range">
                    <div class="form-grid cols-2">
                        <div class="form-group">
                            <label class="form-label">من شهر</label>
                            <input type="month" name="start_month" class="form-input" value="{{ date('Y-m') }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">إلى شهر</label>
                            <input type="month" name="end_month" class="form-input">
                        </div>
                    </div>
                </div>

                {{-- Description --}}
                <div class="form-group">
                    <label class="form-label">ملاحظات</label>
                    <textarea name="description" class="form-input" rows="2" placeholder="وصف أو سبب المكافأة / الخصم..."></textarea>
                </div>

                <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px">
                    <button type="button" class="btn btn-secondary" onclick="closeSaModal()">إلغاء</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
function openSaModal(){document.getElementById('sa-add-modal').classList.add('active')}
function closeSaModal(){document.getElementById('sa-add-modal').classList.remove('active')}

function setSaType(t,el){
    document.getElementById('sa-type').value=t;
    document.querySelectorAll('.sa-type-tab').forEach(function(b){b.className='sa-type-tab'});
    el.classList.add(t==='bonus'?'active-bonus':'active-deduction');
}

function setSaCalc(m,el){
    document.getElementById('sa-calc').value=m;
    document.querySelectorAll('.sa-calc-btn').forEach(function(b){b.classList.remove('active')});
    el.classList.add('active');
    document.getElementById('sa-field-fixed').style.display=m==='fixed'?'':'none';
    document.getElementById('sa-field-percentage').style.display=m==='percentage'?'':'none';
    document.getElementById('sa-field-days').style.display=m==='days'?'':'none';
}

function setSaDur(d,el){
    document.getElementById('sa-duration').value=d;
    document.querySelectorAll('.sa-dur-btn').forEach(function(b){b.classList.remove('active')});
    el.classList.add('active');
    document.getElementById('sa-month-range').style.display=d==='temporary'?'':'none';
}

document.addEventListener('keydown',function(e){if(e.key==='Escape')closeSaModal()});
document.getElementById('sa-add-modal').addEventListener('click',function(e){if(e.target===this)closeSaModal()});
</script>
@endpush
@endsection