@extends('Admin.layout')
 <style>
       

        :root {
            --primary: #0891B2;
            --primary-dark: #0E7490;
            --primary-light: #06B6D4;
            --accent: #10B981;
            --danger: #EF4444;
            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-700: #374151;
            --gray-900: #111827;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

      

        /* Header Section */
        .page-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 2.5rem;
            animation: slideDown 0.4s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .back-button {
            background: white;
            border: none;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-md);
            cursor: pointer;
            color: var(--gray-900);
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .back-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            background: var(--primary);
            color: white;
        }

        .back-button svg {
            width: 24px;
            height: 24px;
        }

        .page-title-group h1 {
            font-size: 2rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 0.25rem;
        }

        .page-title-group p {
            color: var(--gray-700);
            font-size: 0.95rem;
            margin: 0;
        }

        /* Main Container */
        .form-container {
            /* max-width: 900px; */
            margin: 0 auto;
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* Form Card */
        .consultation-card {
            background: white;
            border-radius: 16px;
            box-shadow: var(--shadow-lg);
            overflow: hidden;
        }

        /* Form Header */
        .form-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 2.5rem;
            text-align: center;
        }

        .form-header-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            display: inline-block;
        }

        .form-header h2 {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .form-header p {
            font-size: 0.95rem;
            opacity: 0.95;
            margin: 0;
            font-weight: 500;
        }

        /* Form Body */
        .form-body {
            padding: 2.5rem;
        }

        /* Form Sections */
        .form-section {
            margin-bottom: 2.5rem;
        }

        .form-section:last-child {
            margin-bottom: 0;
        }

        .section-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, var(--gray-200) 20%, var(--gray-200) 80%, transparent);
            margin-bottom: 2.5rem;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.75rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--gray-100);
        }

        .section-header-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .section-header h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--gray-900);
            margin: 0;
        }

        /* Form Grid */
        .form-row {
            display: grid;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-row-2 {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        .form-row-3 {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }

        .form-row-4 {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 0.75rem;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            opacity: 0.9;
        }

        .form-control,
        .form-select {
            border: 1.5px solid var(--gray-200);
            border-radius: 10px;
            padding: 0.875rem 1rem;
            font-size: 0.95rem;
            color: var(--gray-900);
            background-color: white;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.15);
            outline: none;
        }

        .form-control:disabled,
        .form-control[readonly],
        .form-select:disabled {
            background-color: var(--gray-100);
            border-color: var(--gray-200);
            color: var(--gray-700);
            cursor: not-allowed;
        }

        textarea.form-control {
            resize: vertical;
            min-height: 110px;
            line-height: 1.6;
        }

        .form-text {
            font-size: 0.8rem;
            color: var(--gray-700);
            margin-top: 0.5rem;
            opacity: 0.8;
        }

        /* Vitals Section */
        .vitals-grid {
            background: var(--gray-50);
            padding: 1.5rem;
            border-radius: 10px;
            border: 1px solid var(--gray-200);
        }

        /* Prescription Table */
        .prescription-section {
            overflow-x: auto;
        }

        .prescription-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1.5rem;
        }

        .prescription-table thead {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        }

        .prescription-table thead th {
            color: white;
            padding: 1rem;
            font-weight: 600;
            font-size: 0.85rem;
            text-align: center;
            letter-spacing: 0.5px;
            border: none;
            text-transform: uppercase;
        }

        .prescription-table thead th:first-child {
            text-align: left;
            border-radius: 10px 0 0 0;
        }

        .prescription-table thead th:last-child {
            border-radius: 0 10px 0 0;
        }

        .prescription-table tbody td {
            padding: 1rem;
            border-bottom: 1px solid var(--gray-200);
            vertical-align: middle;
            font-size: 0.95rem;
        }

        .prescription-table tbody tr:hover {
            background-color: var(--gray-50);
        }

        .prescription-table .form-control,
        .prescription-table .form-select {
            padding: 0.6rem 0.75rem;
            font-size: 0.9rem;
            border: 1px solid var(--gray-200);
        }

        .prescription-table .text-center {
            text-align: center;
        }

        /* Checkbox */
        input[type="checkbox"] {
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid var(--gray-300);
            border-radius: 6px;
            cursor: pointer;
            accent-color: var(--primary);
            transition: all 0.2s ease;
        }

        input[type="checkbox"]:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        input[type="checkbox"]:hover {
            border-color: var(--primary);
            transform: scale(1.1);
        }

        /* Buttons */
        .btn {
            border-radius: 10px;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(8, 145, 178, 0.3);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, var(--accent) 0%, #059669 100%);
            color: white;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(16, 185, 129, 0.3);
            color: white;
        }

        .btn-info {
            background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            color: white;
        }

        .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
            color: white;
        }

        .btn-danger {
            background-color: var(--danger);
            color: white;
            padding: 0.5rem 0.75rem;
            font-size: 0.85rem;
        }

        .btn-danger:hover {
            background-color: #DC2626;
            color: white;
        }

        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }

        .btn i {
            font-size: 1.1rem;
        }

        /* Add Medicine Section */
        .add-medicine-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        /* Form Footer */
        .form-footer {
            background: var(--gray-50);
            padding: 2.5rem;
            border-top: 1px solid var(--gray-200);
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .form-footer .btn {
            flex: 1;
            min-width: 200px;
            justify-content: center;
        }

        /* Patient Status Badge */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: #ECFDF5;
            color: #065F46;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 0.5rem;
        }

        .status-badge i {
            font-size: 1rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .page-header {
                margin-bottom: 1.5rem;
            }

            .page-title-group h1 {
                font-size: 1.5rem;
            }

            .form-header {
                padding: 1.75rem;
            }

            .form-header-icon {
                font-size: 2.25rem;
                margin-bottom: 0.75rem;
            }

            .form-header h2 {
                font-size: 1.4rem;
            }

            .form-body {
                padding: 1.5rem;
            }

            .form-row {
                gap: 1.25rem;
                margin-bottom: 1.25rem;
            }

            .form-row-2,
            .form-row-3,
            .form-row-4 {
                grid-template-columns: 1fr;
            }

            .section-header {
                margin-bottom: 1.25rem;
            }

            .vitals-grid {
                padding: 1.25rem;
            }

            .prescription-table thead th {
                padding: 0.75rem 0.5rem;
                font-size: 0.75rem;
            }

            .prescription-table tbody td {
                padding: 0.75rem 0.5rem;
                font-size: 0.9rem;
            }

            .add-medicine-header {
                margin-bottom: 1rem;
            }

            .add-medicine-header .btn {
                width: 100%;
                justify-content: center;
            }

            .form-footer {
                padding: 1.5rem;
                flex-direction: column;
            }

            .form-footer .btn {
                width: 100%;
                min-width: auto;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 0.75rem;
            }

            .page-header {
                gap: 0.75rem;
                margin-bottom: 1.25rem;
            }

            .page-title-group h1 {
                font-size: 1.25rem;
            }

            .page-title-group p {
                font-size: 0.85rem;
            }

            .consultation-card {
                border-radius: 12px;
            }

            .form-header {
                padding: 1.5rem 1rem;
            }

            .form-header-icon {
                font-size: 2rem;
                margin-bottom: 0.5rem;
            }

            .form-header h2 {
                font-size: 1.2rem;
            }

            .form-header p {
                font-size: 0.85rem;
            }

            .form-body {
                padding: 1rem;
            }

            .section-header {
                margin-bottom: 1rem;
                padding-bottom: 0.75rem;
            }

            .section-header h3 {
                font-size: 1.1rem;
            }

            .form-row {
                gap: 1rem;
                margin-bottom: 1rem;
            }

            .form-label {
                font-size: 0.8rem;
                margin-bottom: 0.5rem;
            }

            .form-control,
            .form-select {
                padding: 0.7rem 0.75rem;
                font-size: 0.9rem;
                border-radius: 8px;
            }

            textarea.form-control {
                min-height: 90px;
            }

            .prescription-table {
                margin-bottom: 1rem;
            }

            .prescription-table thead th {
                padding: 0.6rem 0.4rem;
                font-size: 0.7rem;
            }

            .prescription-table tbody td {
                padding: 0.6rem 0.4rem;
                font-size: 0.85rem;
            }

            .form-footer {
                padding: 1rem;
                gap: 0.5rem;
            }

            .btn {
                padding: 0.65rem 1rem;
                font-size: 0.85rem;
                border-radius: 8px;
            }

            .btn-sm {
                padding: 0.4rem 0.75rem;
                font-size: 0.75rem;
            }

            input[type="checkbox"] {
                width: 1.1rem;
                height: 1.1rem;
            }
        }

        /* Print Styles */
        @media print {
            body {
                background: white;
                padding: 0;
            }

            .page-header,
            .form-footer,
            .back-button {
                display: none;
            }

            .consultation-card {
                box-shadow: none;
                max-width: 100%;
            }

            .form-body {
                padding: 0;
            }
        }

        /* Accessibility */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* Focus visible for keyboard navigation */
        .btn:focus-visible,
        .form-control:focus-visible,
        .form-select:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
    </style>
