@extends('layouts.default')

@section('content')

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">Appointment Approval Panel</h4>
        </div>
        <div class="card-content">
            <div class="card-body card-dashboard">
                <div class="d-flex justify-content-between align-items-center my-1">
                    <div class="col-md-4">
                        <div class="row">
                            <label for="status" class="mr-2">Status</label>
                            <select class="select2 form-control status" name="status" id="status">
                                <option value="">ALL</option>
                                <option value="{{\App\Enums\Status::PENDING}}">Pending</option>
                                <option value="{{\App\Enums\Status::APPROVED}}">Approved</option>
                                <option value="{{\App\Enums\Status::DECLINED}}">Declined</option>
                                <option value="{{\App\Enums\Status::EXPIRED}}">Expired</option>
                            </select>
                        </div>
                    </div>
                    <a href="" id="print_pdf" class="btn btn-info">
                        <i class="bx bxs-file-pdf"></i> Print
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm datatable" id="appointments-table">
                        <thead>
                        <tr>
                            <th>Sl.</th>
                            <th>Name</th>
                            <th>Mobile Number</th>
                            <th>Email</th>
                            <th>Apply Date</th>
                            <th>Proposed Date</th>
                            <th>Approved Date</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <form name="report-generator" id="report-generator" method="post" target="_blank" action="{{route('reportGet', ['title' => 'chairman-appointment-report'])}}">
        {{csrf_field()}}
        <input type="hidden" name="xdo" value="/~weblogic/AMS/RPT_PUBLIC_APPOINTMENT_ASC_DESC.xdo"/>
        <input type="hidden" name="report_type" id="report_type" value="pdf" />
        <input type="hidden" name="p_status" id="p_status" value="" />
    </form>
    <form name="report-generator" id="report-generator-ind" method="post" target="_blank" action="{{route('reportGet', ['title' => 'individual-appointment-report'])}}">
        {{csrf_field()}}
        <input type="hidden" name="xdo" value="/~weblogic/AMS/RPT_Individual_appointment_RTF.xdo"/>
        <input type="hidden" name="report_type" id="report_type" value="pdf" />
        <input type="hidden" name="p_app_id" id="p_app_id" value="" />
    </form>
    <!-- Modal for viewing application details -->
    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewModalLabel">Application Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Application details will be loaded here via AJAX -->
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for viewing application details -->
    <div class="modal fade" id="appDateModal" tabindex="-1" role="dialog" aria-labelledby="appDateModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="appDateModalLabel">Do you want to approve this appointment?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="app-date-modal-body">
                    <!-- Application details will be loaded here via AJAX -->
                    {{--                    <div class="card">--}}
                    <div class="card-body">
                        <form action="" method="POST">
                            <input type="hidden" id="appointment_id" name="appointment_id">
                            <input type="hidden" id="update_yn" name="update_yn" value="N">
                            <label class="input-required app-date-label">Appointment Date and Time</label>
                            <div class="input-group date" id="appointment_date" data-target-input="nearest">
                                <input type="text"
                                       name="appointment_date"
                                       value=""
                                       class="form-control datetimepicker-input customError appointment_date"
                                       data-target="#appointment_date"
                                       data-toggle="datetimepicker" autocomplete="off"
                                       placeholder="Appointment Date" required>
                                <div class="input-group-append" data-target="#appointment_date"
                                     data-toggle="datetimepicker">
                                    <div class="input-group-text">
                                        <i class="bx bx-calendar"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center mt-2">
                                <button type="submit" class="btn btn-success" id="approve-button" name="status"
                                        value="approved">Approve
                                </button>
                            </div>

                        </form>
                        {{--                        </div>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer-script')
    <script>
        function dateTime(selector) {
            var elem = $(selector);
            elem.datetimepicker({
                format: 'DD-MM-YYYY hh:mm A',
                minDate: moment(),
                widgetPositioning: {
                    horizontal: 'left',
                    vertical: 'bottom'
                },
                icons: {
                    time: 'bx bx-time',
                    date: 'bx bxs-calendar',
                    up: 'bx bx-up-arrow-alt',
                    down: 'bx bx-down-arrow-alt',
                    previous: 'bx bx-chevron-left',
                    next: 'bx bx-chevron-right',
                    today: 'bx bxs-calendar-check',
                    clear: 'bx bx-trash',
                    close: 'bx bx-window-close'
                },
                // enabledHours: [10, 11, 12, 13], // Restrict selectable hours to 10 am to 1 pm
                // stepping: 60 // Set minute stepping to 60 for precise time selection
            });

            // let preDefinedDate = elem.attr('data-predefined-date');
            //
            // if (preDefinedDate) {
            //     let preDefinedDateMomentFormat = moment(preDefinedDate, "DD-MM-YYYY HH:mm").format("DD-MM-YYYY HH:mm A");
            //     elem.datetimepicker('defaultDate', preDefinedDateMomentFormat);
            // }
        }

        $(document).ready(function () {
            dateTime("#appointment_date")

            var table = $('#appointments-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('chairman-appointment.datatable') }}',
                    type: 'POST',
                    headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                    data: function (d) {
                        d.status = $('#status').val();
                    },
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'name', name: 'name'},
                    {data: 'mobile_no', name: 'mobile_no'},
                    {data: 'email', name: 'email'},
                    {data: 'formatted_apply_date', name: 'formatted_apply_date'},
                    {data: 'formatted_proposed_date_1', name: 'formatted_proposed_date_1'},
                    {data: 'formatted_approved_date', name: 'formatted_approved_date'},
                    {data: 'status', orderable: false, searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ]
            });

            $('#status').on('change', function () {
                table.ajax.reload();
            });

            // View appointment details
            $('#appointments-table').on('click', '.view', function () {
                let id = $(this).data('id');
                $('#viewModal').modal('show');
                $('#p_app_id').val(id);

                $.ajax({
                    url: '/chairman-appointment/appointment-detail/' + id,
                    type: 'GET',
                    // dataType: 'json',
                    success: function (res) {
                        // console.log(res)
                        $('.modal-body').html(res)
                    }
                });
            });

            // Approve appointment
            $('#appointments-table').on('click', '.approve', function () {
                let id = $(this).data('id');
                let date = $(this).data('app-date');
                $('#appointment_id').val(id);
                $('.appointment_date').val(date);
                $('#update_yn').val('N');
                $('#appDateModalLabel').text('Do you want to approve this appointment?');
                $('.app-date-label').text('Appointment Date and Time');
                $('#appDateModal').modal('show');
            });

            // Update Appointment date
            $('#appointments-table').on('click', '.update', function () {
                var id = $(this).data('id');
                let date = $(this).data('app-date');
                $('#appointment_id').val(id);
                $('.appointment_date').val(date);
                $('#update_yn').val('Y');
                $('#appDateModalLabel').text('Do you want to update the appointment date?');
                $('.app-date-label').text('Updated Appointment Date and Time');
                $('#appDateModal').modal('show');
            });

            $('#approve-button').on('click', function (e) {
                e.preventDefault();
                let id = $('#appointment_id').val();
                let appointment_date = $('.appointment_date').val()
                if( id && appointment_date) {
                    $.ajax({
                        url: '/chairman-appointment/approve/' + id,
                        type: 'POST',
                        headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                        data: {
                            appointment_date: $('.appointment_date').val(),
                            update_yn: $('#update_yn').val()
                        },
                        success: function (response) {
                            console.log(response)
                            // Reload DataTable or update UI as needed
                            if (response.status) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success!',
                                    text: response.message,
                                }).then(function () {
                                    $('#appDateModal').modal('hide');
                                    table.ajax.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error!',
                                    text: response.message,
                                }).then(function () {
                                    $('#appDateModal').modal('hide');
                                    table.ajax.reload();
                                });
                            }
                        },
                        error: function (xhr, status, error) {
                            // Handle error
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'PLEASE, PROVIDE APPOINTMENT DATE!',
                    });
                }
            });

            // Decline appointment with confirmation
            $('#appointments-table').on('click', '.decline', function () {
                var id = $(this).data('id');
                Swal.fire({
                    title: "Are you sure?",
                    text: "Once declined, this appointment will be marked as declined!",
                    icon: "warning",
                    showCancelButton: true,
                    cancelButtonColor: '#d33',
                    buttons: true,
                    dangerMode: true,
                })
                .then((response) => {
                    if (response.isConfirmed) {
                        // Make AJAX request to decline appointment
                        $.ajax({
                            url: '/chairman-appointment/decline/' + id,
                            type: 'POST',
                            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                            success: function (response) {
                                console.log(response)
                                // Reload DataTable or update UI as needed
                                if (response.status) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success!',
                                        text: response.message,
                                    }).then(function () {
                                        table.ajax.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error!',
                                        text: response.message,
                                    }).then(function () {
                                        table.ajax.reload();
                                    });
                                }
                            },
                            error: function (xhr, status, error) {
                                // Handle error
                            }
                        });
                    }
                });
            });

            $("#status").on('change',function(e) {
                let status = $(this).val()
                $('#p_status').val(status)
            });

            // All appointment report
            $("#print_pdf").on('click',function(e) {
                e.preventDefault();
                var report_form = $("#report-generator");
                report_form.submit();
            });
        });
    </script>
@endsection