@include('division.layout.header')
<div class="container-fluid">
    <div class="row pt-3 g-2">
        <div class="col-auto me-auto">
            <h2 class="main_title">Dashboard</h2>
        </div>
        @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
            <div class="col-lg-auto ms-auto">
                <select class="select2 js-example-basic-single select-label form-control w-100"
                    id="custom_division_filter" name="custom_division_filter" onchange="studyFilterData()">
                    <option value="" selected disabled>Select Division</option>
                    @foreach ($divisionData as $key => $value)
                        <option value="{{ $value['id'] }}">{{ $value['name'] }}</option>
                    @endforeach
                </select>
            </div>
        @endif
        <div class="col-lg-auto ">
            <select class="select2 js-example-basic-single select-label form-control w-100" name="activity_type_id"
                id="activity_type_id" onchange="studyFilterData()">
                <option value="" selected disabled>Select Type</option>
                <option value="1">CRF</option>
                <option value="2">SRS</option>
            </select>
        </div>
        @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
            <div class="col-lg-auto">
            @else
                <div class="col-lg-auto ">
        @endif

        <select class="select2 js-example-basic-single select-label form-control w-100" id="custom_study_filter"
            name="custom_study_filter">
            <option value="" selected disabled>Select Study</option>

        </select>
    </div>
    @if (Auth::user()->role != 'Compliance')
        <div class="col-lg-auto">
            <div class="d-flex align-items-center">
                <div id="reportrange" class="daterange">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down">
                    </i>
                    <input type="hidden" name="dtFrom" id="dtFrom" value="">
                    <input type="hidden" name="dtTo" id="dtTo" value="">
                </div>
                <a href="javascript:void(0);" id="applyButton" class="btn btn-primary ms-2"><i
                        class="fa fa-search"></i></a>
                <a href="javascript:void(0);" id="clearButton" class="btn btn-danger ms-2"><i
                        class="fa fa-times"></i></a>
            </div>
        </div>
    @else
        <div class="col-lg-auto">
            <div class="d-flex align-items-center">

                <a href="javascript:void(0);" id="applyButton" class="btn btn-primary ms-2"><i
                        class="fa fa-search"></i></a>
                <a href="javascript:void(0);" id="clearButton" class="btn btn-danger ms-2"><i
                        class="fa fa-times"></i></a>
            </div>
        </div>
    @endif

</div>
<!--  Row 1 -->
<div class="row pt-3">

    {{-- @if (Auth::user()->role != 'Compliance') --}}
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Total Contracts</span>
                    <h3 id="totalContracts"></h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-people-group"></i></span>
                </div>
            </div>
        </div>

        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Finance Approval Pending</span>
                    <h3 id="financeApprovalPending"></h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-hourglass-half"></i></span>
                </div>
            </div>
        </div>
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Finance Rejected Contract</span>
                    <h3 id="financeRejected"></h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-xmark"></i></span>
                </div>
            </div>
        </div>
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Active Contracts</span>
                    <h3 id="activeContracts"></h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-user-doctor"></i></span>
                </div>
            </div>
        </div>


        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Suspended Contracts</span>
                    <h3 id="SuspendedContracts"></h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-people-group"></i></span>
                </div>
            </div>
        </div>
    {{-- @endif --}}

    <div class="col-lg-auto">
        <div class="white_shadow dasboard-3">
            <div class="left">
                <span>Compliance Rejected Contracts </span>
                <h3 id="complianceRejectedContracts"></h3>
            </div>
            <div class="right">
                <span><i class="fa-solid fa-stethoscope"></i></span>
            </div>
        </div>
    </div>
    <div class="col-lg-auto">
        <div class="white_shadow dasboard-3">
            <div class="left">
                <span>Compliance Verified Contracts </span>
                <h3 id="completedContracts"></h3>
            </div>
            <div class="right">
                <span><i class="fa-solid fa-stethoscope"></i></span>
            </div>
        </div>
    </div>



    @if (Auth::user()->role == 'Compliance')
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Compliance Verification Pending </span>
                    <h3 id="complianceVerificationPending"></h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-stethoscope"></i></span>
                </div>
            </div>
        </div>
        <div class="col-lg-auto">
            <div class="white_shadow dasboard-3">
                <div class="left">
                    <span>Compliance Approved Count </span>
                    <h3 id="complianceApproved"></h3>
                </div>
                <div class="right">
                    <span><i class="fa-solid fa-stethoscope"></i></span>
                </div>
            </div>
        </div>
    @endif
    <div class="col-lg-auto">
        <div class="white_shadow dasboard-3">
            <div class="left">
                <span>Pending at account count </span>
                <h3 id="PendingAtAccount"></h3>
            </div>
            <div class="right">
                <span><i class="fa-solid fa-stethoscope"></i></span>
            </div>
        </div>
    </div>
    <div class="col-lg-auto">
        <div class="white_shadow dasboard-3">
            <div class="left">
                <span>Honorarium Released count </span>
                <h3 id="PaymentCompleted"></h3>
            </div>
            <div class="right">
                <span><i class="fa-solid fa-check-circle"></i></span>
            </div>
        </div>
    </div>
    <div class="col-lg-auto">
        <div class="white_shadow dasboard-3">
            <div class="left">
                <span>Deleted Contract </span>
                <h3 id="deletedContracts">0</h3>
            </div>
            <div class="right">
                <span><i class="fa-solid fa-trash-can"></i></span>
            </div>
        </div>
    </div>