@section('content')
    <!-- Page Header -->
    <div class="page-header">
        <button class="back-button" onclick="goBack()" title="Go back">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M15 6l-6 6l6 6" />
            </svg>
        </button>
        <div class="page-title-group">
            <h1>Patient Consultation</h1>
            <p>Appointment ID: #APT-2026-07-12345</p>
        </div>
    </div>

    <!-- Form Container -->
    <div class="form-container">
        <form class="consultation-card" id="consultationForm">
        

            <!-- Form Body -->
            <div class="form-body">

                <!-- 1. PATIENT INFORMATION -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-header-icon">
                            <i class="ti tabler-user"></i>
                        </div>
                        <h3>Patient Information</h3>
                    </div>

                    <div class="form-row form-row-2">
                        <div class="form-group">
                            <label class="form-label">Patient Name</label>
                            <input type="text" class="form-control" value="John David" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Age / Gender</label>
                            <input type="text" class="form-control" value="28 / Male" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Mobile Number</label>
                            <input type="text" class="form-control" value="9876543210" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Blood Group</label>
                            <input type="text" class="form-control" value="O+" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Last Visit</label>
                        <input type="text" class="form-control" value="05/07/2026 - General Checkup" readonly>
                        <div class="status-badge">
                            <i class="ti tabler-check"></i>
                            Patient Verified
                        </div>
                    </div>
                </div>

                <div class="section-divider"></div>

                <!-- 2. SYMPTOMS / CHIEF COMPLAINT -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-header-icon">
                            <i class="ti tabler-notes"></i>
                        </div>
                        <h3>Symptoms / Chief Complaint</h3>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Reason for Visit</label>
                        <textarea class="form-control" name="symptoms" placeholder="Example:&#10;Fever for 2 days&#10;Headache&#10;Stomach Pain"></textarea>
                        <small class="form-text">Describe all symptoms and complaints</small>
                    </div>
                </div>

                <div class="section-divider"></div>

                <!-- 3. VITALS (OPTIONAL) -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-header-icon">
                            <i class="ti tabler-heart-rate-monitor"></i>
                        </div>
                        <h3>Vitals <span style="font-size: 0.85rem; color: var(--gray-700); font-weight: 500;">(Optional)</span></h3>
                    </div>

                    <div class="vitals-grid">
                        <div class="form-row form-row-4">
                            <div class="form-group">
                                <label class="form-label">Blood Pressure</label>
                                <input type="text" class="form-control" name="bp" placeholder="120/80 mmHg">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Weight</label>
                                <input type="text" class="form-control" name="weight" placeholder="65 Kg">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Temperature</label>
                                <input type="text" class="form-control" name="temperature" placeholder="98.6°F">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Pulse</label>
                                <input type="text" class="form-control" name="pulse" placeholder="72 bpm">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section-divider"></div>

                <!-- 4. DIAGNOSIS -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-header-icon">
                            <i class="ti tabler-report-medical"></i>
                        </div>
                        <h3>Diagnosis</h3>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Diagnosis Details</label>
                        <textarea class="form-control" name="diagnosis" placeholder="Example:&#10;Viral Fever&#10;Gastritis&#10;Migraine"></textarea>
                        <small class="form-text">Enter the diagnosis based on examination and findings</small>
                    </div>
                </div>

                <div class="section-divider"></div>

                <!-- 5. PRESCRIPTION -->
                <div class="form-section">
                    <div class="add-medicine-header">
                        <div class="section-header" style="margin: 0; padding: 0; border: none; flex: 1;">
                            <div class="section-header-icon">
                                <i class="ti tabler-pill"></i>
                            </div>
                            <h3 style="margin: 0;">Prescription</h3>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm" onclick="addMedicine()">
                            <i class="ti tabler-plus"></i>
                            Add Medicine
                        </button>
                    </div>

                    <div class="prescription-section">
                        <table class="prescription-table">
                            <thead>
                                <tr>
                                    <th>Medicine</th>
                                    <th>Morning</th>
                                    <th>Afternoon</th>
                                    <th>Night</th>
                                    <th>Days</th>
                                    <th>Food</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="medicineTable">
                                <tr class="medicine-row">
                                    <td>
                                        <input type="text" class="form-control" value="Paracetamol" placeholder="Medicine name">
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="morning-dose" checked>
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="afternoon-dose" checked>
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="night-dose" checked>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" value="5" placeholder="Days">
                                    </td>
                                    <td>
                                        <select class="form-select">
                                            <option>After Food</option>
                                            <option>Before Food</option>
                                            <option>Empty Stomach</option>
                                        </select>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="removeMedicine(this)">
                                            <i class="ti tabler-trash"></i>
                                        </button>
                                    </td>
                                </tr>

                                <tr class="medicine-row">
                                    <td>
                                        <input type="text" class="form-control" value="Pantoprazole" placeholder="Medicine name">
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="morning-dose" checked>
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="afternoon-dose">
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" class="night-dose">
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" value="7" placeholder="Days">
                                    </td>
                                    <td>
                                        <select class="form-select">
                                            <option>Before Food</option>
                                            <option>After Food</option>
                                            <option>Empty Stomach</option>
                                        </select>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="removeMedicine(this)">
                                            <i class="ti tabler-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="section-divider"></div>

                <!-- 6. ADVICE -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-header-icon">
                            <i class="ti tabler-message-heart"></i>
                        </div>
                        <h3>Advice</h3>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Doctor's Recommendations</label>
                        <textarea class="form-control" name="advice" placeholder="Example:&#10;Drink plenty of water.&#10;Take rest.&#10;Avoid spicy food."></textarea>
                        <small class="form-text">Provide health advice and lifestyle recommendations</small>
                    </div>
                </div>

                <div class="section-divider"></div>

                <!-- 7. FOLLOW-UP -->
                <div class="form-section">
                    <div class="section-header">
                        <div class="section-header-icon">
                            <i class="ti tabler-calendar-repeat"></i>
                        </div>
                        <h3>Follow-up</h3>
                    </div>

                    <div class="form-row form-row-3">
                        <div class="form-group">
                            <label class="form-label">Follow-up Required</label>
                            <select class="form-select" name="followup_required">
                                <option value="no">No</option>
                                <option value="yes">Yes</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Follow-up Date</label>
                            <input type="date" class="form-control" name="followup_date">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Remarks</label>
                            <input type="text" class="form-control" name="followup_remarks" placeholder="Any special instructions">
                        </div>
                    </div>
                </div>

            </div>

            <!-- Form Footer -->
            <div class="form-footer">
                <button type="button" class="btn btn-success" onclick="saveConsultation()">
                    <i class="ti tabler-device-floppy"></i>
                    Save Consultation
                </button>
                <button type="button" class="btn btn-info" onclick="printPrescription()">
                    <i class="ti tabler-printer"></i>
                    Print Prescription
                </button>
                <button type="button" class="btn btn-primary" onclick="completeAppointment()">
                    <i class="ti tabler-check"></i>
                    Complete Appointment
                </button>
            </div>

        </form>
    </div>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        function goBack() {
            window.history.back();
        }

        function addMedicine() {
            const medicineTable = document.getElementById('medicineTable');
            const newRow = document.createElement('tr');
            newRow.className = 'medicine-row';
            newRow.innerHTML = `
                <td>
                    <input type="text" class="form-control" placeholder="Medicine name">
                </td>
                <td class="text-center">
                    <input type="checkbox" class="morning-dose">
                </td>
                <td class="text-center">
                    <input type="checkbox" class="afternoon-dose">
                </td>
                <td class="text-center">
                    <input type="checkbox" class="night-dose">
                </td>
                <td>
                    <input type="text" class="form-control" placeholder="Days">
                </td>
                <td>
                    <select class="form-select">
                        <option>After Food</option>
                        <option>Before Food</option>
                        <option>Empty Stomach</option>
                    </select>
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeMedicine(this)">
                        <i class="ti tabler-trash"></i>
                    </button>
                </td>
            `;
            medicineTable.appendChild(newRow);
        }

        function removeMedicine(button) {
            button.closest('tr').remove();
        }

        function saveConsultation() {
            const form = document.getElementById('consultationForm');
            const formData = new FormData(form);
            
            // Collect prescription data
            const medicines = [];
            document.querySelectorAll('.medicine-row').forEach(row => {
                medicines.push({
                    name: row.querySelector('input[placeholder="Medicine name"]').value,
                    morning: row.querySelector('.morning-dose').checked,
                    afternoon: row.querySelector('.afternoon-dose').checked,
                    night: row.querySelector('.night-dose').checked,
                    days: row.querySelector('input[placeholder="Days"]').value,
                    food: row.querySelector('select').value
                });
            });

            console.log('Form data:', Object.fromEntries(formData));
            console.log('Medicines:', medicines);
            
            alert('Consultation saved successfully!');
        }

        function printPrescription() {
            window.print();
        }

        function completeAppointment() {
            if (confirm('Are you sure you want to complete this appointment?')) {
                alert('Appointment marked as completed!');
                goBack();
            }
        }
    </script>
@endsection