@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

@section('content')
<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5>
            <!-- <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('appointment') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button> -->
            Website Appointment
        </h5>
    </div>
    <div class="col-auto">
            <a href="{{ route('completed_appointments') }}" class="btn btn-primary">Closed Appointments</a>
        </div>
</div>
<div class="card p-0">
    <div class="row mb-3 align-items-center p-3 g-2">

        <!-- Page Length -->
        <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>

        <!-- Search + Export -->
        <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">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table class="table" id="pendingAppointmentsTable">
                        <thead>

                            <tr>
                                <th>S.no</th>
                                <th>Date</th>
                                <th>Patient</th>
                                <th>Phone</th>
                                <th>Update</th>
                            </tr>

                        </thead>

                        <tbody>



                        </tbody>

                    </table>

                </div>

            </div>
        </div>

    </div>

</div>

{{-- Update Status Modal --}}
<div class="modal fade" id="updateStatusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:16px;">
            <div class="modal-header">
                <h5 class="modal-title">Update Follow Up Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="updateStatusForm">
                @csrf
                <input type="hidden" id="followUpId" name="followup_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <!-- required அட்ரிபியூட் சேர்க்கப்பட்டுள்ளது -->
                        <select class="form-select" id="followUpStatus" name="status" required>
                            <option value="">--Select--</option>
                            <option value="Cancelled">Cancelled</option>
                            <option value="Next Followup Date">Next Followup Date</option>
                        </select>
                    </div>

                    <div class="mb-3" id="nextFollowUpDateGroup" style="display:none;">
                        <label class="form-label">Next Follow Up Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="followUpNextDate" name="next_followup_date">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Remark <span class="text-danger">*</span></label>
                        <!-- required அட்ரிபியூட் சேர்க்கப்பட்டுள்ளது -->
                        <textarea class="form-control" id="followUpRemark" name="remark" rows="3"
                            placeholder="Enter remark" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="updateFollowUpBtn">Update</button>
                </div>
            </form>
        </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>
    $(document).ready(function() {


                $('#pendingAppointmentsTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('website_appointments_data') }}",
                    pageLength: 10,
                    lengthChange: false,
                    columnDefs: [{
                        targets: '_all',
                        className: 'text-nowrap'
                    }],
                    columns: [
                        {
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'date',
                            name: 'created_at'
                        },
                        {
                            data: 'patient',
                            name: 'name'
                        },
                        {
                            data: 'phone',
                            name: 'phone_number'
                        },
                        {
                            data: 'action',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });

                $(document).ready(function() {

                    // Open Update Status Modal
                    $(document).on('click', '.update-status', function() {

                        let id = $(this).data('id');

                        console.log("Appointment ID:", id);

                        $('#followUpId').val(id);
                        $('#followUpStatus').val('');
                        $('#followUpRemark').val('');
                        $('#followUpNextDate').val('');
                        $('#nextFollowUpDateGroup').hide();

                        $('#updateStatusModal').modal('show');
                    });

                    // Show/Hide Next Follow Up Date
                    $('#followUpStatus').change(function() {

                        if ($(this).val() == 'Next Followup Date') {
                            $('#nextFollowUpDateGroup').show();
                        } else {
                            $('#nextFollowUpDateGroup').hide();
                            $('#followUpNextDate').val('');
                        }

                    });

$(document).on('click', '.book-op', function () {

    let appointmentId = $(this).data('id');

    console.log("Website Appointment ID:", appointmentId);

    $('#website_appointment_id').val(appointmentId);

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

    modal.show();

});
                 // Submit Form
$('#updateStatusForm').submit(function (e) {

    e.preventDefault();

    let website_appointment_id = $('#followUpId').val();
    let status = $('#followUpStatus').val();
    let nextDate = $('#followUpNextDate').val();
    let remark = $('#followUpRemark').val().trim();

    console.log({
        website_appointment_id: website_appointment_id,
        status: status,
        next_followup_date: nextDate,
        remark: remark
    });

    // Validation
    if (status == '') {
        $('#followUpStatus').focus();
        return;
    }

    if (status == 'Next Followup Date' && nextDate == '') {
        $('#followUpNextDate').focus();
        return;
    }

    if (remark == '') {
        $('#followUpRemark').focus();
        return;
    }

    $.ajax({

        url: "{{ route('update_website_status') }}",
        type: "POST",

        data: {
            _token: "{{ csrf_token() }}",
            website_appointment_id: website_appointment_id,
            status: status,
            next_followup_date: nextDate,
            remark: remark
        },

        beforeSend: function () {

            $('#updateFollowUpBtn')
                .prop('disabled', true)
                .text('Updating...');

        },

        success: function (response) {

            $('#updateFollowUpBtn')
                .prop('disabled', false)
                .text('Update');

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

            $('#updateStatusForm')[0].reset();

            $('#nextFollowUpDateGroup').hide();

            $('#pendingAppointmentsTable').DataTable().ajax.reload(null, false);

            showToast(response.message);

        },

        error: function (xhr) {

            $('#updateFollowUpBtn')
                .prop('disabled', false)
                .text('Update');

            console.log(xhr.responseJSON);

            if (xhr.status == 422) {

                console.log(xhr.responseJSON.errors);

            } else {

                console.log(xhr.responseText);

            }

        }

    });

});

                });
                 });
</script>

@endsection