@include('division.layout.header')
<div class="container-fluid">
    <div class="row pt-3">
        <div class="col-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>Division</option>
                @foreach ($divisionData as $key => $value)
                        <option value="{{ $value['id'] }}">{{ $value['name'] }}</option>
                    @endforeach
            </select>
        </div>
        @endif
        @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'Compliance')
        <div class="col-lg-auto">
        @else
        <div class="col-lg-auto ms-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>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>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 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>
        <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>
        @endif

    </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>Division Name</th>
                            @endif
                            <th>Protocol number</th>
                            <th>Study Name</th>
                            <th>Patient Enrolled Count</th>
                            <th>Patient Summary</th>
                        </tr>
                        </thead>
                        <tbody>
                            {{-- <tr> --}}
                                {{-- <td>1</td>
                                <td>Division</td>
                                <td>Protocol</td>
                                <td>Study</td>
                                <td>Patient</td> --}}
                            {{-- </tr> --}}

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


@include('division.layout.footer')

<script>

$(function() {

var start = moment().subtract('Year').startOf('Year');
var end = moment().subtract('Year').endOf('Year');

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')
        ],
        'This Year': [moment().subtract('Year').startOf('Year'), moment().subtract('Year')
            .endOf('Year')
        ]
    }
}, cb);

cb(start, end);

});


    $(document).ready(function() {
        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();
            $("#custom_division_filter").val('').change();
            $('#datatable').DataTable().ajax.reload();
            getCount();
            // getStudyData();
        });
    });
</script>

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

$(function() {
        var columns = [

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


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



                }
            },
            "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();
        $.ajax({
            url: "{{ url('/dashboard-count') }}",
            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
                'custom_study_filter': custom_study_filter,
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                $("#totalContracts").html(response.data.totalContracts);
                // $("#inactiveContracts").html(response.data.inactiveContracts);
                $("#activeContracts").html(response.data.activeContracts);
                $("#completedContracts").html(response.data.completedContracts);
                $("#SuspendedContracts").html(response.data.SuspendedContracts);
                $("#complianceverificationPending").html(response.data.complianceverificationPending);
                $("#complianceApproved").html(response.data.complianceApproved);
                $("#PendingAtAccount").html(response.data.PendingAtAccount);

                $("#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(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "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
                _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(id) {
            var study_id = id;
            $.ajax({
                type: "POST",
                url: "{{ route('studyVisePatientDataExport') }}",
                //  async: false,

                data: {
                    study_id: study_id,
                    '_token': "{{ csrf_token() }}"
                },
                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");
                    }
                }
            });
        }



</script>