@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<!-- DataTables Buttons CSS for Export -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">

<style>
    div.dataTables_filter,
    div.dt-buttons {
        display: none !important;
        /* Hide default DataTables buttons wrapper */
    }
</style>

@section('content')
<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5>Online Appointment</h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('online_consultation_report') }}" class="btn btn-primary">Report</a>
    </div>
</div>

<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 id="exportExcelBtn" class="btn btn-label-secondary">Export</button>
            </div>
        </div>
    </div>

    <div class="table-responsive pt-0 pb-2">
        <table id="reviewTable" class="table">

            <thead>
                <tr>
                    <th>#</th>
                    <th>Date</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Consultation Type</th>
                    <th>Preferred Time</th>
                    <th>Concern</th>
                    <th>Receipt</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody></tbody>

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

<!-- Update Status Modal -->
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <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 p-4">
                <input type="hidden" id="statusReviewId">
                <div class="mb-3">
                    <label class="form-label">Status</label>
                    <select class="form-select" id="statusSelect" name="status">
                        <option value="Pending">Pending</option>
                        <option value="Completed">Completed</option>
                        <option value="Cancelled">Cancelled</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="updateStatusBtn">Update</button>
            </div>
        </div>
    </div>
</div>

<!-- Receipt Preview Modal -->
<div class="modal fade" id="receiptModal" tabindex="-1" aria-labelledby="receiptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="receiptModalLabel">
                    <i class="bx bx-receipt me-2"></i>
                    Payment Receipt
                </h5>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>
            </div>

            <div class="modal-body text-center p-3">

                <img id="receiptImage"
                    src=""
                    alt="Payment Receipt"
                    class="img-fluid rounded"
                    style="max-height:75vh; width:auto;">

            </div>

        </div>
    </div>
</div>
<script>
    $(document).on('click', '.view-receipt', function() {

        const receiptUrl = $(this).data('receipt');

        $('#receiptImage').attr('src', receiptUrl);

        const modal = new bootstrap.Modal(
            document.getElementById('receiptModal')
        );

        modal.show();
    });
</script>

<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>

<!-- JSZip & DataTables Export JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script>
   $(document).ready(function () {

    let table = $('#reviewTable').DataTable({

        processing: true,
        serverSide: true,

        ajax: "{{ route('online_consult_data') }}",

        searching: true,
        lengthChange: false,
        pageLength: 10,
        ordering: false,

        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'preferred_date',
                name: 'preferred_date'
            },
            {
                data: 'name',
                name: 'name'
            },
            {
                data: 'phone',
                name: 'phone'
            },
            {
                data: 'email',
                name: 'email'
            },
            {
                data: 'consultancy_type',
                name: 'consultancy_type'
            },
            {
                data: 'preferred_time',
                name: 'preferred_time'
            },
            {
                data: 'concern',
                name: 'concern'
            },
            {
                data: 'receipt',
                name: 'receipt_path',
                orderable: false,
                searchable: false,
                className: 'text-center'
            },
            {
                data: 'status',
                name: 'status',
                orderable: false,
                searchable: false,
                className: 'text-center'
            }
        ]
    });


    // ================================
    // OPEN STATUS MODAL
    // ================================

    $(document).on('click', '.update-status-btn', function () {

        const id = $(this).data('id');
        const status = $(this).data('status') || 'Pending';

        $('#statusReviewId').val(id);
        $('#statusSelect').val(status);

        new bootstrap.Modal(
            document.getElementById('statusModal')
        ).show();
    });


    // ================================
// UPDATE STATUS
// ================================

$(document).on('click', '#updateStatusBtn', function () {

    const id = $('#statusReviewId').val();
    const status = $('#statusSelect').val();
    const button = $(this);

    console.log('ID:', id);
    console.log('Selected Status:', status);

    if (!id) {
        alert('Consultation ID is missing.');
        return;
    }

    if (!status) {
        alert('Please select a status.');
        return;
    }

    button.prop('disabled', true);
    button.text('Updating...');

    $.ajax({
        url: "{{ route('online_consultation_update_status') }}",
        type: "POST",

        data: {
            _token: "{{ csrf_token() }}",
            id: id,
            status: status
        },

        success: function (response) {

            console.log('Server Response:', response);

            if (response.success) {

                const modalElement = document.getElementById('statusModal');

                const modalInstance =
                    bootstrap.Modal.getInstance(modalElement);

                if (modalInstance) {
                    modalInstance.hide();
                }

                // Reload DataTable
                $('#reviewTable').DataTable().ajax.reload(null, false);
            }
        },

        error: function (xhr) {

            console.error('Status update error:', xhr.responseText);

            alert(
                xhr.responseJSON?.message ||
                'Unable to update status.'
            );
        },

        complete: function () {

            button.prop('disabled', false);
            button.text('Update');
        }
    });
});

    // ================================
    // VIEW RECEIPT
    // ================================

    $(document).on('click', '.view-receipt', function () {

        const receiptUrl = $(this).data('receipt');

        $('#receiptImage').attr('src', receiptUrl);

        new bootstrap.Modal(
            document.getElementById('receiptModal')
        ).show();
    });

});
</script>
<script>
    $(document).on('click', '.view-receipt', function() {

        const receiptUrl = $(this).data('receipt');

        console.log('RECEIPT:', receiptUrl);

        $('#receiptImage').attr('src', receiptUrl);

        new bootstrap.Modal(
            document.getElementById('receiptModal')
        ).show();
    });
</script>

@endsection