@include('division.layout.header')


<link href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel="stylesheet">
<link href="https://cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.dataTables.css" rel="stylesheet">
<style>
    table.fixedHeader-floating.no-footer th {
  font-size: 12px !important;
  padding: 14px 0 !important;
}

.dtfh-floatingparent.dtfh-floatingparent-head {
  z-index: 999 !important;
}

span.dt-column-order {
  opacity: 0;
}

.dtfh-floatingparent.dtfh-floatingparent-head th {
  /* font-size: 12px; */
}
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
    background: #07529B;
    color: #fff;
    text-align: center;
}
</style>


<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row">

        <div class="col-auto my-auto">
            <h2 class="main_title">Verified Contracts</h2>
        </div>
        {{-- <div class="col-lg-auto  col-md-auto col-sm-auto ms-auto">
            <button class="btn btn-primary actionBtn" onclick="generateBunch()">Generate SOP Report </button>
        </div> --}}

    </div>

    <div class="row mb-3">
        <div class="col-lg-2 col-md-3 col-sm-4 col-auto ms-auto">
            <select class="select2 js-example-basic-single select-label form-control w-100" name="activity_status_filter"
                id="activity_status_filter">
                <option value="" selected>Select Status</option>
                <option value="compliance_verified">Compliance Verified</option>
                <option value="sop_report_generated">Pending at Accounts</option>
            </select>
        </div>

        <div class="col-lg-auto col-md-auto col-sm-auto col-auto mb-2">
            <div class="d-flex align-items-center">

                <a href="#" class="btn btn-primary ms-2" onclick="setFilter()"><i class="fa fa-search"></i></a>
                <a href="#" class="btn btn-danger ms-2" onclick="resetFilter()"><i class="fa fa-times"></i></a>
            </div>
        </div>


    </div>

    <div class="row">

        <div class="col-12">
            <table id="datatable" class="table table-striped data-table-dr" style="width:100%">
                <thead>
                    <tr>
                        {{-- <th><input type="checkbox" name="checkallname" id="checkall" value="checked" onchange="checkall()"></th> --}}
                        <th>Sr No</th>
                        <th>Doctor Name</th>
                        <th>Doctor Center Code </th>
                        <th>Field Center Code </th>
                        <th>Place</th>
                        <th>Study Name </th>
                        <th>Patients: Filled/Assigned </th>
                        <th>Name as per PAN </th>
                        <th>PAN Number </th>
                        <th>Honorarium Amount </th>
                        <th>Doctor Final Submitted Date Time</th>
                        <th>Division Verified Date Time</th>
                        <th>Compliance Verified Date Time</th>
                        <th>Contract Generated Date and Time</th>
                        <th>Batch No</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>

                <tbody>
            </table>
        </div>

    </div>

</div>

</div>






@include('division.layout.footer')
@include('division.modals')


<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.js"></script>
<script src="https://cdn.datatables.net/fixedheader/4.0.1/js/fixedHeader.dataTables.js"></script>




<script>

function setFilter() {
        $('#datatable').DataTable().ajax.reload();
    }

    function resetFilter() {
        $("#activity_status_filter").val('').select2();

        $('#datatable').DataTable().ajax.reload();
    }

    $(function() {
        var columns = [
            // {
            //     data: 'checkbox',
            //     // orderable: false,
            //     searchable: false
            // },
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false,
                orderable: false
            },
            {
                data: 'dr_name',
                name: 'dr_name',
                searchable: false
            },
            {
                data: 'doctor_central_code',
                name: 'doctor_central_code',
            },
            {
                data: 'field_central_code',
                name: 'field_central_code',
            },

            {
                data: 'place',
                name: 'place'
            },
            {
                data: 'study_name',
                name: 'study_name'
            },
            {
                data: 'patient_count',
                name: 'patient_count'
                // searchable: false
            },
            {
                data: 'pan_name',
                name: 'pan_name',
                searchable: false,
                orderable: false
            },
            {
                data: 'pan_no',
                name: 'pan_no',
                searchable: false,
                orderable: false
            },
            {
                data: 'doctor_amount',
                name: 'doctor_amount',
                searchable: false
            },
            {
                data: 'doctor_final_submitted_at',
                searchable: false
            },
            {
                data: 'division_contract_approved_at',
                searchable: false
            },
            {
                data: 'complaince_approved_at',
                searchable: false
            },
            {
                data: 'created_at',
                name: 'created_at'
            },
            {
                data: 'sop_report_slot_no',
                name: 'sop_report_slot_no'
            },
            {
                data: 'activity_status',
                name: 'activity_status'
            },



        ];
        var columnDefs = [
            // {
            //     'targets': 0,
            //     'checkboxes': {
            //         'selectRow': true,
            //     }
            // }
        ];
        getdatatable("{{ route('division.generate.sop.paginate') }}", columns, columnDefs);
    });

    function getdatatable(url, columns, columnDefs) {

        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            bDestroy: true,
            order: [],
            fixedHeader: true,
            "scrollX": true,
            columns: columns,
            columnDefs: columnDefs,
            ajax: {
                method: 'post',
                url: url,
                data: function(d) {
                    d._token = "{{ csrf_token() }}",
                    d.activity_status_filter = $('#activity_status_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();
                    }
                });
            }
        });
    }
</script>
<script>
    function checkall() {
        var checkallvar =$('input[name="checkallname"]:checked').val();
        if (checkallvar == 'checked') {
                $('.dt-checkboxes').prop('checked', true);
                $('.actionBtn').show();
            } else {
                $('.dt-checkboxes').prop('checked', false);
                $('.actionBtn').hide();
            }
    }



    function generateBunch(id = '') {
        if (id == '') {
            id = $("[name='checkbox[]']:checked").map(function() {
                return $(this).val();
            }).get();
            // console.log(id.length);
            if (id.length == 0) {
                $.notify('Please select more than one from the list ', "error");
                return false;
            }
        }
        Swal.fire({
            title: 'Are you sure?',
            // text: "You Want to Approve ?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, generate it!'
        }).then((result) => {
            if (result.isConfirmed) {

                $.ajax({
                    url: "{{ route('division.generate.sop.bunch') }}",
                    type: 'POST',
                    data: {
                        id: id,
                        "_token": "{{ csrf_token() }}",
                    },
                    success: function(response) {
                        $('#checkall').prop('checked', false);
                        $('.actionBtn').hide();
                        $('#datatable').DataTable().ajax.reload();
                    },
                    error: function(data) {
                        $("#edit_btn").attr('disabled', false);
                        var errors = $.parseJSON(data.responseText);
                        $.notify("Required Fields are missing", "error");
                    }
                });
            }
        })
    }
</script>