@include('admin.header')
<style>
    .offcanvas { transition: transform 0.4s ease-in-out; }
    .apt-table tbody tr { cursor: pointer; }
    .apt-table tbody tr:hover td { background-color: #f0f6ff !important; transition: background 0.15s; }
    .apt-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; padding: 11px 14px; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
    .apt-table tbody td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
    .apt-table tbody tr:last-child td { border-bottom: none; }
    .apt-row-title { font-size: 0.83rem; font-weight: 600; color: #1e293b; line-height: 1.3;text-transform: capitalize; }
    .apt-row-sub { font-size: 0.74rem; color: #94a3b8; line-height: 1.5; }
    .specialty-tag { font-size: 0.72rem; color: #6c757d; }

    /* Offcanvas detail styles */
    .oc-section { background:#fff; border-radius:12px; padding:16px; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,.07); }
    .oc-section-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
    .oc-section-title::after { content:''; flex:1; height:1px; background:#f1f5f9; }
    .oc-info-row { display:flex; align-items:flex-start; justify-content:space-between; padding:5px 0; border-bottom:1px solid #f8fafc; font-size:0.82rem; gap:8px; }
    .oc-info-row:last-child { border-bottom:none; padding-bottom:0; }
    .oc-label { color:#94a3b8; display:flex; align-items:center; gap:5px; min-width:110px; flex-shrink:0; }
    .oc-value { color:#1e293b; font-weight:500; text-align:left; word-break:break-word; }
    .oc-hero { background:linear-gradient(135deg,#1e3a8a,#2563eb); border-radius:12px; padding:20px 16px 16px; margin-bottom:12px; color:#fff; text-align:center; }
    .oc-hero img { border:3px solid rgba(255,255,255,.35); }
    .oc-hero .doctor-name { font-size:1rem; font-weight:700; margin:10px 0 2px; }
    .oc-hero .doctor-spec { font-size:0.75rem; opacity:.85; }
    .oc-hero .doctor-qual { font-size:0.73rem; opacity:.7; margin-top:2px; }
    .oc-hero-meta { display:flex; justify-content:space-around; gap:16px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2); }
    .oc-hero-meta-item { text-align:center; }
    .oc-hero-meta-item span { display:block; font-size:0.68rem; opacity:.7; margin-top:2px; }
    .oc-pay-final { background:linear-gradient(135deg,#059669,#10b981); border-radius:10px; padding:14px; color:#fff; margin-bottom:10px; }
    .oc-pay-final .label { font-size:0.72rem; opacity:.85; }
    .oc-pay-final .amount { font-size:1.6rem; font-weight:700; line-height:1; }

    .oc-doctor-card {
    background:#fff;
    border-radius:12px;
    padding:12px;
    margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
}

.oc-section {
    padding:12px;
    margin-bottom:10px;
}

.oc-info-row {
    font-size:0.78rem;
    padding:4px 0;
}

.oc-label {
    min-width:95px;
    font-size:0.75rem;
}

.oc-value {
    font-size:0.78rem;
}

.oc-patient-card {
    background:#f8fafc;
    border-radius:10px;
    padding:10px;
}

.oc-chip {
    background:#e2e8f0;
    border-radius:999px;
    padding:3px 8px;
    font-size:0.7rem;
    color:#334155;
}


.oc-payment-card {
    background:#fff;
    border-radius:12px;
    padding:14px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
    margin-bottom:12px;
}

.oc-payment-card .amount {
    font-size:1.4rem;
    font-weight:700;
    color:#059669;
}

.oc-payment-card .label {
    font-size:0.72rem;
    color:#94a3b8;
}

.oc-payment-highlight {
    border:1px solid #d1fae5;
    background:#ecfdf5;
}

.oc-payment-top .amount {
    font-size:1.4rem;
    font-weight:700;
    color:#059669;
}

.oc-payment-top .label {
    font-size:0.72rem;
    color:#6b7280;
}

.oc-divider {
    height:1px;
    background:#f1f5f9;
}

.oc-header {
    background:#fff;
    border-bottom:1px solid #f1f5f9;
}

/* icon polish */
.oc-header-icon {
    font-size:1rem;
}

/* title better readability */
.oc-title {
    font-size:0.9rem;
    letter-spacing:0.2px;
}

/* second row spacing */
.oc-sub-row {
    margin-top:6px;
}

/* label styling */
.oc-sub-label {
    font-size:0.65rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#94a3b8;
}

/* booking id highlight */
.oc-booking-id {
    font-size:0.82rem;
    background:#f8fafc;
    padding:2px 8px;
    border-radius:6px;
    display:inline-block;
}

/* badge polish */
#header_status_badge .badge {
    font-size:0.7rem;
    padding:4px 10px;
    border-radius:999px;
    font-weight:500;
}


/* container spacing */
.oc-sub-row {
    margin-top:6px;
}

/* label */
.oc-sub-label {
    font-size:0.65rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#94a3b8;
}

/* booking id */
.oc-booking-id {
    font-size:0.8rem;
    font-weight:600;
    color:#0f172a;
    background:#f1f5f9;
    padding:2px 8px;
    border-radius:6px;
}

/* requested */
.oc-requested {
    font-size:0.78rem;
    color:#475569;
}

/* spacing between blocks */
.oc-sub-row > div > div {
    display:flex;
    align-items:center;
}

.oc-requested-badge {
    background:#eff6ff;
    color:#2563eb;
    font-size:0.7rem;
    padding:4px 8px;
    border-radius:999px;
    font-weight:500;
}

</style>

<!-- Begin Wrapper -->
<div class="main-wrapper">

    <!-- Topbar Start -->
    @include('admin.topbar')
    <!-- Topbar End -->

    <!-- Sidenav Menu Start -->
    @include('admin.leftbar')
    <!-- Sidenav Menu End -->

    <!-- ========================
			Start Page Content
		========================= -->

    <div class="page-wrapper">

        <!-- Start Content -->
        <div class="content">
            <!-- Start Page Header -->
            <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3 pb-3 border-bottom">
                <div class="flex-grow-1">
                    <h4 class="fw-bold mb-0">Appointment List</h4>
                </div>
            </div>
            <!-- End Page Header -->

            <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Appointment Management</h5>
                        <form method="GET" class="d-flex gap-2" style="width: 600px;">
                            <input type="search" name="search"
                                class="form-control form-control-sm"
                                placeholder="Search appointment..."
                                value="{{ $search ?? '' }}">

                            <select name="status" class="form-select form-select-sm" style="max-width: 180px;">
                                <option value="all" {{ ($status ?? 'all') === 'all' ? 'selected' : '' }}>All Status</option>
                                <option value="requested"        {{ ($status ?? '') === 'requested'        ? 'selected' : '' }}>Requested</option>
                                <option value="confirmed"        {{ ($status ?? '') === 'confirmed'        ? 'selected' : '' }}>Confirmed</option>
                                <option value="rejected"         {{ ($status ?? '') === 'rejected'         ? 'selected' : '' }}>Rejected</option>
                                <option value="waiting"          {{ ($status ?? '') === 'waiting'          ? 'selected' : '' }}>Waiting</option>
                                <option value="ongoing"          {{ ($status ?? '') === 'ongoing'          ? 'selected' : '' }}>Ongoing</option>
                                <option value="completed"        {{ ($status ?? '') === 'completed'        ? 'selected' : '' }}>Completed</option>
                                <option value="cancelled"        {{ ($status ?? '') === 'cancelled'        ? 'selected' : '' }}>Cancelled</option>
                                <option value="rescheduled"      {{ ($status ?? '') === 'rescheduled'      ? 'selected' : '' }}>Rescheduled</option>
                                <option value="no_show"          {{ ($status ?? '') === 'no_show'          ? 'selected' : '' }}>No Show</option>
                                <option value="doctor_cancelled"  {{ ($status ?? '') === 'doctor_cancelled'  ? 'selected' : '' }}>Doctor Cancelled</option>
                                <option value="patient_cancelled" {{ ($status ?? '') === 'patient_cancelled' ? 'selected' : '' }}>Patient Cancelled</option>
                            </select>

                            <button type="submit" class="btn btn-sm btn-outline-primary">
                                <i class="ti ti-search"></i> Filter
                            </button>
                        </form>
                    </div>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0 apt-table">
                            <thead class="table-light">
                            <tr>
                                <th style="width:44px;">#</th>
                                <th style="min-width:200px;">Booking</th>
                                <th style="min-width:180px;">Doctor</th>
                                <th style="min-width:160px;">Patient</th>
                                <th style="min-width:120px;">Amount</th>
                                <th style="min-width:120px;">Status</th>
                                <th class="text-end" style="width:60px;">Actions</th>
                            </tr>
                            </thead>
                            
                        
                            @if(!empty($appointment_array))
                            <tbody>
                                <!-- Doctor List -->
                                    @php
                                    $i = 1;
                                    @endphp
                                    @foreach($appointment_array as $key => $list_data)
                                    @php
                                        $specilitiesName = CommonTrait::getSpecilitiesName($list_data->id);
                                        $paymentDetails = CommonTrait::getPaymentDetails($list_data->appointmentId);
                                        $patientInfo = json_decode($list_data->patient_info, true);
                                        $doctorInfo = json_decode($list_data->doctor_info, true);
                                        
                                    @endphp 
                                <tr onclick="appointmentDetails('{{ $list_data->appointmentId }}','{{ $list_data->id }}')">
                                    <td>{{ $i }}</td>
                                    <td>
                                        <div class="apt-row-title">{{ $list_data->booking_reference }}</div>
                                        <div class="d-flex align-items-center gap-1 mt-1">
                                            <i class="ti ti-calendar-event text-primary" style="font-size:0.75rem;"></i>
                                            <span class="apt-row-sub">{{ \Carbon\Carbon::parse($list_data->appointment_date)->format('d M Y') }}</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-1">
                                            <i class="ti ti-clock text-primary" style="font-size:0.75rem;"></i>
                                            <span class="apt-row-sub">{{ \Carbon\Carbon::parse($list_data->start_time)->format('h:i A') }} &ndash; {{ \Carbon\Carbon::parse($list_data->end_time)->format('h:i A') }}</span>
                                        </div>
                                        <span class="badge mt-1 px-2" style="font-size:0.65rem;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;">{{ $list_data->consultation_mode }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <img src="{{ !empty($list_data->profile_image_url) ? $list_data->profile_image_url : ($list_data->gender === 'female' ? 'https://b2c-jivocare.s3.ap-south-1.amazonaws.com/miscellaneous/no-doctor-female.png' : 'https://b2c-jivocare.s3.ap-south-1.amazonaws.com/miscellaneous/no-doctor-male.png') }}"
                                                class="rounded-circle flex-shrink-0" width="38" height="38" style="object-fit:cover;border:2px solid #e2e8f0;">
                                            <div style="min-width:0;">
                                                <div class="apt-row-title text-truncate" style="max-width:150px;">{{ $list_data->salutation }} {{ $list_data->first_name }} {{ $list_data->last_name }}</div>
                                                <span class="apt-row-sub d-block" style="color:#0369a1;">{{ $specilitiesName }}</span>
                                                <div class="apt-row-sub mt-1" style="font-size:0.7rem;color:#64748b;">
                                                    <i class="ti ti-phone" style="font-size:0.65rem;"></i> {{ $list_data->phone ?? 'N/A' }}
                                                </div>
                                                <div class="apt-row-sub" style="font-size:0.7rem;color:#64748b;word-break:break-word;">
                                                    <i class="ti ti-mail" style="font-size:0.65rem;"></i> {{ $list_data->email ?? 'N/A' }}
                                                </div>
                                                <div class="apt-row-sub" style="font-size:0.7rem;color:#64748b;">
                                                    <i class="ti ti-building-hospital" style="font-size:0.65rem;"></i> {{ $list_data->clinic_name ?? 'N/A' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="apt-row-title">
                                            {{ $patientInfo['data']['full_name'] ?? $list_data->patient_name }}
                                            @if(isset($patientInfo['data']['relation']) && strtolower($patientInfo['data']['relation']) !== 'self')
                                                <span style="color:#7c3aed;font-size:0.85em;"> ({{ ucfirst($patientInfo['data']['relation']) }})</span>
                                            @endif
                                        </div>
                                        <div class="d-flex align-items-center gap-1 mt-1">
                                            <i class="ti ti-phone" style="font-size:0.73rem;color:#94a3b8;"></i>
                                            <span class="apt-row-sub">{{ $patientInfo['data']['mobile'] ?? 'N/A' }}</span>
                                        </div>
                                        @if(!empty($patientInfo['data']['age']) || !empty($patientInfo['data']['gender']))
                                            <span class="apt-row-sub">{{ $patientInfo['data']['age'] ?? '' }}{{ !empty($patientInfo['data']['age']) ? ' yrs' : '' }}{{ !empty($patientInfo['data']['gender']) ? ' · ' . ucfirst($patientInfo['data']['gender']) : '' }}</span>
                                        @endif
                                        @if(!empty($patientInfo['data']['relation_type']) && $patientInfo['data']['relation_type'] !== 'self')
                                            <div class="apt-row-sub mt-1" style="color:#7c3aed;font-size:0.7rem;">
                                                <i class="ti ti-user" style="font-size:0.65rem;"></i> {{ ucfirst($patientInfo['data']['relation_type']) }}
                                            </div>
                                        @endif
                                    </td>

                                    <td>
                                        @if($paymentDetails)
                                            @php
                                                $payStatus = strtolower($paymentDetails?->payment_status ?? 'pending');
                                                $payClass = match($payStatus) {
                                                    'success' => 'bg-success',
                                                    'pending' => 'bg-warning',
                                                    'failed'  => 'bg-danger',
                                                    'refunded'=> 'bg-secondary',
                                                    default   => 'bg-warning',
                                                };
                                            @endphp
                                            <div class="apt-row-title" style="color:#0f172a;">₹{{ number_format($paymentDetails->final_amount ?? 0, 2) }}</div>
                                            <span class="badge rounded-pill {{ $payClass }} mt-1" style="font-size:0.65rem;">{{ ucfirst($payStatus) }}</span>
                                        @else
                                            <span class="badge bg-light text-secondary border" style="font-size:0.7rem;">No Data</span>
                                        @endif
                                    </td>
                                    
                                    <td>
                                        @php
                                            $status = strtolower($list_data->status);
                                            $badgeStyle = match($status) {
                                                'requested'        => 'background:#fef3c7;color:#92400e;border:1px solid #fde68a;',
                                                'confirmed'        => 'background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;',
                                                'rejected'         => 'background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;',
                                                'waiting'          => 'background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;',
                                                'ongoing'          => 'background:#ede9fe;color:#7c3aed;border:1px solid #ddd6fe;',
                                                'completed'        => 'background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;',
                                                'cancelled'        => 'background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;',
                                                'rescheduled'      => 'background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;',
                                                'no_show',
                                                'doctor_cancelled',
                                                'patient_cancelled' => 'background:#fff1f2;color:#be123c;border:1px solid #fecdd3;',
                                                default            => 'background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;',
                                            };
                                        @endphp
                                        <span class="badge rounded-pill px-2 py-1" style="font-size:0.72rem; white-space:nowrap; {{ $badgeStyle }}">
                                            {{ ucwords(str_replace('_', ' ', $list_data->status)) }}
                                        </span>
                                    </td>

                                    <td class="text-end">
                                        @php $status = strtolower($list_data->status); @endphp

                                    
                                        <div class="dropdown">
                                            

                                            <button class="btn btn-sm" data-bs-toggle="dropdown" onclick="event.stopPropagation();" style="background:#f1f5f9;border:1px solid #e2e8f0;color:#475569;border-radius:8px;padding:4px 8px;">
                                                <i class="ti ti-dots-vertical"></i>
                                            </button>

                                            <ul class="dropdown-menu dropdown-menu-end" onclick="event.stopPropagation();">

                                                {{-- REQUESTED --}}
                                                @if($status == 'requested')
                                                    <li style="cursor: pointer;">
                                                        <a class="dropdown-item text-success"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Confirmed')">
                                                            <i class="ti ti-check"></i> Confirm
                                                        </a>
                                                    </li>

                                                    <li style="cursor: pointer;">
                                                        <a class="dropdown-item text-danger"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Rejected')">
                                                            <i class="ti ti-x"></i> Reject
                                                        </a>
                                                    </li>

                                                    <li style="cursor: pointer;">
                                                        <a class="dropdown-item text-dark"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Rescheduled')">
                                                            <i class="ti ti-refresh"></i> Reschedule
                                                        </a>
                                                    </li>
                                                @endif


                                                {{-- CONFIRMED --}}
                                                @if($status == 'confirmed')
                                                    <li style="cursor: pointer;">
                                                        <a class="dropdown-item text-primary"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Ongoing')">
                                                            <i class="ti ti-player-play"></i> Mark Ongoing
                                                        </a>
                                                    </li>

                                                    <li style="cursor: pointer;">
                                                        <a class="dropdown-item text-danger"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Cancelled')">
                                                            <i class="ti ti-x"></i> Cancel
                                                        </a>
                                                    </li>
                                                @endif


                                                {{-- WAITING / ONGOING --}}
                                                @if(in_array($status, ['waiting','ongoing']))
                                                    <li style="cursor: pointer;">
                                                        <a class="dropdown-item text-success"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Completed')">
                                                            <i class="ti ti-checks"></i> Mark Completed
                                                        </a>
                                                    </li>

                                                    <li style="cursor: pointer;">
                                                        <a class="dropdown-item text-danger"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Cancelled')">
                                                            <i class="ti ti-x"></i> Cancel
                                                        </a>
                                                    </li>
                                                @endif


                                                {{-- CANCELLED TYPES --}}
                                                @if(in_array($status, ['cancelled','patient_cancelled','doctor_cancelled']))
                                                    <li style="cursor: pointer;">
                                                        <a class="dropdown-item text-dark"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Rescheduled')">
                                                            <i class="ti ti-refresh"></i> Reschedule
                                                        </a>
                                                    </li>
                                                @endif

                                                @if($status == 'rescheduled')
                                                    <li>
                                                        <a class="dropdown-item text-primary"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Confirmed')">
                                                            <i class="ti ti-check"></i> Confirm
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a class="dropdown-item text-warning"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Waiting')">
                                                            <i class="ti ti-clock"></i> Mark Waiting
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a class="dropdown-item text-danger"
                                                            onclick="updateStatus('{{ route('appointment.update_status', $list_data->appointmentId) }}','Cancelled')">
                                                            <i class="ti ti-x"></i> Cancel
                                                        </a>
                                                    </li>
                                                @endif


                                                {{-- COMMON --}}
                                                <li style="cursor: pointer;">
                                                    <a class="dropdown-item"
                                                        onclick="appointmentDetails('{{ $list_data->appointmentId }}','{{ $list_data->id }}')">
                                                        <i class="ti ti-eye"></i> View Details
                                                    </a>
                                                </li>

                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                @php $i++ @endphp
                                @endforeach
                            </tbody>
                            @else
                            <tbody>
                                <tr>
                                    <td colspan="7" style="text-align: center;">No Data Found</td>
                                </tr>
                            </tbody>
                            @endif
                            
                        </table>
                            <div class="d-flex justify-content-end mt-3">
                                {{ $appointment_list->links('pagination::bootstrap-5') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Content -->

            <!-- Footer Start -->
            @include('admin.footer')
            <!-- Footer End -->
        </div>

    <!-- ========================
			End Page Content
		========================= -->

        <!-- start appointment-->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="appointmentModal" style="width:560px;">

            <!-- Sticky Header -->
         <div class="offcanvas-header px-4 py-3 oc-header">

    <div class="w-100">

        <!-- Top Row -->
        <div class="d-flex align-items-center justify-content-between mb-1">

            <div class="d-flex align-items-center gap-2">
                <i class="ti ti-clipboard-list text-primary oc-header-icon"></i>
                <h6 class="mb-0 fw-semibold text-dark oc-title">
                    Appointment Details
                </h6>
            </div>

            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>

        <!-- Bottom Row -->
     <div class="d-flex align-items-center justify-content-between gap-2 oc-sub-row">

    <div class="d-flex align-items-center gap-3">

        <!-- Booking ID -->
        <div class="d-flex align-items-center gap-1">
            <span class="oc-booking-id">#<span id="booking_reference"></span></span>
        </div>

        <!-- Requested -->
       

    </div>

    <span id="header_status_badge"></span>

</div>

    </div>
</div>

            <div class="offcanvas-body p-3" style="background:#f8fafc; overflow-y:auto;">

                <!-- Doctor Hero -->
                <div class="oc-doctor-card d-flex gap-3 align-items-start">
    <img id="doctor_image" src="" class="rounded" width="64" height="64" style="object-fit:cover;">

    <div class="flex-grow-1">
        <div class="fw-semibold text-dark" id="doctor_name"></div>
        <div class="text-muted small" id="doctor_speciality_canvas"></div>
        <div class="text-muted small" id="doctor_qualification"></div>

        <div class="d-flex flex-wrap gap-2 mt-1 small text-muted">
            <span><i class="ti ti-id-badge"></i> <span id="doctor_reg"></span></span>
            <span><i class="ti ti-phone"></i> <span id="doctor_phone_canvas"></span></span>
        </div>

        <!-- Clinic merged here -->
        <div class="mt-2 small">
            <div class="fw-semibold text-dark" id="clinic_name"></div>
            <div class="text-muted" id="clinic_address"></div>
        </div>
    </div>
</div>

                <!-- Appointment Info -->
               <div class="oc-section">
    <div class="oc-section-title">Appointment</div>

    <div class="row g-2">
        <div class="col-6">
            <div class="oc-label">Date</div>
            <div class="oc-value" id="appointment_date"></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Time</div>
            <div class="oc-value" id="appointment_time"></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Type</div>
            <div class="oc-value" id="appointment_type"></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Mode</div>
            <div class="oc-value" id="consultation_mode"></div>
        </div>
    </div>
</div>


 


                <!-- Patient Info -->
                <div class="oc-section">
    <div class="oc-section-title">Patient</div>

    <div class="row g-2">

        <div class="col-6">
            <div class="oc-label">Name</div>
            <div class="oc-value" id="patient_name_card"></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Phone</div>
            <div class="oc-value" id="patient_phone_card"></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Age / Gender</div>
            <div class="oc-value" id="patient_age_gender"></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Blood</div>
            <div class="oc-value" id="patient_blood_card"></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Email</div>
            <div class="oc-value text-truncate" id="patient_email_card"></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Booked For</div>
            <div class="oc-value text-capitalize" id="booked_by_card"></div>
        </div>

    </div>
</div>

<div class="oc-section oc-payment-highlight">

    <div class="oc-section-title">Payment</div>

    <!-- Highlight Row -->
    <div class="oc-payment-top d-flex justify-content-between align-items-center mb-2">
        <div>
            <div class="label">Total Paid</div>
            <div class="amount">₹<span id="final_amount_card"></span></div>
        </div>
        <span id="payment_status_card"></span>
    </div>

    <!-- Grid Info (same as appointment style) -->
    <div class="row g-2">

        <div class="col-6">
            <div class="oc-label">Mode</div>
            <div class="oc-value" id="payment_mode_card"></div>
        </div>

        <div class="col-6" id="txn_id_card_wrap">
            <div class="oc-label">Txn ID</div>
            <div class="oc-value text-truncate" id="txn_id_card"></div>
        </div>

        <!-- <div class="col-6" id="paid_on_card_wrap">
            <div class="oc-label">Paid On</div>
            <div class="oc-value" id="paid_on_card"></div>
        </div> -->

        <div class="col-6">
            <div class="oc-label">Subtotal</div>
            <div class="oc-value">₹<span id="subtotal_card"></span></div>
        </div>

        <div class="col-6">
            <div class="oc-label">Discount</div>
            <div class="oc-value text-success">– ₹<span id="discount_card"></span></div>
        </div>

    </div>

</div>

             

                

                

            </div>
        </div>
        <!-- end appointment -->

    <!-- Start Delete Modal  -->
 <div class="modal fade" id="deleteDoctorModal" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content border-0 shadow-lg rounded-4">
            <form id="deleteDoctorForm" method="POST">
                @csrf
                @method('DELETE')
             <div class="modal-body text-center p-5">
                 <!-- Icon Circle -->
                 <div class="mb-4">
                     <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-danger-subtle"
                         style="width:80px;height:80px;">
                         <i class="ti ti-trash text-danger fs-2"></i>
                     </div>
                 </div>
                 <h5 class="fw-semibold mb-2">Delete Confirmation?</h5>
                 <p class="text-muted mb-4">
                     Are you sure you want to delete this doctor?
                 </p>
                 <div class="d-flex justify-content-center gap-3">
                     <button type="button" class="btn btn-light px-4"
                         data-bs-dismiss="modal">
                         Cancel
                     </button>
                     <button type="submit" class="btn btn-danger px-4"
                          id="confirmDeleteBtn">
                         Yes, Delete
                     </button>
                 </div>
            </form>
             </div>
         </div>
     </div>
 </div>

    <!-- End Delete Modal  -->

    <div class="modal fade" id="statusModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-body text-center p-5" id="statusModalMessage">
                    <div class="mb-4">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-danger-subtle"
                            style="width:80px;height:80px;">
                            <i class="ti ti-trash text-danger fs-2"></i>
                        </div>
                    </div>
                    <h5 class="fw-semibold mb-2">Change Doctor Status</h5>
                    <p class="text-muted mb-4">
                       Are you sure you want to deactivate this doctor?
                    </p>
                    <div class="d-flex justify-content-center gap-3">
                        <button type="button" class="btn btn-light px-4"
                            data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <form id="statusForm" method="POST">
                            <input type="hidden" name="status" id="app-status">
                            @csrf
                            <button type="submit" class="btn btn-danger px-4"
                                id="confirmDeactivateBtn">
                                Yes
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- cancel or confirmation modal -->
       <div class="modal fade" id="actionModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">

            <!-- Header Gradient -->
            <div class="p-3 text-white" style="background: linear-gradient(135deg, #4f46e5, #06b6d4);">
                <h5 class="mb-0 fw-semibold" id="actionTitle">Confirm Action</h5>
            </div>
            <div class="modal-body p-4 text-center">

                <!-- Icon -->
                <div class="mb-3">
                    <div id="actionIcon"
                        class="rounded-circle mx-auto d-flex align-items-center justify-content-center shadow-sm"
                        style="width:75px;height:75px; background:#f1f5f9;">
                        <i class="ti fs-2 text-primary"></i>
                    </div>
                </div>

                <!-- Message -->
                <p class="text-muted mb-4 fs-6" id="actionMessage">
                    Are you sure you want to perform this action?
                </p>
                <form id="actionForm" method="POST">
                    @csrf
                    <input type="hidden" id="actionStatus" name="status">

                    <!-- Reason Box -->
                    <div id="reasonBox" class="mb-3 text-start">
                        <label class="form-label fw-semibold" id="canComReasn">
                            <i class="ti ti-message-2"></i> Cancel Reason
                        </label>
                        <textarea id="actionReason" name="reason"
                            class="form-control rounded-3"
                            rows="3"
                            placeholder="Write reason here..."></textarea>
                    </div>

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between gap-2 mt-4">
                        <button type="button"
                            class="btn btn-light border w-50 rounded-pill"
                            data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit"
                            id="confirmActionBtn"
                            class="btn w-50 rounded-pill text-white"
                            style="background: linear-gradient(135deg, #22c55e, #16a34a); border:none;"> 
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</div>
<!-- End Wrapper -->

@include('admin.scripts')

<script>
    function deleteDoctor(url) {
        document.getElementById('deleteDoctorForm').action = url;
        var modal = new bootstrap.Modal(document.getElementById('deleteDoctorModal'));
        modal.show();
    }
    
    const statusConfig = {
            requested: {
                bg: 'bg-info-subtle',
                icon: 'ti ti-send text-info',
                btn: 'btn-info'
            },
            confirmed: {
                bg: 'bg-success-subtle',
                icon: 'ti ti-check text-success',
                btn: 'btn-success'
            },
            rejected: {
                bg: 'bg-danger-subtle',
                icon: 'ti ti-x text-danger',
                btn: 'btn-danger'
            },
            waiting: {
                bg: 'bg-warning-subtle',
                icon: 'ti ti-clock text-warning',
                btn: 'btn-warning'
            },
            ongoing: {
                bg: 'bg-primary-subtle',
                icon: 'ti ti-activity text-primary',
                btn: 'btn-primary'
            },
            completed: {
                bg: 'bg-success-subtle',
                icon: 'ti ti-checks text-success',
                btn: 'btn-success'
            },
            cancelled: {
                bg: 'bg-danger-subtle',
                icon: 'ti ti-x text-danger',
                btn: 'btn-danger'
            },
            rescheduled: {
                bg: 'bg-info-subtle',
                icon: 'ti ti-refresh text-info',
                btn: 'btn-info'
            },
            no_show: {
                bg: 'bg-dark-subtle',
                icon: 'ti ti-user-off text-dark',
                btn: 'btn-dark'
            },
            doctor_cancelled: {
                bg: 'bg-danger-subtle',
                icon: 'ti ti-stethoscope text-danger',
                btn: 'btn-danger'
            },
            patient_cancelled: {
                bg: 'bg-warning-subtle',
                icon: 'ti ti-user-x text-warning',
                btn: 'btn-warning'
            }
        };

        function updateStatus(url, action) {
            let actionLower = action.toLowerCase();
            if (actionLower === 'completed') {
                document.getElementById('actionForm').action = url;
                document.getElementById('actionStatus').value = action;
                confirmActionBtn.style.background = "linear-gradient(135deg, #22c55e, #16a34a)";
                $('#canComReasn').html('<i class="ti ti-message-2"></i> Complete Status');
                $('#confirmActionBtn').text('Complete Appointment?')
                actionReason.placeholder = "Add completion note (optional)...";
                document.getElementById('actionReason').removeAttribute('required');
                var modal = new bootstrap.Modal(document.getElementById('actionModal'));
                modal.show();
                return;
            }

            if (actionLower === 'cancelled') {
                document.getElementById('actionForm').action = url;
                document.getElementById('actionStatus').value = action;
                document.getElementById('reasonBox').classList.remove('d-none');
                confirmActionBtn.style.background = "linear-gradient(135deg, #ef4444, #dc2626)";
                $('#canComReasn').html('<i class="ti ti-message-2"></i> Cancel Status');
                $('#confirmActionBtn').text('Cancel Appointment?')
                actionReason.placeholder = "Enter cancellation reason...";
                 document.getElementById('actionReason').setAttribute('required', true);
                var modal = new bootstrap.Modal(document.getElementById('actionModal'));
                modal.show();

                return;
            }
            document.getElementById('statusForm').action = url;
            $('#app-status').val(action);
            const actionKey = action.toLowerCase();
            const config = statusConfig[actionKey] || statusConfig['requested'];
            console.log('config', JSON.stringify(config))
            // Format text (no_show → No Show)
            const formattedAction = actionKey.replaceAll('_', ' ')
                .replace(/\b\w/g, l => l.toUpperCase());

            // Message
            document.querySelector('#statusModalMessage p').innerText =
                `Are you sure you want to mark this appointment as ${formattedAction}?`;

            // Heading
            document.querySelector('#statusModalMessage h5').innerText =
                `${formattedAction} Appointment`;

            let iconWrapper = document.querySelector('#statusModalMessage .rounded-circle');
            let icon = document.querySelector('#statusModalMessage i');
            let confirmBtn = document.getElementById('confirmDeactivateBtn');

            // Reset classes
            iconWrapper.className = 'd-inline-flex align-items-center justify-content-center rounded-circle';
            icon.className = '';
            confirmBtn.className = 'btn px-4';

            // Apply new styles
            iconWrapper.classList.add(config.bg);
            config.icon.split(' ').forEach(cls => icon.classList.add(cls));
            confirmBtn.classList.add(config.btn);

            // Button text
            confirmBtn.innerText = formattedAction;

            // Show modal
            var modal = new bootstrap.Modal(document.getElementById('statusModal'));
            modal.show();
        }

        const selectAllEl = document.getElementById("selectAll");
        if (selectAllEl) {
            selectAllEl.addEventListener("change", function () {
                document.querySelectorAll(".row-checkbox").forEach(cb => cb.checked = this.checked);
            });
        }

        function appointmentDetails(appointmentId, doctorUserId) {
            $.ajax({
                url: _BaseURL + "appointment-details/" + appointmentId,
                type: "GET",
                dataType: "json",
                data: {
                    appointmentId: appointmentId,
                    doctorUserId: doctorUserId
                },
                beforeSend: function () {
                    $('#ajaxLoader').fadeIn();
                },
                success: function (res) {
            $('#ajaxLoader').fadeOut();

            if (res.success == 1) {
                let d = res.data;
                let patientInfo = {};

                try {
                    patientInfo = JSON.parse(d.patient_info || '{}');
                } catch (e) {
                    patientInfo = {};
                }

                let p = patientInfo.data || {};
               
                // Doctor
                $('#doctor_image').attr('src', d.profile_image_url || '');
                $('#doctor_name').text(`${d.salutation || ''} ${d.first_name || ''} ${d.last_name || ''}`.trim());
                $('#doctor_qualification').text(d.doctor_qualifications || '');
                $('#doctor_speciality_canvas').text(d.speciality_name || d.specialities || '');
                $('#doctor_reg').text(d.registration_number || 'N/A');
                $('#doctor_email_canvas').text(d.email || 'N/A');
                $('#doctor_phone_canvas').text(d.phone || 'N/A');

                // Patient Card (improved)
                let relation = (typeof p.relation === 'string' && p.relation.toLowerCase() !== 'self') ? ` (${p.relation.charAt(0).toUpperCase() + p.relation.slice(1)})` : '';
                $('#patient_name_card').text((p.full_name || d.patient_name || 'N/A') + relation);
                let ageGender = [];
                if (p.age) ageGender.push(p.age + ' yrs');
                if (p.gender) ageGender.push(p.gender);
                $('#patient_age_gender').text(ageGender.join(' · '));
                $('#patient_blood_card').text(p.blood_group || 'N/A');
                $('#patient_phone_card').text(p.mobile || d.patient_phone || 'N/A');
                $('#patient_email_card').text(p.email || d.patient_email || 'N/A');
                $('#booked_by_card').text(patientInfo.booked_by || 'N/A');
                let patientAvatarUrl = p.full_name ? `https://ui-avatars.com/api/?name=${encodeURIComponent(p.full_name)}` : 'https://ui-avatars.com/api/?name=Patient';
                $('#patient_avatar').attr('src', patientAvatarUrl);

                // Appointment
                const statusLabel = (d.status || '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                const statusCls = getStatusClass(d.status);
                $('#booking_reference').text(d.booking_reference || '');
                $('#appointment_date').text(d.appointment_date || 'N/A');
                $('#appointment_time').text(`${d.start_time || ''} – ${d.end_time || ''}`);
                $('#estimated_duration_canvas').text(d.estimated_duration || 'N/A');
                $('#appointment_type').text(d.appointment_type || 'N/A');
                $('#consultation_mode').text(d.consultation_mode || 'N/A');
                $('#status_badge').html(`<span class="badge rounded-pill ${statusCls} px-2">${statusLabel}</span>`);
                $('#header_status_badge').html(`<span class="badge rounded-pill bg-white text-dark px-2" style="font-size:0.68rem;">${statusLabel}</span>`);
                $('#reason').text(d.reason || 'N/A');

                // Clinic
                $('#clinic_name').text(d.clinic_name || 'N/A');
                $('#clinic_phone').text(d.clinic_phone || 'N/A');
                const addr = [d.clinic_address, d.state].filter(Boolean).join(', ');
                $('#clinic_address').text(addr || 'N/A');

                // Payment Card (improved)
                $('#final_amount_card').text(d.final_amount || '0.00');
                $('#subtotal_card').text(d.subtotal || '0.00');
                $('#discount_card').text(d.discount_amount || '0.00');
                const payStatusLabel = (d.payment_status || 'N/A');
                const payStatusLower = payStatusLabel.toLowerCase();
                const payBadgeCls = payStatusLower === 'success' ? 'bg-success' :
                    payStatusLower === 'pending' ? 'bg-warning text-dark' :
                    payStatusLower === 'failed' ? 'bg-danger' :
                    payStatusLower === 'refunded' ? 'bg-secondary' : 'bg-warning text-dark';
                $('#payment_status_card').html(`<span class="badge rounded-pill ${payBadgeCls} px-3 py-2" style="font-size:0.78rem;">${payStatusLabel}</span>`);
                $('#payment_mode_card').text(d.payment_mode || 'N/A');
                if (d.transaction_id) {
                    $('#txn_id_card').text(d.transaction_id);
                    $('#txn_id_card_wrap').show();
                } else {
                    $('#txn_id_card_wrap').hide();
                }
                if ((d.final_amount && parseFloat(d.final_amount) > 0) && d.payment_date) {
                    $('#paid_on_card').text(d.payment_date);
                    $('#paid_on_card_wrap').show();
                } else {
                    $('#paid_on_card_wrap').hide();
                }
                // Also update the detailed payment info as before
                $('#final_amount').text(d.final_amount || '0.00');
                $('#subtotal').text(d.subtotal || '0.00');
                $('#discount').text(d.discount_amount || '0.00');
                $('#gst_amount_canvas').text(d.gst_amount || '0.00');
                $('#payment_mode_canvas').text(d.payment_mode || 'N/A');
                $('#payment_status').html(`<span class="badge rounded-pill ${payBadgeCls} px-3 py-2" style="font-size:0.78rem;">${payStatusLabel}</span>`);
                $('#transaction_id').text(d.transaction_id || 'N/A');
                $('#payment_date').text(d.payment_date || 'N/A');

                // Show Offcanvas
                var offcanvas = new bootstrap.Offcanvas(document.getElementById('appointmentModal'));
                offcanvas.show();

            } else {
                toastr.error(res.message);
            }
        },
        error: function () {
            $('#ajaxLoader').fadeOut();
            toastr.error('Server Error');
        }
    });
}

function getStatusClass(status) {
    status = (status || '').toLowerCase();

    switch (status) {
        case 'requested': return 'bg-info';
        case 'confirmed': return 'bg-success';
        case 'rejected': return 'bg-danger';
        case 'waiting': return 'bg-warning';
        case 'ongoing': return 'bg-primary';
        case 'completed': return 'bg-success';
        case 'cancelled': return 'bg-secondary';
        case 'no_show': return 'bg-dark';
        default: return 'bg-secondary';
    }
}

//  function appointmentDetails(appointmentId,doctorUserId){
//         $('#appointment_id').val(appointmentId);
//          $.ajax({
//             url: _BaseURL + "appointment-details/" + appointmentId,
//             type: "GET",
//             dataType: "json",
//             data: {
//                 appointmentId: appointmentId,
//                 doctorUserId: doctorUserId,
//                 _token: $('meta[name="csrf-token"]').attr('content')
//             },
//             beforeSend: function () {
//                 $('#ajaxLoader').fadeIn();
//             },
//             success: function (res) {
//                 $('#ajaxLoader').fadeOut();
//                 if (res.success == 1) {
//                     // Hide existing clinic section and clinic list
//                     $('#existingClinicsContainer').addClass('d-none');
//                     $('#editNewClinicCard3').addClass('d-none');
//                     $('#addClinicBtnContainer').addClass('d-none');
//                     $('#clinicHeading').html('<h6 class="fw-bold mb-0">Edit Clinic Information</h6>');
//                     // Show new clinic form
//                     $('#newClinicSection').removeClass('d-none');

//                     fillClinicForm(res);
//                     $('#newClinicSection').get(0).scrollIntoView({ behavior: 'smooth' });
//                 } else {
//                     toastr.error(res.message);
//                 }
//             },
//             error: function () {
//                 $('#ajaxLoader').fadeOut();
//                 toastr.error('Server Error');
//             }
//         });

//         var offcanvasElement = document.getElementById('appointmentModal');
//         var bsOffcanvas = new bootstrap.Offcanvas(offcanvasElement);
//         bsOffcanvas.show();
//     }
</script>
<script>
    //Auto refresh
  document.addEventListener("DOMContentLoaded", function () {
     if (window.location.pathname === '/jivo-webadmin/list-appointment') {
      console.log("Auto refresh enabled");
      setInterval(() => {
        location.reload();
      }, 120000); // 2 minutes
    }
  });
</script>
</body>

</html>