@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
  <style>
        .toolbar-card {
            border: none;
            border-radius: 14px;
            box-shadow: 0 2px 14px rgba(30, 41, 59, 0.06);
        }

        .toolbar-wrap {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .search-cluster {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.65rem;
            flex: 1 1 auto;
        }

        .search-field {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1 1 50px;
            min-width: 150px;
            height: 42px;
            padding: 0 12px;
            border-radius: 10px;
            border: 1px solid #e5e9f0;
            /* background: #f8fafc; */
            transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        }

        .search-field i {
            flex: 0 0 auto;
            font-size: 15px;
            line-height: 1;
            color: #94a3b8;
            pointer-events: none;
        }

        .search-field input {
            flex: 1 1 auto;
            min-width: 0;
            height: 50px !important;
            border: none;
            background: transparent;
            padding: 0;
            font-size: 0.875rem;
            color: #1e293b;
        }

        .search-field input:focus {
            outline: none;
            box-shadow: none;
        }

        .search-field:focus-within {
            background: #fff;
            border-color: #696cff;
            box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
        }

        .btn-search {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 42px;
            padding: 0 18px;
            border-radius: 10px;
            border: none;
            background: #696cff;
            color: #fff;
            font-size: 0.875rem;
            font-weight: 500;
            white-space: nowrap;
            transition: background 0.15s ease, transform 0.1s ease;
        }

        .btn-search:hover {
            background: #5f61e6;
            color: #fff;
            transform: translateY(-1px);
        }

        .toolbar-divider {
            width: 1px;
            align-self: stretch;
            background: #eceef3;
            margin: 0 0.25rem;
        }

        .btn-add-patient {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 42px;
            padding: 0 20px;
            border-radius: 10px;
            background: #22c55e;
            color: #fff;
            font-size: 0.875rem;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 4px 10px rgba(34, 197, 94, 0.25);
            transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
        }

        .btn-add-patient:hover {
            background: #1eab52;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(34, 197, 94, 0.3);
        }

        /* ---------- Mobile ---------- */
        @media (max-width: 767px) {
            .toolbar-wrap {
                flex-direction: column;
                align-items: stretch;
            }

            .search-cluster {
                flex-direction: column;
                width: 100%;
            }

            .search-field {
                width: 100%;
            }

            .btn-search,
            .btn-add-patient {
                width: 100%;
                justify-content: center;
            }

            .toolbar-divider {
                display: none;
            }
        }

        /* ---------- Tablet ---------- */
        @media (min-width: 768px) and (max-width: 991px) {
            .search-field {
                flex: 1 1 45%;
            }
        }
   




/* Patient info bar (replaces the readonly input grid) */
.patient-info-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #f8f9fc;
    border-radius: 14px;
    padding: 18px 22px;
}

.patient-avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #4f8bff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.patient-info-main {
    flex: 1;
    min-width: 0;
}

.patient-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.info-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 12.5px;
    color: #495057;
}

.info-tag i {
    font-size: 14px;
    color: #6c757d;
}

.info-tag-danger {
    color: #dc3545;
    border-color: #ffd8dc;
    background: #fff5f6;
}

.info-tag-danger i {
    color: #dc3545;
}