</div>

<div class="row mb-3">
</div>


{{-- @if (Auth::user()->role != 'Compliance') --}}
<div class="row">
    <div class="col-md-4 col-lg-4 col-sm-6 py-1">
        <div class="card">
            <h2 class="draft">Active/Suspended Contracts</h2>
            <div class="card-body">
                <canvas id="chDonut1"></canvas>
            </div>
        </div>
    </div>

    <div class="col-md-8 col-lg-8 col-sm-12 py-1">
        <div class="card">
            <h2 class="draft">Study List</h2>
            {{-- <div class="study_list card-body" id="study_data">
                </div> --}}
            <div class="table-responsive pt-3">

                <table class="table study_table data-table-dr w-100" id="datatable">
                    <thead>
                        <tr>
                            <th>Sr No.</th>
                            @if (Auth::user()->role != 'Division')
                                <th>Indication</th>
                                <th>Division Name</th>
                            @endif
                            <th>Protocol number</th>
                            <th>Activity Type</th>
                            <th>Study Name</th>
                            <th>Patient Enrolled Count</th>
                            <th>Patient Summary</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

</div>
{{-- @endif --}}

</div>

</div>

<div class="modal fade" id="showCount" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
        <div class="modal-content" id="showCountArea">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel">Patient Summary</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row justify-content-center text-center pt-3">
                    <div class="col-lg-auto">
                        <div class="white_shadow dasboard-3 p-3">
                            <div class="left">
                                <span>Filled Count</span>
                                <h3 id="addedPatientCount" class="display-4"></h3>
                            </div>
                            <div class="right">
                                <span><i class="fa-solid fa-people-group fa-2x"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-auto">
                        <div class="white_shadow dasboard-3 p-3">
                            <div class="left">
                                <span>Pending Count</span>
                                <h3 id="remmingPatientCount" class="display-4"></h3>
                            </div>
                            <div class="right">
                                <span><i class="fa-solid fa-user-doctor fa-2x"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="divisionModal" tabindex="-1" aria-labelledby="divisionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="divisionModalLabel">Division Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered space_table">
                    <thead>
                        <tr>
                            <th>Division Name</th>
                            <th>Existing Patient Count</th>
                        </tr>
                    </thead>
                    <tbody id="divisionModalBody">
                        <!-- Data will be injected here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


@include('division.layout.footer')

