@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">Doctor Management</h5>
        <p class="text-muted small mb-0">Manage all doctor 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 Doctors</p>
                    <h3 class="fw-bold mb-0">{{ $totalDoctors }}</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-stethoscope" 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 Doctors</p>
                    <h3 class="fw-bold mb-0">{{ $activeDoctors }}</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 #03c3ec !important;">
            <div class="card-body d-flex align-items-center justify-content-between p-4">
                <div>
                    <p class="text-muted small mb-1">Today's Appointments</p>
                    <h3 class="fw-bold mb-0">{{ $todayAppointments }}</h3>
                </div>
                <div style="width:52px;height:52px;background:#03c3ec20;border-radius:12px;display:flex;align-items:center;justify-content:center;">
                    <i class="ti tabler-calendar-check" style="font-size:24px;color:#03c3ec;"></i>
                </div>
            </div>
        </div>
    </div>
</div>

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

    <div class="col-md-4 col-sm-6">
        <a href="{{ route('doctor_list') }}" 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(105,108,255,0.15)'"
                 onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="width:70px;height:70px;background:#696cff20;border-radius:20px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i class="ti tabler-stethoscope" style="font-size:32px;color:#696cff;"></i>
                </div>
                <h6 class="fw-bold mb-1">All Doctors</h6>
                <p class="text-muted small mb-0">View and manage all doctors</p>
            </div>
        </a>
    </div>

    <div class="col-md-4 col-sm-6">
        <a href="{{ route('create_doctor') }}" 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(113,221,55,0.15)'"
                 onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="width:70px;height:70px;background:#71dd3720;border-radius:20px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i class="ti tabler-user-plus" style="font-size:32px;color:#71dd37;"></i>
                </div>
                <h6 class="fw-bold mb-1">Add Doctor</h6>
                <p class="text-muted small mb-0">Register a new doctor</p>
            </div>
        </a>
    </div>

    <div class="col-md-4 col-sm-6">
        <a href="{{ route('appointment_report') }}" 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(255,159,67,0.15)'"
                 onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="width:70px;height:70px;background:#ff9f4320;border-radius:20px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i class="ti tabler-calendar-check" style="font-size:32px;color:#ff9f43;"></i>
                </div>
                <h6 class="fw-bold mb-1">Appointments</h6>
                <p class="text-muted small mb-0">View doctor appointments</p>
            </div>
        </a>
    </div>

    <div class="col-md-4 col-sm-6">
        <a href="{{ route('attendance') }}" 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(3,195,236,0.15)'"
                 onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="width:70px;height:70px;background:#03c3ec20;border-radius:20px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i class="ti tabler-calendar" style="font-size:32px;color:#03c3ec;"></i>
                </div>
                <h6 class="fw-bold mb-1">Attendance</h6>
                <p class="text-muted small mb-0">Manage doctor attendance</p>
            </div>
        </a>
    </div>

    <!-- <div class="col-md-4 col-sm-6">
        <a href="{{ route('doctor_filter') }}" 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(105,108,255,0.15)'"
                 onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="width:70px;height:70px;background:#696cff20;border-radius:20px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i class="ti tabler-filter" style="font-size:32px;color:#696cff;"></i>
                </div>
                <h6 class="fw-bold mb-1">Filter Doctors</h6>
                <p class="text-muted small mb-0">Search and filter doctors</p>
            </div>
        </a>
    </div> -->

</div>

@endsection