@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    :root{
        /* ---- Vasantha Clinic · deep green premium theme (shared across app) ---- */
        --clinic-bg:#eef1ee;
        --clinic-panel:#0e2a1d;
        --clinic-panel-2:#123424;
        --clinic-panel-soft:#153a28;
        --clinic-panel-soft-2:#0f2f20;
        --clinic-ink:#f3f8f5;
        --clinic-ink-dim:#cfe2d7;
        --clinic-ink-soft:#8fac9c;
        --clinic-line:rgba(255,255,255,0.09);
        --clinic-line-soft:rgba(255,255,255,0.06);

        --clinic-accent:#1f7a4c;
        --clinic-accent-light:#3aa873;

        --clinic-gold:#d3ab5c;
        --clinic-slate:#6f93ad;
        --clinic-rose:#c66a5c;
        --clinic-teal:#2f8f8a;
    }

    .tab-content:not(.doc-example-content) {
        padding: 0% !important;
    }

    .card {
        border-radius: 18px;
        background: var(--clinic-panel-soft);
        border: 1px solid var(--clinic-line);
        color: var(--clinic-ink-dim);
        box-shadow: 0 14px 32px rgba(10,30,20,0.20) !important;
    }

    .card-header {
        border-bottom: 1px solid var(--clinic-line);
        background: transparent;
    }

    .icon-btn-shadow {
        box-shadow: none;
    }

    .premium-profile-hero {
        border-radius: 24px;
        border: 1px solid var(--clinic-line);
        background: linear-gradient(120deg, var(--clinic-panel-2) 0%, var(--clinic-panel) 65%, #0a2118 100%);
        box-shadow: 0 20px 45px rgba(10,30,20,0.28);
        overflow: hidden;
        position: relative;
    }
    .premium-profile-hero::after{
        content:"";
        position:absolute;
        top:-60%; right:-8%;
        width: 420px; height: 420px;
        background: radial-gradient(circle, rgba(58,168,115,0.22) 0%, rgba(58,168,115,0) 70%);
        pointer-events:none;
    }
    .premium-profile-hero .card-body{ position:relative; z-index:1; }

    .premium-profile-hero h4{
        font-family:'Playfair Display', Georgia, serif;
        color: var(--clinic-ink) !important;
    }

    .premium-profile-hero .btn-icon.bg-white{
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid var(--clinic-line);
        color: var(--clinic-ink) !important;
    }
    .premium-profile-hero .btn-icon.bg-white:hover{
        background: rgba(58,168,115,0.16) !important;
    }

    .premium-profile-avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at 32% 28%, var(--clinic-accent-light), var(--clinic-accent) 70%);
        color: #0b2016;
        font-size: 32px;
        box-shadow: 0 10px 24px rgba(31,122,76,0.35);
        flex-shrink: 0;
    }

    .premium-profile-badge,
    .premium-profile-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.45rem 0.8rem;
        font-size: 0.82rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.07);
        color: var(--clinic-ink-dim);
        border: 1px solid var(--clinic-line);
    }

    .premium-profile-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .premium-profile-meta span {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.7rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        color: var(--clinic-ink-dim);
        border: 1px solid var(--clinic-line);
    }

    .premium-profile-meta i,
    .premium-profile-pill i {
        color: var(--clinic-accent-light) !important;
    }

    @media (max-width: 575px) {
        .premium-profile-avatar {
            width: 62px;
            height: 62px;
            font-size: 26px;
        }

        .premium-profile-meta span,
        .premium-profile-badge,
        .premium-profile-pill {
            width: 100%;
            justify-content: flex-start;
        }
    }

    /* Sidebar tab layout */
    .patient-tab-layout {
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .patient-tab-sidebar {
        flex: 0 0 220px;
        position: sticky;
        top: 1rem;
    }

    .tab-sidebar-card {
        overflow: hidden;
    }

    .patient-tab-content {
        flex: 1 1 0%;
        min-width: 0;
    }

    .nav-pills .nav-link {
        border-radius: 10px;
        color: var(--clinic-ink-soft);
        display: flex;
        align-items: center;
        padding: 0.65rem 0.9rem;
        font-weight: 500;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .nav-pills .nav-link:hover:not(.active) {
        background: rgba(58, 168, 115, 0.12);
        color: var(--clinic-accent-light);
    }

    .nav-pills .nav-link.active {
        background: var(--clinic-accent);
        color: #f3f8f5;
    }

    .section-title { border-left: 4px solid var(--clinic-accent-light); padding-left: 12px; }
    .section-title h5 { margin: 0; font-weight: 700; font-family:'Playfair Display', Georgia, serif; }

    .form-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--clinic-ink-soft);
        margin-bottom: 0.35rem;
    }

    .form-control, .form-select {
        border-radius: 10px;
        background: var(--clinic-panel-soft-2);
        border: 1px solid var(--clinic-line);
        color: var(--clinic-ink);
    }

    .form-control::placeholder{ color: var(--clinic-ink-soft); }

    .form-control:focus, .form-select:focus {
        background: #113020;
        border-color: var(--clinic-accent-light);
        box-shadow: 0 0 0 0.2rem rgba(58, 168, 115, 0.18);
        color: var(--clinic-ink);
    }

    .form-select option{ background: var(--clinic-panel); color: var(--clinic-ink); }

    .form-control.bg-light,
    .bg-light {
        background: var(--clinic-panel-soft-2) !important;
        color: var(--clinic-ink-dim) !important;
        border-color: var(--clinic-line) !important;
    }

    hr{ border-top: 1px solid var(--clinic-line); opacity:1; }

    .text-muted{ color: var(--clinic-ink-soft) !important; }

    /* Buttons */
    .btn-primary{
        background: var(--clinic-accent) !important;
        border-color: var(--clinic-accent) !important;
        color: #f3f8f5 !important;
    }
    .btn-primary:hover{
        background: var(--clinic-accent-light) !important;
        border-color: var(--clinic-accent-light) !important;
        color: #0b2016 !important;
    }
    .btn-outline-danger{
        border-color: var(--clinic-rose) !important;
        color: var(--clinic-rose) !important;
        background: transparent !important;
    }
    .btn-outline-danger:hover{
        background: var(--clinic-rose) !important;
        color: #f3f8f5 !important;
    }
    .btn-danger{
        background: var(--clinic-rose) !important;
        border-color: var(--clinic-rose) !important;
    }
    .btn-light{
        background: rgba(255,255,255,0.08) !important;
        border-color: var(--clinic-line) !important;
        color: var(--clinic-ink-dim) !important;
    }
    .btn-light:hover{
        background: rgba(255,255,255,0.14) !important;
        color: var(--clinic-ink) !important;
    }

    .btn-label-primary{
        background: rgba(58,168,115,0.14) !important;
        color: var(--clinic-accent-light) !important;
        border: none !important;
    }
    .btn-label-primary:hover{ background: rgba(58,168,115,0.24) !important; }
    .btn-label-danger{
        background: rgba(198,106,92,0.14) !important;
        color: var(--clinic-rose) !important;
        border: none !important;
    }
    .btn-label-danger:hover{ background: rgba(198,106,92,0.24) !important; }
    .btn-label-warning{
        background: rgba(211,171,92,0.14) !important;
        color: var(--clinic-gold) !important;
        border: none !important;
    }
    .btn-label-warning:hover{ background: rgba(211,171,92,0.24) !important; }

    /* Badges */
    .badge.bg-label-primary{ background: rgba(58,168,115,0.14) !important; color: var(--clinic-accent-light) !important; }
    .badge.bg-label-success{ background: rgba(58,168,115,0.18) !important; color: var(--clinic-accent-light) !important; }
    .badge.bg-label-info{ background: rgba(111,147,173,0.16) !important; color: var(--clinic-slate) !important; }
    .badge.bg-label-warning{ background: rgba(211,171,92,0.16) !important; color: var(--clinic-gold) !important; }
    .badge.bg-label-danger{ background: rgba(198,106,92,0.16) !important; color: var(--clinic-rose) !important; }

    /* Table inside cards */
    .table{ color: var(--clinic-ink-dim); }
    .table thead th{
        color: var(--clinic-ink-soft);
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        border-bottom: 1px solid var(--clinic-line);
        background: transparent;
    }
    .table td{ border-bottom: 1px solid var(--clinic-line-soft); vertical-align: middle; }
    .table-hover tbody tr:hover{ background: rgba(58,168,115,0.06); color: var(--clinic-ink); }
    .table > :not(caption) > * > *{ background: transparent; }

    /* Subtle lift on report cards for a bit of tactile feedback */
    .report-card {
        transition: box-shadow 0.2s ease, transform 0.2s ease;
        background: var(--clinic-panel-soft-2) !important;
        border-color: var(--clinic-line) !important;
    }

    .report-card:hover {
        box-shadow: 0 10px 24px rgba(10,30,20,0.28) !important;
        transform: translateY(-2px);
    }

    /* Modals */
    .modal-content{
        background: linear-gradient(160deg, var(--clinic-panel) 0%, #0a2118 100%);
        color: var(--clinic-ink);
        border: 1px solid var(--clinic-line);
    }
    .modal-title, .modal-content h5, .modal-content h6{
        font-family:'Playfair Display', Georgia, serif;
        color: var(--clinic-ink);
    }
    .btn-close{ filter: invert(1) grayscale(1) brightness(1.6); }

    /* Case-type option cards inside modal */
    .case-type-card{
        border-color: var(--clinic-line) !important;
        background: var(--clinic-panel-soft-2);
        transition: border-color .15s ease, background .15s ease;
    }

    /* Below laptop breakpoint: collapse back to horizontal pills stacked above content */
    @media (max-width: 991px) {
        .patient-tab-layout {
            flex-direction: column;
        }

        .patient-tab-sidebar {
            flex: 1 1 auto;
            width: 100%;
            position: static;
        }

        .nav-pills#patientTabs {
            flex-direction: row !important;
            flex-wrap: wrap;
            overflow-x: auto;
            flex-wrap: nowrap;
        }

        .nav-pills#patientTabs .nav-item {
            flex: 0 0 auto;
        }
    }

    @media (max-width: 575px) {
        .patient-tab-sidebar .card-body,
        .patient-tab-sidebar .p-2 {
            padding: 0.5rem !important;
        }
    }
