@extends('layouts.app')

@section('title', 'لوحة المدير')

@push('styles')
<style>
    /* ═══ MSS Dashboard — mss- prefix ═══ */
    .mss-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .mss-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }

    /* Stats row */
    .mss-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .mss-stat-card {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border-top: 3px solid;
    }
    .mss-stat-card.team { border-top-color: #1B2A4A; }
    .mss-stat-card.present { border-top-color: #10b981; }
    .mss-stat-card.onleave { border-top-color: #0ea5e9; }
    .mss-stat-card.pending { border-top-color: #f59e0b; }
    .mss-stat-number {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 4px;
    }
    .mss-stat-card.team .mss-stat-number { color: #1B2A4A; }
    .mss-stat-card.present .mss-stat-number { color: #10b981; }
    .mss-stat-card.onleave .mss-stat-number { color: #0ea5e9; }
    .mss-stat-card.pending .mss-stat-number { color: #f59e0b; }
    .mss-stat-label {
        font-size: 0.85rem;
        color: #6b7280;
    }

    /* Cards */
    .mss-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        margin-bottom: 24px;
        overflow: hidden;
    }
    .mss-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #f3f4f6;
    }
    .mss-card-header h5 {
        font-size: 1rem;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }
    .mss-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 8px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #fff;
    }
    .mss-badge-warning { background: #f59e0b; }
    .mss-badge-success { background: #10b981; }
    .mss-badge-secondary { background: #9ca3af; }
    .mss-badge-info { background: #0ea5e9; }

    /* Tables */
    .mss-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }
    .mss-table th {
        background: #f9fafb;
        padding: 10px 16px;
        text-align: right;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.82rem;
    }
    .mss-table td {
        padding: 10px 16px;
        border-bottom: 1px solid #f3f4f6;
        color: #374151;
    }
    .mss-table tbody tr:hover {
        background: #f9fafb;
    }
    .mss-table .mss-empty-row td {
        text-align: center;
        padding: 24px 16px;
        color: #9ca3af;
    }

    /* Status badges */
    .mss-status {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.78rem;
        font-weight: 600;
    }
    .mss-status-present { background: #d1fae5; color: #065f46; }
    .mss-status-late { background: #fef3c7; color: #92400e; }
    .mss-status-absent { background: #e5e7eb; color: #374151; }

    /* Action buttons */
    .mss-btn {
        border: none;
        padding: 6px 10px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.82rem;
        transition: opacity 0.2s;
    }
    .mss-btn:hover { opacity: 0.85; }
    .mss-btn-approve { background: #10b981; color: #fff; }
    .mss-btn-reject { background: #ef4444; color: #fff; }

    .mss-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* Success/error messages */
    .mss-alert {
        padding: 12px 20px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 0.9rem;
    }
    .mss-alert-success { background: #d1fae5; color: #065f46; }
    .mss-alert-error { background: #fee2e2; color: #991b1b; }

    @media (max-width: 768px) {
        .mss-grid-2 {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@section('content')
<div class="mss-header">
    <h1><i class="fas fa-user-tie" style="margin-left:8px;color:#E8502F"></i> لوحة تحكم المدير</h1>
</div>

@if(session('success'))
<div class="mss-alert mss-alert-success">
    <i class="fas fa-check-circle" style="margin-left:6px"></i>{{ session('success') }}
</div>
@endif

@if(session('error'))
<div class="mss-alert mss-alert-error">
    <i class="fas fa-exclamation-circle" style="margin-left:6px"></i>{{ session('error') }}
</div>
@endif

{{-- Stats Row --}}
<div class="mss-stats">
    <div class="mss-stat-card team">
        <div class="mss-stat-number">{{ $teamMembers->count() }}</div>
        <div class="mss-stat-label"><i class="fas fa-users" style="margin-left:4px"></i> أعضاء الفريق</div>
    </div>
    <div class="mss-stat-card present">
        <div class="mss-stat-number">{{ $teamAttendance->count() }}</div>
        <div class="mss-stat-label"><i class="fas fa-check-circle" style="margin-left:4px"></i> حاضرون اليوم</div>
    </div>
    <div class="mss-stat-card onleave">
        <div class="mss-stat-number">{{ $onLeaveToday->count() }}</div>
        <div class="mss-stat-label"><i class="fas fa-plane" style="margin-left:4px"></i> في إجازة اليوم</div>
    </div>
    <div class="mss-stat-card pending">
        <div class="mss-stat-number">{{ $pendingLeaves->count() + $pendingDataChanges->count() + $pendingFinancial->count() }}</div>
        <div class="mss-stat-label"><i class="fas fa-clock" style="margin-left:4px"></i> طلبات معلقة</div>
    </div>
</div>

<div class="mss-grid-2">
    {{-- Pending Leave Requests --}}
    <div class="mss-card">
        <div class="mss-card-header">
            <h5><i class="fas fa-umbrella-beach" style="margin-left:8px;color:#E8502F"></i> طلبات إجازة معلقة</h5>
            <span class="mss-badge mss-badge-warning">{{ $pendingLeaves->count() }}</span>
        </div>
        <div style="overflow-x:auto">
            <table class="mss-table">
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>النوع</th>
                        <th>من</th>
                        <th>إلى</th>
                        <th>إجراء</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($pendingLeaves as $leave)
                    <tr>
                        <td>{{ $leave->first_name ?? '' }} {{ $leave->last_name ?? '' }}</td>
                        <td>{{ $leave->leave_type ?? 'إجازة' }}</td>
                        <td>{{ $leave->start_date ?? '—' }}</td>
                        <td>{{ $leave->end_date ?? '—' }}</td>
                        <td style="white-space:nowrap">
                            <form action="/mss/approve-leave/{{ $leave->id }}" method="POST" style="display:inline">
                                @csrf
                                <input type="hidden" name="action" value="approve">
                                <button class="mss-btn mss-btn-approve" title="موافقة"><i class="fas fa-check"></i></button>
                            </form>
                            <form action="/mss/approve-leave/{{ $leave->id }}" method="POST" style="display:inline">
                                @csrf
                                <input type="hidden" name="action" value="reject">
                                <button class="mss-btn mss-btn-reject" title="رفض"><i class="fas fa-times"></i></button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr class="mss-empty-row"><td colspan="5">لا توجد طلبات إجازة معلقة</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Team Attendance Today --}}
    <div class="mss-card">
        <div class="mss-card-header">
            <h5><i class="fas fa-users" style="margin-left:8px;color:#1B2A4A"></i> حضور الفريق اليوم</h5>
        </div>
        <div style="overflow-x:auto">
            <table class="mss-table">
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>الدخول</th>
                        <th>الحالة</th>
                    </tr>
                </thead>
                <tbody>
                @forelse($teamMembers as $member)
                    @php $att = $teamAttendance->get($member->id); @endphp
                    <tr>
                        <td>{{ $member->first_name ?? '' }} {{ $member->last_name ?? '' }}</td>
                        <td>{{ $att && isset($att->check_in) ? \Carbon\Carbon::parse($att->check_in)->format('H:i') : '—' }}</td>
                        <td>
                            @if($att && isset($att->status) && $att->status === 'present')
                                <span class="mss-status mss-status-present">حاضر</span>
                            @elseif($att && isset($att->status) && $att->status === 'late')
                                <span class="mss-status mss-status-late">متأخر</span>
                            @else
                                <span class="mss-status mss-status-absent">لم يسجل</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr class="mss-empty-row"><td colspan="3">لا يوجد أعضاء في الفريق</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- On Leave Today --}}
@if($onLeaveToday->count() > 0)
<div class="mss-card">
    <div class="mss-card-header">
        <h5><i class="fas fa-plane" style="margin-left:8px;color:#0ea5e9"></i> في إجازة اليوم</h5>
        <span class="mss-badge mss-badge-info">{{ $onLeaveToday->count() }}</span>
    </div>
    <div style="overflow-x:auto">
        <table class="mss-table">
            <thead>
                <tr><th>الموظف</th><th>النوع</th><th>ينتهي</th></tr>
            </thead>
            <tbody>
            @foreach($onLeaveToday as $ol)
                <tr>
                    <td>{{ $ol->first_name ?? '' }} {{ $ol->last_name ?? '' }}</td>
                    <td>{{ $ol->leave_type ?? 'إجازة' }}</td>
                    <td>{{ $ol->end_date ?? '—' }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- Pending Data Changes --}}
@if($pendingDataChanges->count() > 0)
<div class="mss-card">
    <div class="mss-card-header">
        <h5><i class="fas fa-edit" style="margin-left:8px;color:#8b5cf6"></i> طلبات تعديل بيانات معلقة</h5>
        <span class="mss-badge mss-badge-warning">{{ $pendingDataChanges->count() }}</span>
    </div>
    <div style="overflow-x:auto">
        <table class="mss-table">
            <thead>
                <tr><th>الموظف</th><th>الحقل</th><th>القيمة المطلوبة</th><th>إجراء</th></tr>
            </thead>
            <tbody>
            @foreach($pendingDataChanges as $dc)
                <tr>
                    <td>{{ $dc->first_name ?? '' }} {{ $dc->last_name ?? '' }}</td>
                    <td>{{ $dc->field_name ?? '—' }}</td>
                    <td>{{ $dc->requested_value ?? '—' }}</td>
                    <td style="white-space:nowrap">
                        <form action="/mss/approve-data-change/{{ $dc->id }}" method="POST" style="display:inline">
                            @csrf
                            <input type="hidden" name="action" value="approve">
                            <button class="mss-btn mss-btn-approve" title="موافقة"><i class="fas fa-check"></i></button>
                        </form>
                        <form action="/mss/approve-data-change/{{ $dc->id }}" method="POST" style="display:inline">
                            @csrf
                            <input type="hidden" name="action" value="reject">
                            <button class="mss-btn mss-btn-reject" title="رفض"><i class="fas fa-times"></i></button>
                        </form>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- Pending Financial Requests --}}
@if($pendingFinancial->count() > 0)
<div class="mss-card">
    <div class="mss-card-header">
        <h5><i class="fas fa-money-bill" style="margin-left:8px;color:#10b981"></i> طلبات مالية معلقة</h5>
        <span class="mss-badge mss-badge-warning">{{ $pendingFinancial->count() }}</span>
    </div>
    <div style="overflow-x:auto">
        <table class="mss-table">
            <thead>
                <tr><th>الموظف</th><th>النوع</th><th>المبلغ</th><th>الغرض</th></tr>
            </thead>
            <tbody>
            @foreach($pendingFinancial as $fr)
                <tr>
                    <td>{{ $fr->first_name ?? '' }} {{ $fr->last_name ?? '' }}</td>
                    <td>
                        @if(isset($fr->type) && $fr->type === 'advance') سلفة
                        @elseif(isset($fr->type) && $fr->type === 'delegation') انتداب
                        @else تعويض مصاريف
                        @endif
                    </td>
                    <td>{{ isset($fr->amount) ? number_format($fr->amount, 2) : '—' }}</td>
                    <td>{{ isset($fr->purpose) ? \Illuminate\Support\Str::limit($fr->purpose, 30) : '—' }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@endsection