@extends('session-notes.layout.app')

@push('css')
    <style>
        ul.nav-pills li.nav-item button.nav-link.active {
            background: #3c4448;
        }

        .nav-pills .nav-link {
            color: #3c4448;
            border: solid #3c4448 2px;
        }

        .form-check-input:checked {
            background-color: #3c4448;
            border-color: #3c4448;
        }

        .form-check-input:focus {
            border-color: #3f434a41;
            box-shadow: 0 1px 1px rgba(36, 35, 35, 0.075) inset, 0 0 8px rgba(36, 37, 36, 0.6);
            outline: 0 none;
        }
    </style>
@endpush

@section('content')
    <div class="col py-2">
        @include('session-notes.modal.daily-notes')
        @include('session-notes.modal.goal-activity')
        @include('session-notes.modal.goals')
        @include('session-notes.off-canvas.goal')
        @include('session-notes.modal.sign-modal')
        @include('session-notes.modal.send-for-signing')
        @include('session-notes.modal.archive-list')

        <ul id="myTab" class="nav nav-pills nav-fill mb-3" role="tablist">
            <li class="nav-item me-2" role="presentation">
                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-selected="true">Pending<span class="badge text-bg-dark"></span></button>
            </li>
            <li class="nav-item me-2" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-pending" type="button" role="tab" aria-selected="false">Pending SignIn</button>
            </li>
            {{-- <li class="nav-item me-2" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-selected="false">SignOff</button>
            </li> --}}
            <li class="nav-item" role="presentation">
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-completed" type="button" role="tab" aria-selected="false">Completed</button>
            </li>
        </ul>
        <hr>


        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane  fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                <div class="">
                    <x-session-note.table :headers="['#', 'Patient Name', 'Appointment Date', 'Status', 'Action']" :data="'pendingTable'" />
                </div>
                <div id="categoryChart">
                    <canvas></canvas>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-pending" role="tabpanel" aria-labelledby="pills-signIn-tab" tabindex="0">
                <div class="">
                    <x-session-note.table :headers="['#', 'Patient Name', 'Appointment Date', 'Status', 'Action']" :data="'signInTable'" />
                </div>
            </div>
            <div class="tab-pane fade" id="pills-completed" role="tabpanel" aria-labelledby="pills-completed-tab" tabindex="0">
                <div class="">
                    <x-session-note.table :headers="['#', 'Patient Name', 'Appointment Date', 'Status', 'Action']" :data="'completedTable'" />
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {

            $('#myTab').on('shown.bs.tab', function(e) {

                let tabId = $(e.target).attr('data-bs-target');

                //var tabPaneId = tabId.replace('#', '');

                $(tabId + ' .dataTable').DataTable().columns.adjust();
            });
        });

        dataTableInitialize();

        function dataTableInitialize() {


            $('.dataTable').each(function() {
                let _dataUrl = "";
                let _tableId = $(this).attr("id");

                if (_tableId === "pendingTable") {
                    _dataUrl = "{{ route('session-notes.daily-notes.data') }}";
                } else if (_tableId === "signInTable") {
                    _dataUrl = "{{ route('session-notes.daily-notes.pending') }}";
                } else if (_tableId === "completedTable") {
                    _dataUrl = "{{ route('session-notes.daily-notes.completed') }}";
                }

                $('#' + _tableId).DataTable({
                    dom: 'Bfrtip',
                    /* buttons: [
                        
                        'pageLength', 'pdf', 'excelHtml5', 'print',
                       
                    ], */
                    buttons: {
                        dom: {
                            button: {
                                tag: 'button',
                                className: ''
                            }
                        },
                        buttons: [{
                            extend: 'pageLength',
                            className: 'btn  btn-secondary',
                        }, {
                            extend: 'pdf',
                            className: 'btn  btn-secondary',
                            titleAttr: 'PDF',
                            text: '<i class="fa-solid fa-file-pdf"></i>',
                        }, {
                            extend: 'excelHtml5',
                            className: 'btn  btn-secondary',
                            titleAttr: 'Excel',
                            text: '<i class="fa-regular fa-file-excel"></i>',
                        }, {
                            extend: 'print',
                            className: 'btn  btn-secondary',
                            titleAttr: 'Print',
                            text: '<i class="fa-solid fa-print"></i>',
                        }]
                    },

                    "processing": true,
                    "serverSide": true,
                    "bDestroy": true,
                    "ordering": true,
                    "responsive": true,
                    "sScrollX": '100%',
                    "sScrollXInner": "100%",
                    "autoWidth": true,
                    "pagingType": "simple_numbers",
                    "paging": true,
                    "lengthMenu": [
                        [15, 25, 50],
                        [15, 25, 50]
                    ],
                    "order": [
                        [0, 'desc']
                    ],
                    "ajax": {
                        "type": "GET",
                        "contentType": "application/json",
                        "dataType": "json",
                        "url": _dataUrl,
                        "headers": {
                            'X-CSRF-TOKEN': "$('meta[name='csrf-token']').attr('content')",
                        },
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'id'
                        },
                        {
                            data: 'user.name',
                            //name: 'name',
                            searchable: true
                        },
                        {
                            data: 'appointment_date',
                            //name: 'appointment_date',
                            searchable: true,
                            render: function(data, type, row) {
                                data = '<div class="badge text-bg-secondary">' + (data ? moment(data, 'YYYY-MM-DD').format('DD-MMM-YYYY') : null) + '</div>';
                                return data;
                            }

                        },
                        {
                            data: 'appointment_status',
                            name: 'status',
                            render: function(data, type, row) {
                                data = '<div class="badge adjust-text" style="background:' + data.color_code + '">' + data.name + '</div>';
                                return data;
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                    "columnDefs": [{
                        "targets": 1,
                        className: 'text-capitalize'
                    }],
                    "initComplete": function() {
                        textAdjust();
                    }
                });
            });

        }

        //var categoryChart = null;

        function show(appointment_id, user_id = null) {
            let _url = "{{ route('daily-notes.show') }}" + "/" + appointment_id + "/" + user_id;
            $('#appointment_id_daily').val(appointment_id);
            $('#patient_id_daily').val(user_id);
            $.ajax({
                url: _url,
                method: 'get',
                cache: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(showResponse) {
                    $('#appointment_contributors').selectpicker('deselectAll');

                    $('#note_id_daily').val(showResponse.notes.id);
                    $('#patient_name_modal').html('Patient Name: ' + (showResponse.notes.appointment?.user?.name ?? 'Not Available'));

                    $('#subjective').val(showResponse.notes.subjective);
                    $('#activities-table tbody').html(activityTableRender(showResponse.notes.goal_therapy_activities));
                    $('#goal_object_notes').val(showResponse.notes.goal_object_notes);
                    $('#assessment').val(showResponse.notes.assessment);
                    try {
                        switch (showResponse?.notes?.note_status_id) {
                            case 1:
                                $("#send-for-signin").attr("disabled", false);
                                $("#add-goal-btn").attr("disabled", false);
                                $("#mark-completed").attr("disabled", true);
                                $('.edit-btn').removeClass("disabled");
                                break;
                            case 3:
                                $("#send-for-signin").attr("disabled", true);
                                $("#add-goal-btn").attr("disabled", false);
                                $("#mark-completed").attr("disabled", false);
                                $('.edit-btn').removeClass("disabled");
                                break;
                            case 2:
                                $("#send-for-signin").attr("disabled", true);
                                $("#mark-completed").attr("disabled", true);
                                $("#add-goal-btn").attr("disabled", true);
                                $('.edit-btn').addClass("disabled");
                                break;
                            default:
                                $("#send-for-signin").attr("disabled", false);
                                $("#add-goal-btn").attr("disabled", false);
                                $("#mark-completed").attr("disabled", true);
                                $('.edit-btn').removeClass("disabled");
                                break;
                        }
                        $.each(showResponse?.notes?.supervisors, (index, val) => {
                            $('#appointment_contributors').val(function(_, currentValue) {
                                return [...currentValue, val?.supervisor_id];
                            });
                        });
                        $('#appointment_date').flatpickr({
                            enableTime: false,
                            dateFormat: "Y-m-d"
                        }).setDate(((showResponse?.notes?.appointment.appointment_date ?? '01-01-1990')), true, 'Y-m-d');
                        $('#appointment_start_time').flatpickr({
                            enableTime: true,
                            noCalendar: true,
                            altInput: true,
                            altFormat: 'h:i K',
                            dateFormat: "H:i",
                            time_24hr: false,
                            /* onChange: function(selectedDates, dateStr) {
                                // Calculate 15 minutes ahead of the selected start time
                                const startTime = selectedDates[0];
                                const newEndTime = new Date(startTime.getTime() + 15 * 60 * 1000);

                                // Check if the new end time is behind the existing end time
                                const currentEndTime = endTimePicker.selectedDates[0];
                                if (!currentEndTime || newEndTime > currentEndTime) {
                                    endTimePicker.setDate(newEndTime);
                                }
                            } */
                        }).setDate(((showResponse?.notes?.appointment.start_time ?? '00:00')), true, 'H:i');
                        $('#appointment_end_time').flatpickr({
                            enableTime: true,
                            noCalendar: true,
                            altInput: true,
                            altFormat: 'h:i K',
                            dateFormat: "H:i",
                            time_24hr: false
                        }).setDate(((showResponse?.notes?.appointment.end_time ?? '00:00')), true, 'H:i');
                        $('#appointment_contributors').selectpicker('refresh');
                        $('#plan_of_treatment').val(JSON.parse(showResponse.notes.plan)?.plan_plan_of_treatment);
                        $('#take_of_activities').val(JSON.parse(showResponse.notes.plan)?.plan_take_of_activities);
                    } catch (error) {
                        console.error('Error parsing JSON:', error);
                    }
                    updateGoalsModalAndTable();
                },
                error: function(xhr, status, error) {
                    iziToastError(error + ' unable to load response');
                }
            });
        }




        function activityTableRender(jsonString) {
            let tr = '';
            try {
                const parsedObject = JSON.parse(jsonString);
                parsedObject.forEach(col => {
                    tr += '<tr>';
                    tr += '<td contenteditable="true" oninput="showSuggestionsTd(this)" onblur="hideSuggestionsTd(this)">' + col[0] + ' </td>';
                    tr += '<td contenteditable="true">' + col[1] + '</td>';
                    tr += '<td contenteditable="true">' + col[2] + '</td>';
                    tr += '<td contenteditable="true">' + col[3] + '</td>';
                    tr += '<td contenteditable="true"><a href="javascript:void(0)" class="btn text-danger" onclick="removeTableRow(this);"><i class="fa-solid fa-xmark"></i></a></td>';
                    tr += '</tr>';
                });
                return tr;
            } catch (error) {
                tr += '<tr>';
                tr += '<td contenteditable="true" oninput="showSuggestionsTd(this)" onblur="hideSuggestionsTd(this)">No Data</td>';
                tr += '<td contenteditable="true"></td>';
                tr += '<td contenteditable="true"></td>';
                tr += '<td contenteditable="true"></td>';
                tr += '<td contenteditable="true"><a href="javascript:void(0)" class="btn text-danger" onclick="removeTableRow(this);"><i class="fa-solid fa-xmark"></i></a></td>';
                tr += '</tr>';
                return tr;
            }
        }

        function goalsTableRender(goalsData) {
            let tr = '';
            if (goalsData && Object.keys(goalsData).length > 0) {
                for (let category in goalsData) {
                    if (goalsData.hasOwnProperty(category)) {
                        let categoryGoals = goalsData[category];
                        tr += '<tr>';
                        tr += '<th colspan="5">' + (category ? category : 'Short Term') + '</th>';
                        tr += '</tr>';
                        categoryGoals.forEach(col => {
                            tr += '<tr>';
                            tr += '<td>' + col?.goal + `<div clss="d-flex">(<cite  id="percent-show-${col.id}" title="" class="text-danger">0%</cite>)</div>` +'</td>';
                            switch (col?.type) {
                                case 'bool':
                                    tr += yesNoTemplateFun(col);
                                    break;
                                case 'percentage':
                                    tr += percentTemplateFun(col);
                                    break;
                                case 'timer':
                                    tr += timerTemplateFun(col);
                                    break;
                                default:
                                    tr += '<td>Null Type</td>';
                                    break;
                            }                            
                            tr += '<td><a class="btn" data-bs-toggle="collapse" href="' + `#collapse-${col.id}` + '" role="button"><i class="fa-solid fa-chart-simple"></i></a></td>';
                            tr += '<td><a href="javascript:void(0)" type="button" title="remove" onclick="removeGoal(' + col.id + ', this);" class="text-danger"><i class="fa-solid fa-xmark"></i></a>';
                            tr += '<a href="javascript:void(0)" type="button" title="move to archive" onclick="archiveGoal(' + col.id + ', this);" class="ms-2 text-success"><i class="fa-solid fa-box-archive"></i></a></td>';
                            tr += '</tr>';
                            tr += '<tr><td colspan="5"><div class="collapse" id="' + `collapse-${col.id}` + '">';
                            tr += '<div>';
                            tr += '<canvas id="' + `canvas-${col.id}` + '" class="w-100 h-35"></canvas>';
                            tr += '</div>';
                            tr += '<ul id="'+ `ul-percent-each-${col.id}` +'" class="list-group list-group-horizontal overflow-auto" style="max-width: 60vw;"></ul>';
                            tr += '</div></td></tr>';
                        });
                    }
                }

            } else {
                tr += '<tr>';
                tr += '<td colspan="5">No Data</td>';
                tr += '</tr>';

            }
            return tr;
        }

        /* function goalsTableRender(goalsData) {
            let tr = '';

            if (goalsData && Object.keys(goalsData).length > 0) {
                for (let category in goalsData) {
                    if (goalsData.hasOwnProperty(category)) {
                        let categoryGoals = goalsData[category];
                        tr += '<tr>';
                        tr += '<th colspan="5">' + (category ? category : 'Short Term') + '</th>';
                        tr += '</tr>';
                        categoryGoals.forEach(col => {
                            tr += '<tr>';
                            tr += '<td>' + col?.goal + '</td>';
                            tr += '<td>' + (col?.value ? col?.value : 'N/A') + '</td>';
                            tr += '<td colspan="2">' + (col.comments ? col.comments : 'N/A') + '</td>';
                            tr += '<td><a href="javascript:void(0)" onclick="updateGoalActivity();" type="button" class="btn" data-bs-toggle="modal" data-bs-target="#goalActivityModal" data-bs-dismiss="false"><i class="fa-solid fa-play"></i></a></td>';
                            tr += '</tr>';
                        });
                    }
                }
            } else {
                tr += '<tr>';
                tr += '<td colspan="5">No Data</td>';
                tr += '</tr>';

            }
            return tr;
        } */
    </script>
@endpush