@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')

<div class="row align-items-center justify-content-between mb-4">
    <div class="col-auto">
        <h5 class="fw-bold mb-0">Staff Management</h5>
        <p class="text-muted small mb-0">Manage all staff related activities</p>
    </div>
</div>

{{-- Stats --}}
<div class="row g-4 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="card border-0 shadow-sm" style="border-radius:16px;border-left:4px solid #696cff !important;">
            <div class="card-body d-flex align-items-center justify-content-between p-4">
                <div>
                    <p class="text-muted small mb-1">Total Staff</p>
                    <h3 class="fw-bold mb-0">{{ $totalStaff }}</h3>
                </div>
                <div style="width:52px;height:52px;background:#696cff20;border-radius:12px;display:flex;align-items:center;justify-content:center;">
                    <i class="ti tabler-users" style="font-size:24px;color:#696cff;"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-0 shadow-sm" style="border-radius:16px;border-left:4px solid #71dd37 !important;">
            <div class="card-body d-flex align-items-center justify-content-between p-4">
                <div>
                    <p class="text-muted small mb-1">Active Staff</p>
                    <h3 class="fw-bold mb-0">{{ $activeStaff }}</h3>
                </div>
                <div style="width:52px;height:52px;background:#71dd3720;border-radius:12px;display:flex;align-items:center;justify-content:center;">
                    <i class="ti tabler-user-check" style="font-size:24px;color:#71dd37;"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-0 shadow-sm" style="border-radius:16px;border-left:4px solid #ff9f43 !important;">
            <div class="card-body d-flex align-items-center justify-content-between p-4">
                <div>
                    <p class="text-muted small mb-1">On Leave</p>
                    <h3 class="fw-bold mb-0">{{ $onLeave }}</h3>
                </div>
                <div style="width:52px;height:52px;background:#ff9f4320;border-radius:12px;display:flex;align-items:center;justify-content:center;">
                    <i class="ti tabler-calendar-off" style="font-size:24px;color:#ff9f43;"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card border-0 shadow-sm" style="border-radius:16px;border-left:4px solid #ff4f5e !important;">
            <div class="card-body d-flex align-items-center justify-content-between p-4">
                <div>
                    <p class="text-muted small mb-1">Inactive</p>
                    <h3 class="fw-bold mb-0">{{ $inactive }}</h3>
                </div>
                <div style="width:52px;height:52px;background:#ff4f5e20;border-radius:12px;display:flex;align-items:center;justify-content:center;">
                    <i class="ti tabler-user-off" style="font-size:24px;color:#ff4f5e;"></i>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Menu Cards --}}
<div class="row g-4">

    @php
    $cards = [
        ['label' => 'All Staff',        'icon' => 'tabler-users',          'color' => '#696cff', 'route' => 'staff_list',    'desc' => 'View and manage all staff'],
        ['label' => 'Add Staff',        'icon' => 'tabler-user-plus',      'color' => '#71dd37', 'route' => 'create_staff',  'desc' => 'Add a new staff member'],
        ['label' => 'Assign Role',      'icon' => 'tabler-shield-check',   'color' => '#03c3ec', 'route' => 'assign_role',   'desc' => 'Set staff roles and access'],
        ['label' => 'Receptionist',     'icon' => 'tabler-headset',        'color' => '#ff9f43', 'route' => 'create_staff',  'desc' => 'Add receptionist staff',    'role' => 'Receptionist'],
        ['label' => 'Nursing',          'icon' => 'tabler-heart-rate-monitor', 'color' => '#ff4f5e', 'route' => 'create_staff', 'desc' => 'Add nursing staff',     'role' => 'Nursing'],
        ['label' => 'Pharmacy',         'icon' => 'tabler-pill',           'color' => '#696cff', 'route' => 'create_staff',  'desc' => 'Add pharmacy staff',        'role' => 'Pharmacy'],
        ['label' => 'Accounts',         'icon' => 'tabler-calculator',     'color' => '#71dd37', 'route' => 'create_staff',  'desc' => 'Add accounts staff',        'role' => 'Accounts'],
        ['label' => 'Lab',              'icon' => 'tabler-microscope',     'color' => '#03c3ec', 'route' => 'create_staff',  'desc' => 'Add lab staff',             'role' => 'Lab'],
        ['label' => 'Administration',   'icon' => 'tabler-building',       'color' => '#ff9f43', 'route' => 'create_staff',  'desc' => 'Add administration staff',  'role' => 'Administration'],
        ['label' => 'Housekeeping',     'icon' => 'tabler-home-check',     'color' => '#ff4f5e', 'route' => 'create_staff',  'desc' => 'Add housekeeping staff',    'role' => 'Housekeeping'],
    ];
    @endphp

    @foreach($cards as $card)
    <div class="col-md-4 col-sm-6">
        <a href="{{ route($card['route']) }}{{ isset($card['role']) ? '?role=' . $card['role'] : '' }}"
           class="text-decoration-none">
            <div class="card border-0 shadow-sm h-100 text-center p-4"
                 style="border-radius:18px;transition:0.2s;"
                 onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 12px 32px rgba(0,0,0,0.1)'"
                 onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="width:70px;height:70px;background:{{ $card['color'] }}20;border-radius:20px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i class="ti {{ $card['icon'] }}" style="font-size:32px;color:{{ $card['color'] }};"></i>
                </div>
                <h6 class="fw-bold mb-1">{{ $card['label'] }}</h6>
                <p class="text-muted small mb-0">{{ $card['desc'] }}</p>
            </div>
        </a>
    </div>
    @endforeach

</div>

@endsection