.section-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.section-icon-amber { background: rgba(253, 126, 20, 0.12); color: #fd7e14; }
.section-icon-red { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.section-icon-purple { background: rgba(111, 66, 193, 0.12); color: #6f42c1; }
.section-icon-teal { background: rgba(15, 110, 86, 0.12); color: #0f6e56; }
.section-icon-green { background: rgba(47, 174, 116, 0.12); color: #2fae74; }
.section-icon-blue { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }

/* Prescription table */
.prescription-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6c757d;
    border-bottom: 1px solid #eef0f4;
    font-weight: 600;
}

.prescription-table td {
    border-bottom: 1px solid #f2f3f6;
}

.med-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: rgba(15, 110, 86, 0.1);
    color: #0f6e56;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Morning / Afternoon / Night dose toggles — replaces raw checkboxes */
.dose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #dee2e6;
    color: #6c757d;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-check:checked + .dose-btn {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

@media (max-width: 767.98px) {
    .patient-info-bar {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}
/* ===========================
   Chrome Autofill Fix
=========================== */

.search-field input:-webkit-autofill,
.search-field input:-webkit-autofill:hover,
.search-field input:-webkit-autofill:focus,
.search-field input:-webkit-autofill:active{

    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1e293b !important;

    border:none !important;
    background:transparent !important;

    transition: background-color 9999s ease-in-out 0s;
    caret-color:#1e293b;
}

/* Focus */
.search-field:focus-within{
    border-color:#696cff;
    box-shadow:0 0 0 3px rgba(105,108,255,.12);
}
</style>
@section('content')

<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5>Appointment Report — <span class="text-primary">{{ date('d M Y') }}</span>&nbsp;<span class="badge bg-label-success"><span id="totalCount"></span>&nbsp;&nbsp;&nbsp;&nbsp;Appointments</span></h5>
    </div>
    <div class="col-auto d-flex gap-2">
        <a href="{{ route('view_appointments') }}" class="btn btn-label-secondary">
            <i class="ti tabler-list me-1"></i> View All
        </a>

    </div>
</div>
{{-- Quick Add Form --}}
<div id="quickAddForm" style="display:none;" class="card border-0 shadow-sm mb-3">
    

</div>   {{-- ============ Toolbar Card: Search + Add Patient ============ --}}
    <div class="card toolbar-card mb-4">
        <div class="card-body">
            <div class="toolbar-wrap">

                <div class="search-cluster">
                    <!-- <div class="search-field">
                        <input type="text" id="sheetSearch" placeholder="Sheet ID">
                    </div> -->

                    <div class="search-field">
                        <i class="ti tabler-user"></i>
                        <input type="text" id="nameSearch" placeholder="Patient Name">
                    </div>

                    <!-- <div class="search-field">
                        <i class="ti tabler-phone"></i>
                        <input type="text" id="phoneSearch" placeholder="Phone Number">
                    </div> -->

                    <button class="btn btn-primary" id="searchBtn" type="button">
                        <i class="ti tabler-search"></i>
                        <span>Search</span>
                    </button>
                </div>

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

                <a href="{{ route('add_patient') }}" class="btn btn-primary">
                    <i class="ti tabler-user-plus"></i>
                    <span>Add Patient</span>
                </a>

            </div>
        </div>
    </div>
    



{{-- Appointments Table --}}
<div class="card p-0">
    <div class="row mb-3 align-items-center p-3 g-2">
        <div class="col-auto">
            <select id="pageLength" class="form-select">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="All">All</option>
            </select>
        </div>
        <div class="col-auto ms-auto">
            <div class="d-flex align-items-center gap-2">
                <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:180px;">
                <button class="btn btn-label-secondary">Export</button>
            </div>
        </div>
    </div>

    <div class="table-responsive pt-0 pb-2">
        <table class="table" id="pendingAppointmentsTable">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Token</th>
                    <th>Patient</th>
                    <th>Doctor</th>
                    <th>Status</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

{{-- Close Modal --}}
<div class="modal fade" id="closeAppointmentModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content" style="border-radius:16px;">
            <div class="modal-header">
                <h5 class="modal-title">Update Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="closeAppointmentId">
                <div class="mb-3">
                    <label class="form-label">Status</label>
                    <select class="form-select" disabled><option>Closed</option></select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Remark</label>
                    <textarea class="form-control" rows="3" id="closeRemark"></textarea>
                </div>
            </div>
            <div class="text-center pb-3">
                <button type="button" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="submitCloseBtn">Submit</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="statusUpdateModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                
                <button class="btn-close"
                data-bs-dismiss="modal">
            </button>
            
        </div>
        <h5 class="text-center">
            Update Appointment Status
        </h5>

            <div class="modal-body">

                <input type="hidden" id="statusAppointmentId">

                <div class="mb-3">
                    <label class="form-label">
                        Appointment Status
                    </label>

                    <select class="form-select" id="appointmentStatus">


                        <option value="Completed">Completed</option>

                        <option value="Cancelled">Cancelled</option>

                        <option value="Next Followup Date">Next Followup Date</option>

                    </select>

                </div>

                <div class="mb-3" id="followupDateGroup" style="display:none;">
                    <label class="form-label">
                        Next Follow Up Date <span class="text-danger">*</span>
                    </label>

                    <input type="date"
                        class="form-control"
                        id="followupDate">
                </div>

                <div class="mb-3">
                    <label class="form-label">
                        Reason <span class="text-danger">*</span>
                    </label>

                    <textarea class="form-control"
                            rows="3"
                            id="followupReason"
                            placeholder="Enter reason"
                            required></textarea>
                </div>

            </div>

            <div class="text-center">
                <button class="btn btn-light"
                    data-bs-dismiss="modal">
                Cancel
            </button>

            <button class="btn btn-warning"
                    id="saveAppointmentStatus">
                Save Changes
            </button>
            </div>
            <div class="modal-footer">


            </div>

        </div>
    </div>
</div>

    
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script>
    document.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('deleteForm').submit();
        });
</script>
<script>
$(document).ready(function() {

    const allData    = @json($appointments);
    const doctors    = @json($doctors);
    const today      = '{{ date('Y-m-d') }}';
    //toaster
       const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    // Filter to today only initially
    function filterByDate(from, to) {
        return allData.filter(function(row) {
            return row.date >= from && row.date <= to;
        });
    }

    let filteredData = filterByDate(today, today);

    const table = $('#pendingAppointmentsTable').DataTable({
        data: filteredData,
        pageLength: 10,
        lengthChange: false,
        columns: [
            {
                data: 'date',
                render: function(data) {
                    if (!data) return '-';

                    let date = new Date(data);

                    let day = String(date.getDate()).padStart(2, '0');
                    let month = String(date.getMonth() + 1).padStart(2, '0');
                    let year = date.getFullYear();

                    return `${day}-${month}-${year}`;
                }
            },
            { data: 'token' },
            { data: 'patient' },
            {
                data: null,
                render: function (data, type, row) {

                    if (row.specializations) {
                        return `${row.doctor} <span class="text-muted">(${row.specializations})</span>`;
                    }

                    return row.doctor;
                }
            },
            
          
            {
                data: null,
                orderable:false,
                render:function(data,type,row){

                    return `
                    <button class="btn btn-sm btn-warning status-update-btn"
                            data-id="${row.id}"
                            data-bs-toggle="modal"
                            data-bs-target="#statusUpdateModal">

                        <i class="ti tabler-edit me-1"></i>
                        Update
                    </button>
                    `;
                }
            },

         
        ]
    });

    // Update total count
    function updateCount(data) {
        $('#totalCount').text(data.length);
    }
    updateCount(filteredData);

    // Date filter
    $('#filterDateBtn').on('click', function() {
        const from = $('#fromDate').val();
        const to   = $('#toDate').val();
        if (!from || !to) { alert('Please select both dates.'); return; }
        const filtered = filterByDate(from, to);
        table.clear().rows.add(filtered).draw();
        updateCount(filtered);
    });

    $('#resetDateBtn').on('click', function() {
        $('#fromDate').val(today);
        $('#toDate').val(today);
        const filtered = filterByDate(today, today);
        table.clear().rows.add(filtered).draw();
        updateCount(filtered);
    });

    // Search
    $('#customSearch').on('keyup', function() {
        table.search(this.value).draw();
    });

    $('#pageLength').on('change', function() {
        let length = $(this).val();
        table.page.len(length === 'All' ? -1 : parseInt(length)).draw();
    });

    // Close appointment
    $('#pendingAppointmentsTable').on('click', '.close-btn', function() {
        $('#closeAppointmentId').val($(this).data('id'));
        $('#closeRemark').val('');
    });

    $('#submitCloseBtn').on('click', function() {
        const id     = $('#closeAppointmentId').val();
        const remark = $('#closeRemark').val();
        $.ajax({
            url: '{{ url("admin/appointment") }}/' + id + '/close',
            method: 'POST',
            data: { _token: '{{ csrf_token() }}', remark: remark },
            success: function() {
                 Toast.fire({icon: 'success',title: response.message});

                $('#closeAppointmentModal').modal('hide');
                location.reload();
            },
            error: function() { alert('Failed to close appointment.'); }
        });
    });

    // Mark visited
    $(document).on('click', '.visited-btn', function() {
        const id  = $(this).data('id');
        const btn = $(this);

        $.ajax({
            url: '{{ url("admin/appointment") }}/' + id + '/close',
            method: 'POST',
            data: { _token: '{{ csrf_token() }}', remark: 'Visited' },
            success: function() {
                btn.removeClass('btn-label-secondary').addClass('btn-success');
                btn.html('<i class="ti tabler-check me-1"></i>Visited');
            },
            error: function() { alert('Failed to mark as visited.'); }

        });
    });

    // Quick Add toggle
    $('#toggleQuickAdd, #closeQuickAdd, #closeQuickAdd2').on('click', function() {
        $('#quickAddForm').slideToggle(300);
    });

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

    // Quick Add submit
    $('#quickAddFormEl').on('submit', function(e) {
        e.preventDefault();
        $('.text-danger.small').text('');
        const btn  = $('#quickAddSubmitBtn');
        const text = $('#quickAddSubmitText');
        btn.prop('disabled', true);
        text.text('Booking...');

        $.ajax({
            url: '{{ route("store_appointment") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                btn.prop('disabled', false);
                text.text('Book Appointment');
                if (response.success) {
                    // $('#quickAddAlert').html('<div class="alert alert-success">' + response.message + '</div>').show();
                    // setTimeout(function() { location.reload(); }, 1000);
                    Toast.fire({
    icon: 'success',
    title: response.message
});

setTimeout(function () {
    location.reload();
}, 1000);
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false);
                text.text('Book Appointment');
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(field, messages) {
                        $('#err_' + field).text(messages[0]);
                    });
                    Toast.fire({
    icon: 'error',
    title: 'Failed to book appointment.'
});
                }
            }
        });
    });


    $('#searchBtn').on('click', function () {

    const sheet = $('#sheetSearch').val().toLowerCase().trim();
    const name  = $('#nameSearch').val().toLowerCase().trim();
    const phone = $('#phoneSearch').val().toLowerCase().trim();

    const filtered = allData.filter(function (row) {

        return (
            (sheet === '' || (row.sheet_no ?? '').toLowerCase().includes(sheet)) &&
            (name === '' || (row.patient ?? '').toLowerCase().includes(name)) &&
            (phone === '' || (row.phone ?? '').toLowerCase().includes(phone))
        );

    });

    table.clear().rows.add(filtered).draw();

    updateCount(filtered);

});


function toggleFollowupDate() {

    if ($('#appointmentStatus').val() === 'Next Followup Date') {
        $('#followupDateGroup').slideDown(200);
        $('#followupDate').prop('required', true);
    } else {
        $('#followupDateGroup').slideUp(200);
        $('#followupDate').prop('required', false).val('');
    }
}

$('#appointmentStatus').on('change', function () {
    toggleFollowupDate();
});

// Hide initially
toggleFollowupDate();

// Reset every time modal opens
$('#statusUpdateModal').on('shown.bs.modal', function () {
    $('#appointmentStatus').val('Completed');
    toggleFollowupDate();
});



// Open modal
$(document).on('click', '.status-update-btn', function () {
    $('#statusAppointmentId').val($(this).data('id'));
});

// Save
$('#saveAppointmentStatus').on('click', function () {

    let btn = $(this);

    btn.prop('disabled', true)
       .html('Processing...');

    $.ajax({
        url: "{{ route('update_appointment_status') }}",
        type: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            appointment_id: $('#statusAppointmentId').val(),
            status: $('#appointmentStatus').val(),
            follow_up_date: $('#followupDate').val(),
            reason: $('#followupReason').val()
        },

        success: function (response) {

            Toast.fire({
                icon: 'success',
                title: response.message
            });

            $('#statusUpdateModal').modal('hide');

            setTimeout(function () {
                location.reload();
            }, 800);
        },

        error: function (xhr) {

            btn.prop('disabled', false)
            .html('Save Changes');

            console.log(xhr.responseJSON);

            Toast.fire({
                icon: 'error',
                title: xhr.responseJSON?.message ?? 'Something went wrong.'
            });
        }
    });

});
});



</script>
@endsection