@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .row{
        align-items: center;
    }
    .dataTables_scrollBody {
        position: relative;
        overflow: auto;
        width: 100%;
        max-height: 496px;
        height: 413px !important;
    }
    .scrollable-menu {
        height: auto;
        max-height: 400px;
        overflow-x: hidden;
    }

    ::-webkit-scrollbar {
        width: 16px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 4px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    #datatable tbody tr td:nth-child(4) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 100px;
    }

    .pos-middle {
        vertical-align: middle;
    }

    .boderWidth {
        border-bottom-width: 0 !important;
    }

    @media only screen and (max-width: 575px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }

    #datatable tbody tr td:nth-child(4),
    #datatable tbody tr td:nth-child(5),
    #datatable tbody tr td:nth-child(6) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 300px;
    }

    .pdf-button {
        display: flex;
        align-items: center;
    }

    .client-report-list tr td {
        padding: 5px 10px;
    }

    .client-list {
        margin-top: 25px;
        margin-left: -34px;
    }
</style>


<div class="page-content client-tr">
    <div class="container-fluid">
        <!-- start page title -->
        @include('../reachassuree_admin/comman/header')
        <!-- end page title -->

        <!-- start row -->
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="row pdf-button">
                        <div class="col-md-3">
                            <div class="mb-3">
                                <input type="hidden" name="rows_selected" id="rows_selected" value=""/>
                                <label for="any_serarch" class="form-label">Search Client</label>
                                <input type="text" class="form-control" name="any_serarch" id="any_search" placeholder="Search Client" value="" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="date_type" class="form-label">Select date type</label>
                                <select class="form-control" name="date_type" id="date_type">
                                    <option value="Transaction Date">Transaction Date</option>
                                    <option value="Birth Date">Birth Date</option>
                                    <option value="Subscription Due Date">Subscription Due Date</option>
                                    <option value="Payment Date">Payment Date</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="start_date" class="form-label">Start Date</label>
                                <input type="text" class="form-control" name="start_date" id="start_date" placeholder="Start date" value="" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label for="end_date" class="form-label">End Date</label>
                                <input type="text" class="form-control" name="end_date" id="end_date" placeholder="End date" value="" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="mb-3">
                                <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <button type="button" onclick="clearFilterFields();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                            </div>
                        </div>
                       
                        @php
                            $check_privileges = userPrivilegesReturn(84,86);
                        @endphp

                        @if (($check_privileges == 1) || (Session::get('admin_type') == 0))
                            <div class="col-md-1">
                                <div class="mb-3">
                                    <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    <button class="btn btn-secondary client-list" onclick="return pdf();" title="Download PDF" type="button"><span class="mdi mdi-download"></span></button>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element client-report-list ">
                            <thead class="table-light">
                                <tr>
                                    <th> <INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" id="chk" class="checkAll" /></th>
                                    <th>Id</th>
                                    <th>Client Code</th>
                                    <th>Client Name</th>
                                    <th>Firm Name</th>
                                    <th>E-mail</th>
                                    <th>Mobile</th>
                                    <th>Pincode</th>
                                    <th>Client Report</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
    <!-- container-fluid -->
</div>
<!-- End Page-content -->

@endsection

