@extends('layouts.app')
@section('title', 'قسيمة راتب - ' . ($item->employee->full_name ?? '') . ' - DOTS HR Pro')

@section('content')
@push('styles')
<style>
.ps-container{max-width:800px;margin:0 auto}
.ps-card{background:var(--card-bg,#fff);border-radius:12px;border:1px solid var(--border,#e5e7eb);overflow:hidden;margin-bottom:20px}
.ps-header{background:linear-gradient(135deg,#1B2A4A 0%,#2d4a7a 100%);color:#fff;padding:28px 32px;display:flex;align-items:center;justify-content:space-between}
.ps-header-logo h2{margin:0;font-size:1.4rem;font-weight:700}
.ps-header-logo p{margin:4px 0 0;font-size:.85rem;opacity:.8}
.ps-header-info{text-align:left;font-size:.85rem;opacity:.9}
.ps-header-info div{margin-bottom:4px}
.ps-emp-section{padding:24px 32px;border-bottom:1px solid var(--border,#e5e7eb);display:flex;gap:40px;flex-wrap:wrap}
.ps-emp-field{min-width:140px}
.ps-emp-field .label{font-size:.75rem;color:var(--text-secondary,#6b7280);margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}
.ps-emp-field .value{font-size:.95rem;font-weight:600;color:var(--text-primary,#111827)}
.ps-body{padding:24px 32px}
.ps-section-title{font-size:.95rem;font-weight:700;color:#1B2A4A;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ps-section-title i{font-size:.85rem;opacity:.7}
.ps-table{width:100%;border-collapse:collapse;margin-bottom:24px}
.ps-table th{background:var(--bg,#f9fafb);color:var(--text-secondary,#6b7280);font-size:.8rem;font-weight:600;padding:10px 14px;text-align:right;border-bottom:1px solid var(--border,#e5e7eb)}
.ps-table td{padding:10px 14px;font-size:.9rem;text-align:right;border-bottom:1px solid var(--border,#f0f0f0)}
.ps-table .amount{font-variant-numeric:tabular-nums;direction:ltr;text-align:left}
.ps-table .text-danger{color:var(--danger,#ef4444)}
.ps-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
.ps-summary-box{background:var(--bg,#f9fafb);border-radius:10px;padding:16px 20px;text-align:center}
.ps-summary-box .label{font-size:.75rem;color:var(--text-secondary,#6b7280);margin-bottom:4px}
.ps-summary-box .value{font-size:1.3rem;font-weight:800}
.ps-summary-box.earnings .value{color:#10b981}
.ps-summary-box.deductions .value{color:#ef4444}
.ps-summary-box.net{background:linear-gradient(135deg,#1B2A4A 0%,#2d4a7a 100%);color:#fff}
.ps-summary-box.net .label{color:rgba(255,255,255,.7)}
.ps-summary-box.net .value{color:#fff}
.ps-footer{padding:16px 32px;background:var(--bg,#f9fafb);border-top:1px solid var(--border,#e5e7eb);text-align:center;font-size:.78rem;color:var(--text-secondary,#999)}
</style>
@endpush

<div class="page-header">
    <div>
        <h1 class="page-title">قسيمة راتب — {{ $item->employee->full_name ?? '—' }}</h1>
        <p class="page-subtitle">{{ $payroll->month }}</p>
    </div>
    <div class="page-actions">
        <a href="/payroll/{{ $payroll->id }}/payslip/{{ $item->id }}/pdf" class="btn btn-primary"><i class="fas fa-file-pdf"></i> تحميل PDF</a>
        <a href="/payroll/{{ $payroll->id }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع للمسير</a>
    </div>
</div>

<div class="ps-container">
    <div class="ps-card">
        <div class="ps-header">
            <div class="ps-header-logo">
                <h2>{{ $companyName }}</h2>
                <p>قسيمة راتب — Pay Slip</p>
            </div>
            <div class="ps-header-info">
                <div><i class="fas fa-calendar-alt"></i> الشهر: {{ $payroll->month }}</div>
                <div><i class="fas fa-info-circle"></i> الحالة: {{ $payroll->status === 'approved' ? 'معتمد' : 'مسودة' }}</div>
            </div>
        </div>

        <div class="ps-emp-section">
            <div class="ps-emp-field">
                <div class="label">اسم الموظف</div>
                <div class="value">{{ $item->employee->full_name ?? '—' }}</div>
            </div>
            <div class="ps-emp-field">
                <div class="label">الرقم الوظيفي</div>
                <div class="value">{{ $item->employee->employee_code ?? '—' }}</div>
            </div>
            <div class="ps-emp-field">
                <div class="label">القسم</div>
                <div class="value">{{ $item->employee->department->name ?? '—' }}</div>
            </div>
            <div class="ps-emp-field">
                <div class="label">المسمى الوظيفي</div>
                <div class="value">{{ $item->employee->jobTitle->name ?? '—' }}</div>
            </div>
        </div>

        <div class="ps-body">
            <div class="ps-section-title"><i class="fas fa-plus-circle" style="color:#10b981"></i> الاستحقاقات</div>
            <table class="ps-table">
                <thead><tr><th>البند</th><th>المبلغ</th></tr></thead>
                <tbody>
                    <tr><td>الراتب الأساسي</td><td class="amount">{{ number_format($item->basic_salary, 2) }}</td></tr>
                    <tr><td>بدل السكن</td><td class="amount">{{ number_format($item->housing_allowance, 2) }}</td></tr>
                    <tr><td>بدل النقل</td><td class="amount">{{ number_format($item->transportation_allowance, 2) }}</td></tr>
                    @if(($item->other_allowances ?? 0) > 0)
                    <tr><td>بدلات أخرى</td><td class="amount">{{ number_format($item->other_allowances, 2) }}</td></tr>
                    @endif
                    @if(($item->adjustment_bonus ?? 0) > 0)
                    <tr>
                        <td>
                            مكافآت
                            @if($item->adjustment_details)
                                <br><small style="color:var(--text-muted,#999)">
                                @foreach(json_decode($item->adjustment_details, true) ?? [] as $ad)
                                    @if($ad['type'] === 'bonus')
                                        {{ $ad['category'] ?? $ad['description'] ?? 'مكافأة' }} ({{ number_format($ad['calculated_amount'], 2) }})@if(!$loop->last) | @endif
                                    @endif
                                @endforeach
                                </small>
                            @endif
                        </td>
                        <td class="amount" style="color:#10b981">{{ number_format($item->adjustment_bonus, 2) }}</td>
                    </tr>
                    @endif
                    <tr style="background:var(--bg,#f9fafb);font-weight:700">
                        <td>إجمالي الاستحقاقات</td>
                        <td class="amount" style="color:#10b981">{{ number_format($totalEarnings, 2) }}</td>
                    </tr>
                </tbody>
            </table>

            <div class="ps-section-title"><i class="fas fa-minus-circle" style="color:#ef4444"></i> الخصومات</div>
            <table class="ps-table">
                <thead><tr><th>البند</th><th>المبلغ</th></tr></thead>
                <tbody>
                    <tr><td>خصم التأمينات الاجتماعية</td><td class="amount text-danger">{{ number_format($item->social_insurance, 2) }}</td></tr>
                    @if(($item->leave_deduction ?? 0) > 0)
                    <tr>
                        <td>
                            خصم الإجازات
                            @if($item->leave_deduction_details)
                                <br><small style="color:var(--text-muted,#999)">
                                @foreach(json_decode($item->leave_deduction_details, true) ?? [] as $ld)
                                    {{ $ld['leave_type'] ?? '' }} ({{ $ld['days'] ?? 0 }} يوم)@if(!$loop->last) | @endif
                                @endforeach
                                </small>
                            @endif
                        </td>
                        <td class="amount text-danger">{{ number_format($item->leave_deduction, 2) }}</td>
                    </tr>
                    @endif
                    @if(($item->adjustment_deduction ?? 0) > 0)
                    <tr>
                        <td>
                            خصومات جزائية
                            @if($item->adjustment_details)
                                <br><small style="color:var(--text-muted,#999)">
                                @foreach(json_decode($item->adjustment_details, true) ?? [] as $ad)
                                    @if($ad['type'] === 'deduction')
                                        {{ $ad['category'] ?? $ad['description'] ?? 'خصم' }} ({{ number_format($ad['calculated_amount'], 2) }})@if(!$loop->last) | @endif
                                    @endif
                                @endforeach
                                </small>
                            @endif
                        </td>
                        <td class="amount text-danger">{{ number_format($item->adjustment_deduction, 2) }}</td>
                    </tr>
                    @endif
                    <tr style="background:var(--bg,#f9fafb);font-weight:700">
                        <td>إجمالي الخصومات</td>
                        <td class="amount text-danger">{{ number_format($item->deductions, 2) }}</td>
                    </tr>
                </tbody>
            </table>

            <div class="ps-summary">
                <div class="ps-summary-box earnings">
                    <div class="label">إجمالي الاستحقاقات</div>
                    <div class="value">{{ number_format($totalEarnings, 2) }}</div>
                </div>
                <div class="ps-summary-box deductions">
                    <div class="label">إجمالي الخصومات</div>
                    <div class="value">{{ number_format($item->deductions, 2) }}</div>
                </div>
                <div class="ps-summary-box net">
                    <div class="label">صافي الراتب</div>
                    <div class="value">{{ number_format($item->net_salary, 2) }}</div>
                </div>
            </div>
        </div>

        <div class="ps-footer">
            {{ $companyName }} — تم إنشاء هذه القسيمة بتاريخ {{ now()->format('Y/m/d H:i') }}
        </div>
    </div>
</div>
@endsection