@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">Patient Management</h5>
        <p class="text-muted small mb-0">Manage all patient related activities</p>
    </div>
</div>

{{-- Stats Row --}}
<!-- <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 Patients</p>
                    <h3 class="fw-bold mb-0">{{ $totalPatients }}</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">Today's Appointments</p>
                    <h3 class="fw-bold mb-0">{{ $todayAppointments }}</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-calendar-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">Pending Follow Ups</p>
                    <h3 class="fw-bold mb-0">{{ $pendingFollowUps }}</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-clock" 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">Total Cases</p>
                    <h3 class="fw-bold mb-0">{{ $totalCases }}</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-notes" 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('patient_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;cursor:pointer;"
                 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-users" style="font-size:32px;color:#696cff;"></i>
                </div>
                <h6 class="fw-bold mb-1">All Patients</h6>
                <p class="text-muted small mb-0">View and manage all registered patients</p>
            </div>
        </a>
    </div>
<!-- 
    <div class="col-md-4 col-sm-6">
        <a href="{{ route('create_op') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm h-100 text-center p-4"
                 style="border-radius:18px;transition:0.2s;cursor:pointer;"
                 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-clipboard-plus" style="font-size:32px;color:#03c3ec;"></i>
                </div>
                <h6 class="fw-bold mb-1">Add OP</h6>
                <p class="text-muted small mb-0">Quick outpatient registration</p>
            </div>
        </a>
    </div> -->

    <div class="col-md-4 col-sm-6">
        <a href="{{ route('create_patient_full') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm h-100 text-center p-4"
                 style="border-radius:18px;transition:0.2s;cursor:pointer;"
                 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 Patient</h6>
                <p class="text-muted small mb-0">Full patient registration with medical history</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;cursor:pointer;"
                 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 and manage appointments</p>
            </div>
        </a>
    </div>

    <div class="col-md-4 col-sm-6">
        <a href="{{ route('follow_ups') }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm h-100 text-center p-4"
                 style="border-radius:18px;transition:0.2s;cursor:pointer;"
                 onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 12px 32px rgba(255,79,94,0.15)'"
                 onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="width:70px;height:70px;background:#ff4f5e20;border-radius:20px;
                            display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                    <i class="ti tabler-refresh" style="font-size:32px;color:#ff4f5e;"></i>
                </div>
                <h6 class="fw-bold mb-1">Follow Ups</h6>
                <p class="text-muted small mb-0">Track and manage patient follow ups</p>
            </div>
        </a>
    </div>

    <!-- <div class="col-md-4 col-sm-6">
        <a href="{{ route('patient_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;cursor:pointer;"
                 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">Search Patients</h6>
                <p class="text-muted small mb-0">Search and filter patients by criteria</p>
            </div>
        </a>
    </div> -->

</div>

@endsection