@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">
        <div class="consultation-card">
            @csrf

            <!-- 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="{{ $consultation->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="{{ $lastVisit ? \Carbon\Carbon::parse($lastVisit->follow_up_date)->format('d-m-Y') : 'No Previous Visit' }}"
                            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" readonly>{{ $consultation->symptoms ?? '-' }}</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"
                                    value="{{ old('bp', $consultation->bp ?? '') }}" placeholder="120/80 mmHg" readonly>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Weight</label>
                                <input type="text" class="form-control" name="weight"
                                    value="{{ old('weight', $consultation->weight ?? '') }}" placeholder="65 Kg" readonly>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Temperature</label>
                                <input type="text" class="form-control" name="temperature"
                                    value="{{ old('temperature', $consultation->temperature ?? '') }}" placeholder="98.6°F"
                                    readonly>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Pulse</label>
                                <input type="text" class="form-control" value="{{ $consultation->pulse ?? '-' }}" readonly>
                            </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" readonly>{{ $consultation->diagnosis ?? '-' }}</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">

                                @if($consultation && $consultation->medicines->count())

                                    @foreach($consultation->medicines as $medicine)

                                                        <tr class="medicine-row">

                                                            <td>
                                                                <input type="text" class="form-control" value="{{ 
                                                                        $medicine->product
                                        ? $medicine->product->product_name .
                                        (!empty($medicine->product->st_val) && !empty($medicine->product->st_unit)
                                            ? ' - ' . $medicine->product->st_val . $medicine->product->st_unit
                                            : '')
                                        : $medicine->medicine_name
                                                                    }}" readonly>
                                                            </td>

                                                            <td class="text-center">
                                                                <input type="checkbox" {{ $medicine->morning ? 'checked' : '' }}
                                                                    style="pointer-events: none;">
                                                            </td>

                                                            <td class="text-center">
                                                                <input type="checkbox" {{ $medicine->afternoon ? 'checked' : '' }}
                                                                    style="pointer-events: none;">
                                                            </td>

                                                            <td class="text-center">
                                                                <input type="checkbox" {{ $medicine->night ? 'checked' : '' }}
                                                                    style="pointer-events: none;">
                                                            </td>

                                                            <td>
                                                                <input type="number" class="form-control" value="{{ $medicine->days }}" readonly>
                                                            </td>

                                                            <td>
                                                                <input type="text" class="form-control" value="{{ $medicine->food }}" readonly>
                                                            </td>

                                                            <td class="text-center">
                                                                <span class="status-badge">
                                                                    <i class="ti tabler-check"></i>
                                                                    Prescribed
                                                                </span>
                                                            </td>

                                                        </tr>

                                    @endforeach

                                @else

                                    <tr>
                                        <td colspan="7" class="text-center">
                                            No medicines prescribed
                                        </td>
                                    </tr>

                                @endif

                            </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.">{{ old('advice', $consultation->advice ?? '') }}</textarea>
                        <small class="form-text">Provide health advice and lifestyle recommendations</small>
                    </div>
                </div>

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

                <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" {{ 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"
                                value="{{ old('followup_date', $consultation && $consultation->followup_date ? \Carbon\Carbon::parse($consultation->followup_date)->format('Y-m-d') : '') }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Remarks</label>
                            <input type="text" class="form-control" name="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="button" class="btn btn-info" id="printBtn" onclick="printPrescription()">
                    <i class="ti tabler-printer"></i>
                    <span class="btn-text">Print Prescription</span>
                </button>

            </div>

        </div>
    </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 printPrescription() {

            let $btn = $('#printBtn');

            let printWindow = window.open(
                "{{ route('print_presc', $consultation->id) }}",
                "_blank"
            );

            if (printWindow) {
                printWindow.onload = function () {
                    $btn.prop('disabled', false)
                        .html('<i class="ti tabler-printer"></i> Print Prescription');
                };
            } else {
                $btn.prop('disabled', false)
                    .html('<i class="ti tabler-printer"></i> Print Prescription');

                alert('Please allow popups to print the prescription.');
            }
        }
    </script>
@endsection