@extends('Admin.layout')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<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);
    }

    .select2-container--default .select2-selection--single {
        height: 38px !important;
        /* Bootstrap input height */
        border: 1px solid #dee2e6 !important;
        border-radius: 4px !important;
        display: flex;
        align-items: center;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }


    /* 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" method="POST" action="{{ route('add_consultation') }}">
            @csrf

            <input type="hidden" name="patient_id" value="{{ $patient->id }}">
            <input type="hidden" name="appointment_id" value="{{ $appointment->id }}">
            <input type="hidden" name="print_after_save" id="print_after_save" value="0">


            <!-- 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="{{ $patient->patient_name }}" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Age / Gender</label>
                            <input type="text" class="form-control" value="{{ $patient->age }}/{{$patient->gender}}"
                                readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Mobile Number</label>
                            <input type="text" class="form-control" value="{{ $patient->phone }}" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Blood Group</label>
                            <input type="text" class="form-control" value="{{ $patient->blood_group ?? '-' }}" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Last Visit</label>
                        <input type="text" class="form-control"
                            value="{{ $lastVisitDate ? \Carbon\Carbon::parse($lastVisitDate)->format('d-m-Y') : '-' }}"
                            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="number" class="form-control" min="1" 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>

                    </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>
                                        <select
                                            class="form-control medicine-select @error('medicine_required') is-invalid @enderror"
                                            name="medicines[0][medicine_name]" style="width:100%;">
                                            <option value="">Search or Type Medicine</option>
                                        </select>
                                        @error('medicine_required')
                                            <span class="invalid-feedback d-block">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </td>

                                    <td class="text-center">
                                        <input type="checkbox" name="medicines[0][morning]" value="1" disabled>
                                    </td>

                                    <td class="text-center">
                                        <input type="checkbox" name="medicines[0][afternoon]" value="1" disabled>
                                    </td>

                                    <td class="text-center">
                                        <input type="checkbox" name="medicines[0][night]" value="1" disabled>
                                    </td>

                                    <td>
                                        <input type="number" class="form-control" name="medicines[0][days]"
                                            name="medicines[0][days]" disabled>
                                    </td>

                                    <td>
                                        <select class="form-select" name="medicines[0][food]">
                                            <option value="After Food">After Food</option>
                                            <option value="Before Food">Before Food</option>
                                            <option value="Empty Stomach">Empty Stomach</option>
                                        </select>
                                    </td>

                                    <td class="text-center action-buttons">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="removeMedicine(this)">
                                            <i class="ti tabler-trash"></i>
                                        </button>

                                        <button type="button" class="btn btn-primary btn-sm add-medicine-btn"
                                            onclick="addMedicine()">
                                            <i class="ti tabler-plus"></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" id="followup_required">
                                <option value="no" {{ old('followup_required', $consultation->followup_required ?? 'no') == 'no' ? 'selected' : '' }}>
                                    No
                                </option>
                                <option value="yes" {{ old('followup_required', $consultation->followup_required ?? '') == 'yes' ? 'selected' : '' }}>
                                    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" id="followup_date"
                                value="{{ old('followup_date', $consultation->followup_date ?? '') }}">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Remarks</label>
                            <input type="text" class="form-control" name="followup_remarks" id="followup_remarks"
                                value="{{ old('followup_remarks', $consultation->followup_remarks ?? '') }}"
                                placeholder="Any special instructions">
                        </div>
                    </div>
                </div>

            </div>

            <!-- Form Footer -->
            <div class="form-footer">

                <button type="submit" class="btn btn-success" id="saveBtn">
                    <i class="ti tabler-check"></i>
                    <span class="btn-text">Save</span>
                </button>

                <button type="button" class="btn btn-info" id="savePrintBtn">
                    <i class="ti tabler-printer"></i>
                    <span class="btn-text">Save & Print Prescription</span>
                </button>

            </div>

        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

    <script>
        function goBack() {
            window.history.back();
        }

        var $j = jQuery.noConflict();
        let medicineIndex = 1;

        function initSelect2(element) {
            $j(element).select2({
                placeholder: "Search or Type Medicine Name",
                allowClear: true,
                tags: true,
                language: {
                    noResults: function () {
                        return "Medicine not found.";
                    }
                },
                ajax: {
                    url: "{{ route('medicine.search') }}", // Laravel Route
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term // Search query
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                minimumInputLength: 1
            });

            $j(element).on('select2:select select2:clear change', function () {

                let row = $j(this).closest('tr');
                let medicine = $j(this).val();

                let checkboxes = row.find(
                    'input[type="checkbox"][name*="[morning]"], ' +
                    'input[type="checkbox"][name*="[afternoon]"], ' +
                    'input[type="checkbox"][name*="[night]"]'
                );

                let daysInput = row.find('input[name*="[days]"]');

                if (medicine && medicine.trim() !== '') {

                    checkboxes.prop('disabled', false);
                    daysInput.prop('disabled', false);

                } else {

                    checkboxes.prop('checked', false);
                    checkboxes.prop('disabled', true);

                    daysInput.val('');
                    daysInput.prop('disabled', true);
                }
            });
        }
        $j(document).on('click', '.medicine-row input[type="checkbox"]', function (e) {

            let row = $j(this).closest('tr');
            let medicine = row.find('.medicine-select').val();

            if (!medicine) {
                e.preventDefault();
                alert('Please select a medicine first.');
                return false;
            }
        });
        $j(document).ready(function () {
            $j('.medicine-select').each(function () {
                initSelect2(this);
            });

            updateAddButtons();

        });

        function addMedicine() {
            let table = document.getElementById("medicineTable");
            let row = document.createElement("tr");
            row.classList.add("medicine-row");

            row.innerHTML = `
                                    <td>
                                        <select class="form-control medicine-select" 
                                                name="medicines[${medicineIndex}][medicine_name]" 
                                                style="width: 100%;">
                                            <option value="">Search or Type Medicine</option>
                                        </select>
                                    </td>

                                    <td class="text-center">
                                        <input type="checkbox"  name="medicines[${medicineIndex}][morning]" value="1" disabled>
                                    </td>

                                    <td class="text-center">
                                       <input type="checkbox"
                                   name="medicines[${medicineIndex}][afternoon]"
                                   value="1"
                                   disabled>
                                    </td>

                                    <td class="text-center">
                                        <input type="checkbox"
                                   name="medicines[${medicineIndex}][night]"
                                   value="1"
                                   disabled>
                                    </td>

                                    <td>
                                        <input type="number" class="form-control" name="medicines[${medicineIndex}][days]" placeholder="Days" disabled>
                                    </td>

                                    <td>
                                        <select class="form-select" name="medicines[${medicineIndex}][food]">
                                            <option value="After Food">After Food</option>
                                            <option value="Before Food">Before Food</option>
                                            <option value="Empty Stomach">Empty Stomach</option>
                                        </select>
                                    </td>

                                    <td class="text-center action-buttons">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="removeMedicine(this)">
                                            <i class="ti tabler-trash"></i>
                                        </button>

                                        <button type="button" class="btn btn-primary btn-sm add-medicine-btn" onclick="addMedicine()">
                                            <i class="ti tabler-plus"></i>
                                        </button>
                                    </td>
                                `;

            table.appendChild(row);

            let newSelect = row.querySelector('.medicine-select');
            initSelect2(newSelect);

            medicineIndex++;
            updateAddButtons();
        }

        function updateAddButtons() {
            document.querySelectorAll('.add-medicine-btn').forEach(btn => {
                btn.style.display = 'none';
            });

            let rows = document.querySelectorAll('.medicine-row');

            if (rows.length) {
                let lastRowBtn = rows[rows.length - 1].querySelector('.add-medicine-btn');

                if (lastRowBtn) {
                    lastRowBtn.style.display = 'inline-flex';
                }
            }
        }

        function removeMedicine(button) {
            let rows = document.querySelectorAll(".medicine-row");

            if (rows.length == 1) {
                alert("At least one medicine is required.");
                return;
            }

            // Select2-வை முதலில் destroy செய்துவிட்டு row-வை நீக்க வேண்டும்
            let selectElement = button.closest("tr").querySelector('.medicine-select');
            if ($j(selectElement).data('select2')) {
                $j(selectElement).select2('destroy');
            }

            button.closest("tr").remove();
            updateAddButtons();
        }

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

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

        $j(document).ready(function () {

            // Normal Save
            $j('#consultationForm').on('submit', function () {

                let btn = $j('#saveBtn');

                btn.prop('disabled', true);
                btn.find('.btn-text').text('Processing...');

                if (btn.find('.spinner-border').length === 0) {
                    btn.prepend(
                        '<span class="spinner-border spinner-border-sm me-2"></span>'
                    );
                }
            });

            // Save & Print
            $j('#savePrintBtn').on('click', function (e) {

                e.preventDefault();

                let btn = $j(this);

                btn.prop('disabled', true);
                btn.find('.btn-text').text('Processing...');

                if (btn.find('.spinner-border').length === 0) {
                    btn.prepend(
                        '<span class="spinner-border spinner-border-sm me-2"></span>'
                    );
                }

                let formData = new FormData(
                    document.getElementById('consultationForm')
                );

                formData.set('print_after_save', '1');

                $j.ajax({
                    url: $j('#consultationForm').attr('action'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,

                    success: function (response) {

                        if (response.print_url) {

                            // Open prescription in new tab
                            window.open(response.print_url, '_blank');
                        }

                        // Redirect current tab to appointment report
                        window.location.href = response.redirect_url;
                    },

                    error: function () {

                        btn.prop('disabled', false);
                        btn.find('.btn-text').text('Save & Print Prescription');

                        btn.find('.spinner-border').remove();

                        alert('Something went wrong.');
                    }
                });
            });

        });

        function toggleFollowupFields() {

            let followupRequired = $j('#followup_required').val();

            if (followupRequired === 'yes') {

                $j('#followup_date').prop('disabled', false);
                $j('#followup_remarks').prop('disabled', false);

            } else {

                $j('#followup_date').val('').prop('disabled', true);
                $j('#followup_remarks').val('').prop('disabled', true);

            }
        }

        $j(document).ready(function () {

            // Initial load
            toggleFollowupFields();

            // On change
            $j('#followup_required').on('change', function () {
                toggleFollowupFields();
            });

        });
    </script>
@endsection