</style>
@section('content')

    <div class="card border-0 premium-profile-hero mb-4 mt-3">
        <div class="card-body p-4 p-md-5">
            <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-3">
                <div class="d-flex align-items-center gap-3">
                    <a href="{{ route('patient_list') }}" class="btn btn-icon bg-white icon-btn-shadow rounded-circle">
                        <i class="ti tabler-chevron-left"></i>
                    </a>
                    <!-- <div class="premium-profile-avatar">
                        <i class="ti tabler-user"></i>
                    </div> -->
                    <div>
                        <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                            <h4 class="fw-bold mb-0">{{ $patient->patient_name }}</h4>
                            <span class="premium-profile-badge">Patient</span>
                        </div>
                        
                    </div>
                </div>

                <div class="d-flex flex-wrap gap-2">
                    <div class="premium-profile-meta text-muted small">
                            <span><i class="ti tabler-id"></i>{{ $patient->sheet_no }}</span>
                            <span><i class="ti tabler-phone"></i>{{ $patient->phone }}</span>
                            @if($patient->gender)
                                <span><i class="ti tabler-gender-male"></i>{{ $patient->gender }}</span>
                            @endif
                            @if($patient->age)
                                <span><i class="ti tabler-calendar"></i>{{ $patient->age }} Years</span>
                            @endif
                        </div>
                    @if($patient->blood_group)
                        <span class="premium-profile-pill">
                            <i class="ti tabler-droplet"></i>{{ $patient->blood_group }}
                        </span>
                    @endif
                    <span class="premium-profile-pill">
                        <i class="ti tabler-stethoscope"></i>Profile Overview
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Sidebar Tabs + Content --}}
    <div class="patient-tab-layout">

        {{-- Vertical Tabs (sidebar on laptop, stacked pills on mobile) — UNCHANGED --}}
        <div class="patient-tab-sidebar">
            <div class="card border-0 shadow-sm tab-sidebar-card">
                <ul class="nav nav-pills flex-column gap-1 p-2" id="patientTabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="pill" href="#profileTab">
                            <i class="ti tabler-user me-2"></i> Profile
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="pill" href="#medicalTab">
                            <i class="ti tabler-heart-rate-monitor me-2"></i> Medical
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="pill" href="#reportsTab">
                            <i class="ti tabler-file-text me-2"></i> Reports
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="pill" href="#casesTab">
                            <i class="ti tabler-notes me-2"></i> Cases
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="pill" href="#appointmentsTab">
                            <i class="ti tabler-calendar me-2"></i> Appointments
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        {{-- Tab Content --}}
        <div class="patient-tab-content">
            <div class="tab-content">

                {{-- Profile Tab (now editable) --}}
                <div class="tab-pane fade show active" id="profileTab">

                    <form action="{{ url('admin/patient/' . $patient->id . '/update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        {{-- Basic Details Card --}}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body p-4">
                                <div class="section-title mb-4">
                                    <h5><i class="ti tabler-user me-2"></i>Basic Details</h5>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Sheet No</label>
                                        <input type="text" name="sheet_no" class="form-control" value="{{ old('sheet_no', $patient->sheet_no) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Phone</label>
                                        <input type="text" name="phone" class="form-control" value="{{ old('phone', $patient->phone) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Alternate Number</label>
                                        <input type="text" name="alternate_number" class="form-control" value="{{ old('alternate_number', $patient->alternate_number) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Email</label>
                                        <input type="email" name="email" class="form-control" value="{{ old('email', $patient->email) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">DOB</label>
                                        <input type="date" name="dob" class="form-control" value="{{ old('dob', $patient->dob) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Age</label>
                                        <input type="number" name="age" class="form-control" value="{{ old('age', $patient->age) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Gender</label>
                                        <select name="gender" class="form-select">
                                            <option value="">Select</option>
                                            @foreach(['Male','Female','Other'] as $g)
                                                <option value="{{ $g }}" {{ old('gender', $patient->gender) == $g ? 'selected' : '' }}>{{ $g }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Marital Status</label>
                                        <select name="marital_status" class="form-select">
                                            <option value="">Select</option>
                                            @foreach(['Single','Married','Divorced','Widowed'] as $m)
                                                <option value="{{ $m }}" {{ old('marital_status', $patient->marital_status) == $m ? 'selected' : '' }}>{{ $m }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Blood Group</label>
                                        <select name="blood_group" class="form-select">
                                            <option value="">Select</option>
                                            @foreach(['A+','A-','B+','B-','AB+','AB-','O+','O-'] as $bg)
                                                <option value="{{ $bg }}" {{ old('blood_group', $patient->blood_group) == $bg ? 'selected' : '' }}>{{ $bg }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <div class="col-md-3">
                                        <label class="form-label">Patient For</label>
                                        <input type="text" name="patient_for" class="form-control" value="{{ old('patient_for', $patient->patient_for) }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Address Card --}}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body p-4">
                                <div class="section-title mb-4">
                                    <h5><i class="ti tabler-map-pin me-2"></i>Address</h5>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Street</label>
                                        <input type="text" name="street" class="form-control" value="{{ old('street', $patient->street) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Land Mark</label>
                                        <input type="text" name="landmark" class="form-control" value="{{ old('landmark', $patient->landmark) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">City</label>
                                        <input type="text" name="city" class="form-control" value="{{ old('city', $patient->city) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Pin</label>
                                        <input type="text" name="pin" class="form-control" value="{{ old('pin', $patient->pin) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">State</label>
                                        <input type="text" name="state" class="form-control" value="{{ old('state', $patient->state) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Country</label>
                                        <input type="text" name="country" class="form-control" value="{{ old('country', $patient->country) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Place</label>
                                        <input type="text" name="place" class="form-control" value="{{ old('place', $patient->place) }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Emergency Contact Card --}}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body p-4">
                                <div class="section-title mb-4">
                                    <h5><i class="ti tabler-phone me-2"></i>Emergency Contact</h5>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Guardian Name</label>
                                        <input type="text" name="guardian_name" class="form-control" value="{{ old('guardian_name', $patient->guardian_name) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Guardian Mobile</label>
                                        <input type="text" name="guardian_mobile" class="form-control" value="{{ old('guardian_mobile', $patient->guardian_mobile) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Relation</label>
                                        <input type="text" name="guardian_relation" class="form-control" value="{{ old('guardian_relation', $patient->guardian_relation) }}">
                                    </div>
                                   
                                </div>
                            </div>
                        </div>

                       

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="ti tabler-device-floppy me-1"></i> Save Changes
                            </button>
                        </div>

                    </form>

                </div>

                {{-- Medical Tab (now editable) --}}
                <div class="tab-pane fade" id="medicalTab">

                    <form action="{{ route('update_medical', $patient->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        {{-- Medical History Card --}}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body p-4">
                                <div class="section-title mb-4">
                                    <h5><i class="ti tabler-heart-rate-monitor me-2"></i>Medical History</h5>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Blood Pressure</label>
                                        <input type="text" name="blood_pressure" class="form-control" value="{{ old('blood_pressure', $patient->blood_pressure) }}" placeholder="120/80 mmHg">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Diabetes</label>
                                        <select name="diabetes" class="form-select">
                                            @foreach(['No','Yes'] as $opt)
                                                <option value="{{ $opt }}" {{ old('diabetes', $patient->diabetes ?? 'No') == $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Heart Disease</label>
                                        <select name="heart_disease" class="form-select">
                                            @foreach(['No','Yes'] as $opt)
                                                <option value="{{ $opt }}" {{ old('heart_disease', $patient->heart_disease ?? 'No') == $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Allergies</label>
                                        <input type="text" name="allergies" class="form-control" value="{{ old('allergies', $patient->allergies) }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Chronic Conditions</label>
                                        <input type="text" name="chronic_conditions" class="form-control" value="{{ old('chronic_conditions', $patient->chronic_conditions) }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Current Medications</label>
                                        <input type="text" name="current_medications" class="form-control" value="{{ old('current_medications', $patient->current_medications) }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Previous Surgeries</label>
                                        <input type="text" name="previous_surgeries" class="form-control" value="{{ old('previous_surgeries', $patient->previous_surgeries) }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Family Medical History</label>
                                        <textarea name="family_medical_history" class="form-control" rows="2">{{ old('family_medical_history', $patient->family_medical_history) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Insurance Card --}}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body p-4">
                                <div class="section-title mb-4">
                                    <h5><i class="ti tabler-shield me-2"></i>Insurance</h5>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Insurance Provider</label>
                                        <input type="text" name="insurance_provider" class="form-control" value="{{ old('insurance_provider', $patient->insurance_provider) }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Policy Number</label>
                                        <input type="text" name="policy_number" class="form-control" value="{{ old('policy_number', $patient->policy_number) }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Policy Expiry</label>
                                        <input type="date" name="policy_expiry" class="form-control" value="{{ old('policy_expiry', $patient->policy_expiry) }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Lifestyle Card --}}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body p-4">
                                <div class="section-title mb-4">
                                    <h5><i class="ti tabler-activity me-2"></i>Lifestyle</h5>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label">Smoking</label>
                                        <select name="smoking" class="form-select">
                                            @foreach(['No','Yes'] as $opt)
                                                <option value="{{ $opt }}" {{ old('smoking', $patient->smoking ?? 'No') == $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Alcohol</label>
                                        <select name="alcohol" class="form-select">
                                            @foreach(['No','Yes'] as $opt)
                                                <option value="{{ $opt }}" {{ old('alcohol', $patient->alcohol ?? 'No') == $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Diet</label>
                                        <input type="text" name="diet" class="form-control" value="{{ old('diet', $patient->diet) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Exercise</label>
                                        <input type="text" name="exercise" class="form-control" value="{{ old('exercise', $patient->exercise) }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="ti tabler-device-floppy me-1"></i> Save Changes
                            </button>
                        </div>

                    </form>

                </div>

                {{-- Reports Tab — UNCHANGED --}}
                <div class="tab-pane fade" id="reportsTab">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header py-3 d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="ti tabler-file-text me-2"></i>Reports</h5>
                            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addReportModal">
                                <i class="ti tabler-plus me-1"></i> Add Report
                            </button>
                        </div>
                        <div class="card-body p-4">
                            <div id="reportsList">
                                @forelse($reports as $report)
                                <div class="card border mb-3 report-card" id="report-{{ $report->id }}">
                                    <div class="card-body p-3 d-flex align-items-center gap-3">
                                        <div style="width:44px;height:44px;background:rgba(58,168,115,0.16);border-radius:10px;
                                                    display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                            <i class="ti tabler-file-text" style="color:var(--clinic-accent-light);font-size:20px;"></i>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="fw-semibold" style="color:var(--clinic-ink);">{{ $report->report_type }}</div>
                                            <div class="text-muted small">{{ $report->report_date }}{{ $report->notes ? ' • ' . $report->notes : '' }}</div>
                                        </div>
                                        <div class="d-flex gap-2">
                                            @if($report->file_path)
<a href="{{ asset('storage/' . $report->file_path) }}" download
   class="btn btn-sm btn-label-primary">
    <i class="ti tabler-download"></i>
</a>
                                            @endif
                                            <button class="btn btn-sm btn-label-danger delete-report-btn" data-id="{{ $report->id }}">
                                                <i class="ti tabler-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <div class="text-center text-muted py-4" id="noReports">
                                    <i class="ti tabler-file-off" style="font-size:40px;"></i>
                                    <p class="mt-2">No reports added yet</p>
                                </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Cases Tab — UNCHANGED --}}
                <div class="tab-pane fade" id="casesTab">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header py-3 d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="ti tabler-notes me-2"></i>Cases</h5>
                           <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#caseTypeModal">
    <i class="ti tabler-plus me-1"></i> Add Case
</button>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead>
    <tr>
        <th>Date</th>
        <th>Title</th>
        <th>Type</th>
        <th>Doctor</th>
        <th>Follow Up</th>
        <th>Action</th>
    </tr>
</thead>
                                    <tbody>
                                        @forelse($cases as $case)
                                        <tr id="case-{{ $case->id }}">
                                            <td>{{ $case->created_at->format('d M Y') }}</td>
                                            <td class="fw-semibold">{{ $case->title }}</td>
                                            <td>
                                                <span class="badge bg-label-{{ $case->type == 'text' ? 'primary' : 'info' }}">
                                                    {{ $case->type == 'text' ? 'Text' : 'Handwritten' }}
                                                </span>
                                            </td>
<td>{{ $case->doctor->doctor_name ?? '-' }}</td>
<td>
    @if($case->followUps->isNotEmpty())
        <span class="badge bg-label-warning">
            {{ $case->followUps->first()->follow_up_date ?? '-' }}
        </span>
    @else
        <span class="text-muted small">-</span>
    @endif
</td>
<td>
    <div class="d-flex gap-1">
                                                    <a href="{{ route('view_case', [$patient->id, $case->id]) }}"
                                                       class="btn btn-sm btn-label-primary">
                                                        <i class="ti tabler-eye"></i>
                                                    </a>
                                                    <a href="{{ route('edit_case', [$patient->id, $case->id]) }}"
                                                       class="btn btn-sm btn-label-warning">
                                                        <i class="ti tabler-edit"></i>
                                                    </a>
                                                    <button class="btn btn-sm btn-label-danger delete-case-btn"
                                                            data-id="{{ $case->id }}">
                                                        <i class="ti tabler-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-4">
                                                <i class="ti tabler-notes-off" style="font-size:40px;"></i>
                                                <p class="mt-2">No case notes added yet</p>
                                            </td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Appointments Tab — UNCHANGED --}}
                <div class="tab-pane fade" id="appointmentsTab">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header py-3 d-flex justify-content-between align-items-center">
                            <h5 class="mb-0"><i class="ti tabler-calendar me-2"></i>Appointments</h5>
                            <button class="btn btn-primary btn-sm" id="togglePatientAppointmentForm">
                                <i class="ti tabler-plus me-1"></i> Add Appointment
                            </button>
                        </div>

                        {{-- Inline Appointment Form --}}
                        <div id="patientAppointmentForm" style="display:none;" class="p-4 border-bottom">
                            <div id="patientAptAlertBox" style="display:none;"></div>
                            <form id="patientAppointmentFormEl">
                                @csrf
                                <input type="hidden" name="patient_name" value="{{ $patient->patient_name }}">
                                <input type="hidden" name="patient_phone" value="{{ $patient->phone }}">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Department *</label>
                                        <select name="department" id="patientDeptSelect" class="form-select">
                                            <option value="">Select Department</option>
                                            @foreach($specializations as $s)
                                                <option value="{{ $s }}">{{ $s }}</option>
                                            @endforeach
                                        </select>
                                        <div class="text-danger small" id="error_apt_department"></div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Doctor *</label>
                                        <select name="doctor_id" id="patientDoctorSelect" class="form-select">
                                            <option value="">Select Department First</option>
                                        </select>
                                        <div class="text-danger small" id="error_apt_doctor_id"></div>
                                    </div>
                                    <div class="col-md-4" id="patientDoctorInfoDiv" style="display:none;">
                                        <label class="form-label">Available Days</label>
                                        <input type="text" class="form-control bg-light" id="patientDoctorDays" readonly>
                                    </div>
                                    <div class="col-md-4" id="patientDoctorTimeDiv" style="display:none;">
                                        <label class="form-label">Available Time</label>
                                        <input type="text" class="form-control bg-light" id="patientDoctorTime" readonly>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Date *</label>
                                        <input type="date" name="appointment_date" id="patientAptDate" class="form-control" value="{{ date('Y-m-d') }}">
                                        <div class="text-danger small" id="error_apt_appointment_date"></div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Time *</label>
                                        <input type="time" name="appointment_time" id="patientAptTime" class="form-control">
                                        <div class="text-danger small" id="error_apt_appointment_time"></div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Visit Type</label>
                                        <select name="visit_type" class="form-select">
                                            @foreach(['Consultation','Follow Up','Emergency','Routine Checkup'] as $vt)
                                                <option value="{{ $vt }}">{{ $vt }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Token</label>
                                        <input type="hidden" name="token_number" value="{{ $token }}">
                                        <div class="form-control bg-light" style="cursor:not-allowed;">{{ $token }}</div>
                                    </div>
                                    <div class="col-md-8">
                                        <label class="form-label">Symptoms</label>
                                        <textarea name="symptoms" class="form-control" rows="2"
                                                  placeholder="Symptoms / reason"></textarea>
                                    </div>
                                </div>
                                <hr class="my-3">
                                <div class="d-flex justify-content-end gap-2">
                                    <button type="button" class="btn btn-light" id="closePatientAptForm">Cancel</button>
                                    <button type="submit" class="btn btn-primary" id="patientAptSubmitBtn">
                                        <i class="ti tabler-calendar-plus me-1"></i>
                                        <span id="patientAptSubmitText">Book Appointment</span>
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th>Appt ID</th>
                                            <th>Doctor</th>

                                            <th>Department</th>
                                            <th>Date</th>
                                            <th>Time</th>
                                            <th>Visit Type</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($appointments as $apt)
                                        <tr>
                                            <td>{{ $apt->appointment_id }}</td>
                                            <td>{{ $apt->doctor->doctor_name ?? '-' }}</td>

                                            <td>{{ $apt->department ?? '-' }}</td>
                                            <td>{{ $apt->appointment_date }}</td>
                                            <td>{{ $apt->appointment_time }}</td>
                                            <td>{{ $apt->visit_type ?? '-' }}</td>
                                            <td>
                                                @php
                                                    $cls = match($apt->status) {
                                                        'Confirmed' => 'bg-label-success',
                                                        'Cancelled' => 'bg-label-danger',
                                                        'Closed'    => 'bg-label-info',
                                                        'Completed' => 'bg-label-primary',
                                                        default     => 'bg-label-warning'
                                                    };
                                                @endphp
                                                <span class="badge {{ $cls }}">{{ $apt->status }}</span>
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="7" class="text-center text-muted py-4">
                                                <i class="ti tabler-calendar-off" style="font-size:40px;"></i>
                                                <p class="mt-2 mb-0">No appointments found</p>
                                            </td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <div class="d-flex justify-content-center gap-2 mt-4">
        <button type="button" class="btn btn-outline-danger delete-btn" data-id="{{ $patient->id }}">
            <i class="ti tabler-trash me-1 d-none d-sm-inline"></i> Delete Patient
        </button>
    </div>

    {{-- Delete Patient Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content" style="border-radius:16px;">
                <div class="modal-body text-center p-4">
                    <div class="mb-3">
                        <div style="width:60px;height:60px;background:rgba(198,106,92,0.14);border-radius:50%;
                                    display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow: inset 0 0 0 1px rgba(198,106,92,0.32);">
                            <i class="ti tabler-trash" style="font-size:28px;color:var(--clinic-rose);"></i>
                        </div>
                    </div>

                    <h5 class="fw-bold">Delete Patient</h5>
                    <p class="text-muted">Are you sure?</p>

                    <div class="d-flex justify-content-center gap-2">
                        <button class="btn btn-light" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <form id="deleteForm" method="POST">
                            @csrf
                            @method('DELETE')

                            <button type="submit" id="submit_btn" class="btn btn-danger">
                                Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Add Report Modal --}}
    <div class="modal fade" id="addReportModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content" style="border-radius:16px;">
                <div class="modal-header">
                    <h5 class="modal-title">Add Report</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div id="reportAlertBox" style="display:none;"></div>
                    <form id="reportForm" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Report Type *</label>
                            <select name="report_type" class="form-select" id="report_type">
                                <option value="">Select Type</option>
                                @foreach(['Blood Test','Urine Test','Scan','X-Ray','MRI','ECG','CT Scan','Biopsy','Other'] as $rt)
                                    <option value="{{ $rt }}">{{ $rt }}</option>
                                @endforeach
                            </select>
                            <div class="text-danger small" id="error_report_type"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Report Date *</label>
                            <input type="date" name="report_date" class="form-control" id="report_date">
                            <div class="text-danger small" id="error_report_date"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Upload File (PDF/Image)</label>
                            <input type="file" name="file" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="3" placeholder="Any notes"></textarea>
                        </div>
                    </form>
                </div>
                <div class="text-center mb-4">
                    <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveReportBtn">
                        <span id="saveReportText">Save Report</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Case Type Modal --}}
    <div class="modal fade" id="caseTypeModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius:18px;">
                <div class="modal-header border-0 pb-0">
                    <h5 class="fw-bold">Choose Note Type</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <p class="text-muted mb-4">Select how you want to add the case note</p>
                    <div class="row g-3">
                        <div class="col-6">
                            <a href="{{ route('create_case', $patient->id) }}?type=text" class="text-decoration-none">
                                <div class="card case-type-card border text-center p-4"
                                     style="border-radius:16px;cursor:pointer;"
                                     onmouseover="this.style.borderColor='#3aa873';this.style.background='rgba(58,168,115,0.10)'"
                                     onmouseout="this.style.borderColor='';this.style.background='var(--clinic-panel-soft-2)'">
                                    <div class="mb-3">
                                        <div style="width:60px;height:60px;background:rgba(58,168,115,0.16);border-radius:50%;
                                                    display:flex;align-items:center;justify-content:center;margin:0 auto;">
                                            <i class="ti tabler-text-size" style="font-size:28px;color:var(--clinic-accent-light);"></i>
                                        </div>
                                    </div>
                                    <h6 class="fw-bold mb-1">Text Editor</h6>
                                    <p class="text-muted small mb-0">Rich text with formatting</p>
                                </div>
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('create_case', $patient->id) }}?type=handwritten" class="text-decoration-none">
                                <div class="card case-type-card border text-center p-4"
                                     style="border-radius:16px;cursor:pointer;"
                                     onmouseover="this.style.borderColor='#3aa873';this.style.background='rgba(58,168,115,0.10)'"
                                     onmouseout="this.style.borderColor='';this.style.background='var(--clinic-panel-soft-2)'">
                                    <div class="mb-3">
                                        <div style="width:60px;height:60px;background:rgba(58,168,115,0.16);border-radius:50%;
                                                    display:flex;align-items:center;justify-content:center;margin:0 auto;">
                                            <i class="ti tabler-writing" style="font-size:28px;color:var(--clinic-accent-light);"></i>
                                        </div>
                                    </div>
                                    <h6 class="fw-bold mb-1">Handwritten</h6>
                                    <p class="text-muted small mb-0">Draw with pen</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).on('click', '.delete-btn', function () {

            const id = $(this).data('id');

            $('#deleteForm').attr('action',
                '{{ url("admin/patient") }}/' + id + '/delete');

            $('#deleteModal').modal('show');
        });

        document.getElementById('submit_btn').addEventListener('click', function(e) {

            e.preventDefault();

            this.disabled = true;
            this.innerHTML = 'Processing...';

            document.getElementById('deleteForm').submit();

        });
    </script>
    <script>
    $(document).ready(function() {

        const aptDoctors = @json($doctors);

        // Appointment form toggle
        $('#togglePatientAppointmentForm').on('click', function() {
            $('#patientAppointmentForm').slideToggle(300);
        });

        $('#closePatientAptForm').on('click', function() {
            $('#patientAppointmentForm').slideUp(300);
        });

        // Department change
        $('#patientDeptSelect').on('change', function() {
            const dept = $(this).val();
            const doctorSelect = $('#patientDoctorSelect');
            doctorSelect.html('<option value="">Select Doctor</option>');
            $('#patientDoctorInfoDiv').hide();
            $('#patientDoctorTimeDiv').hide();
            if (!dept) return;
            aptDoctors.filter(d => d.specialization === dept).forEach(function(d) {
                doctorSelect.append('<option value="' + d.id + '">' + d.doctor_name + '</option>');
            });
        });

        // Doctor change
        $('#patientDoctorSelect').on('change', function() {
            const doctorId = $(this).val();
            if (!doctorId) {
                $('#patientDoctorInfoDiv').hide();
                $('#patientDoctorTimeDiv').hide();
                return;
            }
            const doctor = aptDoctors.find(d => d.id == doctorId);
            if (doctor) {
                $('#patientDoctorDays').val(doctor.available_days ? doctor.available_days.join(', ') : '-');
                $('#patientDoctorTime').val((doctor.start_time || '-') + ' to ' + (doctor.end_time || '-'));
                $('#patientAptTime').attr('min', doctor.start_time || '');
                $('#patientAptTime').attr('max', doctor.end_time || '');
                $('#patientDoctorInfoDiv').show();
                $('#patientDoctorTimeDiv').show();
            }
        });

        // Date validation
        $('#patientAptDate').on('change', function() {
            const doctorId = $('#patientDoctorSelect').val();
            if (!doctorId) return;
            const doctor = aptDoctors.find(d => d.id == doctorId);
            if (!doctor || !doctor.available_days || !doctor.available_days.length) return;
            const days        = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
            const selectedDay = days[new Date($(this).val()).getDay()];
            if (!doctor.available_days.includes(selectedDay)) {
                alert('Dr. ' + doctor.doctor_name + ' is not available on ' + selectedDay + '.\nAvailable: ' + doctor.available_days.join(', '));
                $(this).val('');
            }
        });

        // Submit appointment
        $('#patientAppointmentFormEl').on('submit', function(e) {
            e.preventDefault();
            $('.text-danger.small').text('');
            const submitBtn  = $('#patientAptSubmitBtn');
            const submitText = $('#patientAptSubmitText');
            submitBtn.prop('disabled', true);
            submitText.text('Booking...');

            $.ajax({
                url: '{{ route("store_appointment") }}',
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    submitBtn.prop('disabled', false);
                    submitText.text('Book Appointment');
                    if (response.success) {
                        $('#patientAptAlertBox').html('<div class="alert alert-success">' + response.message + '</div>').show();
                        setTimeout(function() { location.reload(); }, 1000);
                    }
                },
                error: function(xhr) {
                    submitBtn.prop('disabled', false);
                    submitText.text('Book Appointment');
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $.each(errors, function(field, messages) {
                            $('#error_apt_' + field).text(messages[0]);
                        });
                    }
                }
            });
        });

        // Save Report
        $('#saveReportBtn').on('click', function() {
            const btn  = $(this);
            const text = $('#saveReportText');
            btn.prop('disabled', true);
            text.text('Saving...');

            $('#report_type, #report_date').removeClass('is-invalid');
            $('#error_report_type, #error_report_date').text('');

            const formData = new FormData(document.getElementById('reportForm'));

            $.ajax({
                url: '{{ route("store_report", $patient->id) }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    btn.prop('disabled', false);
                    text.text('Save Report');
                    if (response.success) {
                        $('#addReportModal').modal('hide');
                        $('#noReports').hide();
                        const r = response.report;
                        const fileBtn = r.file_path
                            ? '<a href="' + r.file_path + '" target="_blank" class="btn btn-sm btn-label-primary"><i class="ti tabler-download"></i></a>'
                            : '';
                        $('#reportsList').prepend(
                            '<div class="card border mb-3 report-card" id="report-' + r.id + '">' +
                            '<div class="card-body p-3 d-flex align-items-center gap-3">' +
                            '<div style="width:44px;height:44px;background:rgba(58,168,115,0.16);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">' +
                            '<i class="ti tabler-file-text" style="color:var(--clinic-accent-light);font-size:20px;"></i></div>' +
                            '<div class="flex-grow-1"><div class="fw-semibold" style="color:var(--clinic-ink);">' + r.report_type + '</div>' +
                            '<div class="text-muted small">' + r.report_date + '</div></div>' +
                            '<div class="d-flex gap-2">' + fileBtn +
                            '<button class="btn btn-sm btn-label-danger delete-report-btn" data-id="' + r.id + '"><i class="ti tabler-trash"></i></button>' +
                            '</div></div></div>'
                        );
                        document.getElementById('reportForm').reset();
                    }
                },
                error: function(xhr) {
                    btn.prop('disabled', false);
                    text.text('Save Report');
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $.each(errors, function(field, messages) {
                            $('#error_' + field).text(messages[0]);
                        });
                    }
                }
            });
        });

        // Delete Report
        $(document).on('click', '.delete-report-btn', function() {
            const id = $(this).data('id');
            if (!confirm('Delete this report?')) return;
            $.ajax({
                url: '{{ url("admin/patient/report") }}/' + id + '/delete',
                method: 'POST',
                data: { _token: '{{ csrf_token() }}', _method: 'DELETE' },
                success: function(response) {
                    if (response.success) {
                        $('#report-' + id).fadeOut(300, function() { $(this).remove(); });
                    }
                }
            });
        });

        // Delete Case
        $(document).on('click', '.delete-case-btn', function() {
            const id = $(this).data('id');
            if (!confirm('Delete this case note?')) return;
            $.ajax({
                url: '{{ url("admin/patient/case") }}/' + id + '/delete',
                method: 'POST',
                data: { _token: '{{ csrf_token() }}', _method: 'DELETE' },
                success: function(response) {
                    if (response.success) {
                        $('#case-' + id).fadeOut(300, function() { $(this).remove(); });
                    }
                }
            });
        });

    });
    </script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('input[name="token_number"]').forEach(function(el) {
            el.setAttribute('disabled', 'disabled');
            el.setAttribute('readonly', 'readonly');
        });
    });
    </script>
@endsection