@section('custom-scripts')
<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var ajaxURLClientReport = '{{route("client.report.ajax")}}';
    var downloadClientReportPdf = "{{ route('client.report.pdf') }}";
    var csrfToken = $("[name=_token]").val();
    var currentDate = new Date();

    $("#any_search").keyup(function() {
        $('#datatable').DataTable().ajax.reload(null, false);
    });

    // The "to" date should always be greater than the "from" date.   
    $("#start_date").datepicker({
        format: "dd-mm-yyyy",
        endDate: currentDate,
    }).on('changeDate', function() {
        $('.datepicker').hide();
    });

    $("#start_date").on('change', function() {
        var startDate = $(this).val();
        var endDate = $('#end_date').val();

        if (startDate >= endDate) {
            $("#end_date").datepicker("destroy").val("");
        }

        $("#end_date").attr("disabled", !startDate).datepicker("destroy").datepicker({
            format: "dd-mm-yyyy",
            startDate: startDate,
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });
    });

    $("#date_type, #start_date, #end_date").change(function() {
        $('#datatable').DataTable().ajax.reload(null, false);
    });

    //- clear filter filter fields
    function clearFilterFields() {
        $("#start_date, #end_date").val('');
        $('#datatable').DataTable().ajax.reload(null, false);
    }

    $("#date_type").select2();

    // datatable client list
    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": [0]}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 320;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLClientReport,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "date_type": function() {return $("#date_type").val();},
                "start_date": function() {return $("#start_date").val();},
                "end_date": function() {return $("#end_date").val();},
                "any_search": function() {return $("#any_search").val();}
            }
        },
        "aoColumns": [
            {"mData": "checkbox"},
            {"mData": "id"},
            {"mData": "agent_code"},
            {"mData": "name"},
            {"mData": "firm_name"},
            {"mData": "email"},
            {"mData": "mobile_number"},
            {"mData": "pincode"},
            {"mData": "client_report_view","bSortable": false},
        ],
        "drawCallback": function() {
            for (var i = 0; i < rows_selected.length; i++) {
                var ids = rows_selected[i];
                // $("#4").attr("checked", "checked");
                $("#" + ids).attr("checked", "checked");
            }
        }
    });

    // multiple client selection     
    var rows_selected = [];
    var arraycheck = [];

    //-multiple delete 
    function isCheckedClient(client_id) {
        //-1 indicates all clients checked
        if (client_id == -1) {
            $('.checkBoxClient').each(function() {
                rows_selected.push(this.id);
                $('#rows_selected').val(rows_selected);
            });

            $('#chk').change(function() {
                $('.checkBoxClient').prop('checked', this.checked);
                $('#rows_selected').val(rows_selected);
            });

            $('.checkBoxClient').change(function() {
                if ($('.checkBoxClient:checked').length == $('.checkBoxClient').length) {
                    $('#chk').prop('checked', true);
                    $('#rows_selected').val(rows_selected);
                } else {
                    $('#chk').prop('checked', false);
                    let checkbox = document.getElementById(this.id);
                    arraycheck.push(this.id);
                    for (var i = 0; i < rows_selected.length; i++) {
                        if (rows_selected[i] === this.id) {
                            var spliced = rows_selected.splice(i, 1);
                        }
                    }
                    $('#rows_selected').val(rows_selected);
                }
            });
            //-2 indicates all clients Unchecked
        } else if (client_id == -2) {
            rows_selected = [];
            $('#rows_selected').val(rows_selected);
        } else {
            var checkBox = document.getElementById(client_id);

            if (checkBox.checked) {
                rows_selected.push(client_id);
            } else {
                for (var i = 0; i < rows_selected.length; i++) {
                    if (rows_selected[i] === client_id) {
                        var spliced = rows_selected.splice(i, 1);
                    }
                }
            }
            $('#rows_selected').val(rows_selected);
        }
    }

    function checkAll(ele) {
        var checkboxes = document.getElementsByTagName('input');

        if (ele.checked) {
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = true;
                }
            }
            isCheckedClient(-1);
        } else {
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = false;
                }
            }
            isCheckedClient(-2);
        }
    }

    // generate pdf file for client list
    function pdf() {
        var objectS = table.ajax.json().data;
        var ids = [];

        for (var i = 0; i < objectS.length; i++) {
            ids.push(objectS[i]['id']);
        }

        if (objectS.length != 0) {
            $.ajax({
                type: 'POST',
                url: downloadClientReportPdf,
                "data": {
                    "_token": csrfToken,
                    "ids": objectS,
                    "date_type": function() {return $("#date_type").val();},
                    "start_date": function() {return $("#start_date").val();},
                    "end_date": function() {return $("#end_date").val();},
                    "any_search": function() {return $("#any_search").val();},
                    "rows_selected": function() {return $("#rows_selected").val();}
                },
                beforeSend: function() {
                    $('#preloader').show();
                    $('#preloader').css('background-color', '#ffffff69');
                    $('#status').show();
                },
                success: function(resultData) {
                    $('#status').hide();
                    $('#preloader').hide();
                    path = resultData['path'];
                    $("#rows_selected").val("");
                    window.open(path, '_blank');
                    $('input:checkbox').prop('checked', false);
                }
            });
        } else {
            toastr["error"]("No data available in table");
        }
    }
</script>

@endsection