<script>
    $(function() {
        let start = moment().month(3).startOf('month');
        let end = moment().add(1, 'year').month(2).endOf('month');

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
                'MMMM D, YYYY'));
            $("#dtFrom").val(start.format('YYYY-MM-DD'));
            $("#dtTo").val(end.format('YYYY-MM-DD'));
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1,
                    'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment()
                    .subtract(1, 'month').endOf('month')
                ],
                'Last FY': [moment().subtract(1, 'year').month(3).startOf(
                    'month'), // April 1st of last year
                    moment().month(2).endOf('month')
                ],
                'This FY': [moment().month(3).startOf('month'), // April 1st of the current year
                    moment().add(1, 'year').month(2).endOf('month')
                ]
            }
        }, cb);

        cb(start, end);


        getCount();
        // getStudyData();

        $("#applyButton").click(function() {
            getCount();
            // getStudyData();
            $('#datatable').DataTable().ajax.reload();
        });

        $("#clearButton").click(function() {
            $('#reportrange span').html('');
            $("#dtFrom").val('');
            $("#dtTo").val('');
            $("#custom_study_filter").val('').change();
            $("#activity_type_id").val('').change();
            $("#custom_division_filter").val('').change();
            $('#datatable').DataTable().ajax.reload();
            getCount();
            // getStudyData();
        });


        let columns = [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false
            },
            @if (Auth::user()->role != 'Division')
                {
                    data: 'indication',
                    name: 'indication',
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name',
                    searchable: false
                },
            @endif {
                data: 'study_import_name',
                name: 'study_import_name'
                // searchable: false
            },
            {
                data: 'activity_type_id',
                name: 'activity_type_id'
            },
            {
                data: 'study_name',
                name: 'study_name',
            },
            {
                data: 'total_patient_count',
                name: 'total_patient_count',
                searchable: false
            },
            {
                data: 'action',
                name: 'action',
                searchable: false
            }
        ];
        let columnDefs = [
            // {
            //     'targets': 0,
            //     'checkboxes': {
            //         'selectRow': true,
            //     }
            // }
        ];
        getDataTable("{{ route('division.dashboard.studyList') }}", columns, columnDefs);
    });

    function showDivisionModal(data) {
        let divisions = typeof data === "string" ? JSON.parse(data) : data;
        let tbody = document.getElementById('divisionModalBody');
        tbody.innerHTML = ''; // Clear previous content

        divisions.forEach(function(division) {
            let row = `<tr>
                            <td>${division.division_name}</td>
                            <td>${division.existing_patient_count}</td>
                        </tr>`;
            tbody.innerHTML += row;
        });

        // Show modal
        let divisionModal = new bootstrap.Modal(document.getElementById('divisionModal'));
        divisionModal.show();
    }

    function patientCountShow(addedPatientCount, remmingPatientCount) {
        $("#addedPatientCount").text(addedPatientCount);
        $("#remmingPatientCount").text(remmingPatientCount);
        $("#showCount").modal('show');
    }

    function getDataTable(url, columns, columnDefs) {
        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            bDestroy: true,
            order: [],
            "scrollX": true,
            columns: columns,
            columnDefs: columnDefs,
            ajax: {
                method: 'post',
                url: url,
                data: function(d) {
                    d._token = "{{ csrf_token() }}",
                    @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
                        d.division_id = $('#custom_division_filter option:selected').val(),
                    @endif
                    d.custom_study_filter = $('#custom_study_filter option:selected').val(),
                    d.activity_type_id = $('#activity_type_id option:selected').val()
                },
                error: function(xhr, status, error) {
                    if (xhr.status == 419) {
                        // Session expired, redirect to login and show notify
                        $.notify('Your session has expired. Please log in again.');
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    } else if (xhr.status == 500) {
                        $.notify("Please try after a few minutes", "error");
                    } else {
                        $.notify(xhr.responseJSON?.message || "An unexpected error occurred", "error");
                    }
                }
            },
            "drawCallback": function(settings) {
                new VenoBox({
                    selector: '.venobox_img',
                });
                //for check box
                $('#checkall').prop('checked', false);
                $('.actionBtn').hide();
                $('.dt-checkboxes').click(function() {
                    if ($('[name="checkbox[]"]:checked').length > 0) {
                        $('.actionBtn').show();
                    } else {
                        $('.actionBtn').hide();
                    }
                });
            }
        });
    }
    // function getStudyData(){
    //     $.ajax({
    //         url: "{{ url('/dashboard-studyList') }}",
    //         type: 'POST',
    //         data: {
    //             '_token': '{{ csrf_token() }}',
    //             @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
    //                 division_id: $('#custom_division_filter option:selected').val(),
    //             @endif

    //             'custom_study_filter': $('#custom_study_filter option:selected').val(),

    //         },
    //         dataType: "json",
    //         success: function(response, textStatus, xhr) {
    //             html = '';


    //             $.each(response, function(key, value) {
    //                 html += '<div class="view_pdf">'+
    //                     '<div class="icon">'+
    //                        ' <a href=""><i class="fa-regular fa-file-pdf"></i></a>'+
    //                    ' </div>'+
    //                    ' <div class="pdf_name">'+
    //                        ' <a href="">'+value.study_import_name +'</a>'+
    //                             '<a href="#" class="btn btn-success data_sm" onClick="patient_data_export('+value.study_id+')"><i class="fa fa-download me-2"></i>Export '+'Patient Data</a>';
    //                     html +='';
    //                             @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
    //                             html +=  '<p style="width: 100%;">('+value.study_name+') '+value.name +'</p>';
    //                             @else
    //                             html +=  '<p style="width: 100%;">('+value.study_name+') </p>';
    //                             @endif
    //                             html +=  '</div>'+
    //                 '</div>';

    //             });
    //             $("#study_data").html(html);
    //         },
    //         error: function(jqXHR, textStatus, errorThrown) {
    //             $.notify(jqXHR.responseJSON.message, "error");
    //         }
    //     });


    // }
    function getCount() {
        dtFrom = $("#dtFrom").val();
        dtTo = $("#dtTo").val();
        custom_study_filter = $("#custom_study_filter option:selected").val();
        activity_type_id = $("#activity_type_id option:selected").val();
        $.ajax({
            url: "{{ route('dashboardCount') }}",
            type: 'GET',
            data: {
                '_token': '{{ csrf_token() }}',
                'dtFrom': dtFrom,
                'dtTo': dtTo,
                @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
                    division_id: $('#custom_division_filter option:selected').val(),
                @endif
                'activity_type_id': activity_type_id,
                'custom_study_filter': custom_study_filter
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                $("#totalContracts").html(response.data.totalContracts);
                // $("#inactiveContracts").html(response.data.inactiveContracts);
                $("#financeApprovalPending").html(response.data.financeApprovalPending);
                $("#financeRejected").html(response.data.financeRejected);
                $("#activeContracts").html(response.data.activeContracts);
                $("#completedContracts").html(response.data.completedContracts);
                $("#SuspendedContracts").html(response.data.SuspendedContracts);
                $("#complianceVerificationPending").html(response.data.complianceVerificationPending);
                $("#complianceRejectedContracts").html(response.data.complianceRejectedContracts);
                $("#complianceApproved").html(response.data.complianceApproved);
                $("#PendingAtAccount").html(response.data.PendingAtAccount);
                $("#PaymentCompleted").html(response.data.PaymentCompleted);
                $("#deletedContracts").html(response.data.deletedContracts);

                // $("#documentVerificationDoctors").html(response.data.documentVerificationDoctors + "/" +
                //     response.data
                //     .totalContracts);
                // $("#pendingVerificationDoctors").html(response.data.pendingVerificationDoctors + "/" +
                //     response.data
                //     .totalContracts);
                // $("#sopReportDoctors").html(response.data.sopReportDoctors + "/" + response.data
                //     .totalContracts);



                var donutOptions = {
                    cutoutPercentage: 10,
                    legend: {
                        position: 'right',
                        padding: 5,
                        labels: {
                            pointStyle: 'circle',
                            usePointStyle: true
                        }
                    }
                };
                // Donut 1 data
                var chDonutData1 = {
                    labels: ['Active Contracts', 'Suspended Contracts'],
                    datasets: [{
                        backgroundColor: colors.slice(0,
                            2), // Assuming 'colors' array is defined
                        borderWidth: 0,
                        data: [response.data.activeContracts || 0, response.data
                            .SuspendedContracts || 0
                        ] // Default to 0 if data is not available
                    }]
                };
                // Render the chart
                var chDonut1 = document.getElementById("chDonut1");
                if (chDonut1) {
                    new Chart(chDonut1, {
                        type: 'pie',
                        data: chDonutData1,
                        options: donutOptions
                    });
                }
            },
            error: function(xhr, status, error) {
                if (xhr.status == 419) {
                    // Session expired, redirect to login and show notify
                    $.notify('Your session has expired. Please log in again.');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else if (xhr.status == 500) {
                    $.notify("Please try after a few minutes", "error");
                } else {
                    $.notify(xhr.responseJSON?.message || "An unexpected error occurred", "error");
                }
            }
        });
    }

    @if (Auth::user()->role == 'Division')
        studyFilterData();
    @endif
    function studyFilterData() {
        $.ajax({
            url: "{{ route('getStudyData') }}",
            type: "POST",
            data: {
                @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
                    division_id: $('#custom_division_filter option:selected').val(),
                @else
                    division_id: '{{ Auth::user()->id }}',
                @endif
                activity_type_id: $('#activity_type_id option:selected').val(),
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $('#custom_study_filter').html('<option value="">Select Study</option>');
                $.each(result, function(key, value) {
                    $("#custom_study_filter").append('<option value="' + value.study_id + '">' +
                        value
                        .study_name + '</option>');
                });
            }
        })
    }

    function patient_data_export(study_id, division_id=0) {
        $.ajax({
            type: "POST",
            url: "{{ route('studyVisePatientDataExport') }}",
            //  async: false
            data: {
                '_token': "{{ csrf_token() }}",
                study_id: study_id,
                @if (Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
                custom_division_filter: division_id
                @endif
            },
            success: function(response) {
                if (response == 1) {
                    $.notify("You will get generated report within 10 minutes in download report section.",
                        "info");
                } else {
                    $.notify('Something went wrong !', "error");
                }
            },
            error: function(xhr, status, error) {
                if (xhr.status == 419) {
                    // Session expired, redirect to login and show notify
                    $.notify('Your session has expired. Please log in again.');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else if (xhr.status == 500) {
                    $.notify("Please try after a few minutes", "error");
                } else {
                    $.notify(xhr.responseJSON?.message || "An unexpected error occurred", "error");
                }
            }
        });
    }
</script>