@extends('Staff.layout')

@section('content')

<div class="row g-4 mb-4">

    {{-- Welcome Card --}}
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <div class="d-flex align-items-center gap-4">
                    <div style="width:72px;height:72px;background:#696cff20;border-radius:50%;
                                display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        @if($staff->profile_photo)
                            <img src="{{ asset('storage/' . $staff->profile_photo) }}"
                                 style="width:72px;height:72px;border-radius:50%;object-fit:cover;">
                        @else
                            <i class="ti tabler-user" style="font-size:32px;color:#696cff;"></i>
                        @endif
                    </div>
                    <div>
                        <h4 class="fw-bold mb-1">Welcome, {{ $staff->name }}!</h4>
                        <p class="text-muted mb-0">
                            {{ $staff->designation ?? ($staff->role ?? $staff->department) }}
                            &nbsp;•&nbsp; {{ date('l, d M Y') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Stats --}}
    @if(isset($stats['patients']))
    <div class="col-md-3">
        <a href="{{ route('patient') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm text-center p-4">
                <div style="width:56px;height:56px;background:#696cff20;border-radius:14px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                    <i class="ti tabler-users" style="color:#696cff;font-size:24px;"></i>
                </div>
                <h3 class="fw-bold mb-0">{{ $stats['patients'] }}</h3>
                <p class="text-muted small mb-0">Total Patients</p>
            </div>
        </a>
    </div>
    @endif

    @if(isset($stats['appointments']))
    <div class="col-md-3">
        <a href="{{ route('appointment_report') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm text-center p-4">
                <div style="width:56px;height:56px;background:#48bb7820;border-radius:14px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                    <i class="ti tabler-calendar-check" style="color:#48bb78;font-size:24px;"></i>
                </div>
                <h3 class="fw-bold mb-0">{{ $stats['appointments'] }}</h3>
                <p class="text-muted small mb-0">Today's Appointments</p>
            </div>
        </a>
    </div>
    @endif

    @if(isset($stats['followups']))
    <div class="col-md-3">
        <a href="{{ route('follow_ups') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm text-center p-4">
                <div style="width:56px;height:56px;background:#ed8b0020;border-radius:14px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                    <i class="ti tabler-clock" style="color:#ed8b00;font-size:24px;"></i>
                </div>
                <h3 class="fw-bold mb-0">{{ $stats['followups'] }}</h3>
                <p class="text-muted small mb-0">Pending Follow Ups</p>
            </div>
        </a>
    </div>
    @endif

    @if(isset($stats['products']))
    <div class="col-md-3">
        <a href="{{ route('product') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm text-center p-4">
                <div style="width:56px;height:56px;background:#9b59b620;border-radius:14px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                    <i class="ti tabler-box" style="color:#9b59b6;font-size:24px;"></i>
                </div>
                <h3 class="fw-bold mb-0">{{ $stats['products'] }}</h3>
                <p class="text-muted small mb-0">Products</p>
            </div>
        </a>
    </div>
    @endif

    @if(isset($stats['treatments']))
    <div class="col-md-3">
        <a href="{{ route('treatments') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm text-center p-4">
                <div style="width:56px;height:56px;background:#e74c3c20;border-radius:14px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                    <i class="ti tabler-stethoscope" style="color:#e74c3c;font-size:24px;"></i>
                </div>
                <h3 class="fw-bold mb-0">{{ $stats['treatments'] }}</h3>
                <p class="text-muted small mb-0">Active Treatments</p>
            </div>
        </a>
    </div>
    @endif

</div>

{{-- Quick Access --}}
<div class="card border-0 shadow-sm">
    <div class="card-header py-3">
        <h5 class="mb-0">Quick Access</h5>
    </div>
    <div class="card-body p-4">
        <div class="row g-3">
            @php
                $menuItems = [
                    'patient'     => ['icon' => 'tabler-users',          'label' => 'Patients',     'route' => 'patient'],
                    'appointment' => ['icon' => 'tabler-calendar-check', 'label' => 'Appointments', 'route' => 'appointment_report'],
                    'follow_ups'  => ['icon' => 'tabler-report',         'label' => 'Follow Ups',   'route' => 'follow_ups'],
                    'product'     => ['icon' => 'tabler-box',            'label' => 'Products',     'route' => 'product'],
                    'treatments'  => ['icon' => 'tabler-vaccine',        'label' => 'Treatments',   'route' => 'treatments'],
                    'billing'     => ['icon' => 'tabler-file-invoice',   'label' => 'Billing',      'route' => 'billing'],
                    'attendance'  => ['icon' => 'tabler-calendar',       'label' => 'Attendance',   'route' => 'attendance'],
                    'doctor'      => ['icon' => 'tabler-stethoscope',    'label' => 'Doctors',      'route' => 'doctor'],
                    'staff_list'  => ['icon' => 'tabler-id-badge',       'label' => 'Staff',        'route' => 'staff_list'],
                ];
            @endphp

            @foreach($menu as $item)
                @if(isset($menuItems[$item]))
                @php $m = $menuItems[$item]; @endphp
                <div class="col-md-2 col-4">
                    <a href="{{ route($m['route']) }}" class="text-decoration-none">
                        <div class="card border text-center p-3"
                             style="border-radius:14px;transition:0.2s;"
                             onmouseover="this.style.borderColor='#696cff';this.style.background='#696cff08'"
                             onmouseout="this.style.borderColor='';this.style.background=''">
                            <i class="ti {{ $m['icon'] }}" style="font-size:28px;color:#696cff;margin-bottom:8px;"></i>
                            <div style="font-size:12px;font-weight:600;color:#2d3748;">{{ $m['label'] }}</div>
                        </div>
                    </a>
                </div>
                @endif
            @endforeach

            <div class="col-md-2 col-4">
                <a href="{{ route('staff.profile') }}" class="text-decoration-none">
                    <div class="card border text-center p-3"
                         style="border-radius:14px;transition:0.2s;"
                         onmouseover="this.style.borderColor='#696cff';this.style.background='#696cff08'"
                         onmouseout="this.style.borderColor='';this.style.background=''">
                        <i class="ti tabler-user-circle" style="font-size:28px;color:#696cff;margin-bottom:8px;"></i>
                        <div style="font-size:12px;font-weight:600;color:#2d3748;">My Profile</div>
                    </div>
                </a>
            </div>

        </div>
    </div>
</div>

@endsection