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

<style>
    .dataTables_scrollBody {
                height: 279px !important;
    }
    .scrollable-menu {
        height: auto;
        max-height: 600px;
        overflow-x: hidden;
    }

    .dropdown-checklist {
        padding: 0px 12px;
        line-height: 0px;
    }

    .dropdown-checklist input {
        margin-left: 3px;
    }

    ::-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;
    }

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

    #datatable tbody td:nth-child(35),
    #datatable tbody td:nth-child(36) {
        white-space: normal;
        word-wrap: break-word;
    }

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

    .main-content .content {
        margin-top: 0px !important;
    }

    .customerm {
        margin-left: 2%;
    }

    .client-tr .content table.table-bordered th,
    td {
        margin: 0px !important;
        padding: 6px 10px !important;
    }

    .client-tr .form-check {
        padding-left: 35px;
    }

    .client-report {
        margin-top: 27px;
    }
</style>

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

        <div class="row" id="card">
            <div class="card p-1">
                <div class="card-body">
                    <div class="row">
                        <div class="row customerm">
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label">AgentCode</label>
                                    <input type="text" class="form-control" id="agent_code" name="agent_code" placeholder="Search">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label">E-mail</label><input type="text" class="form-control" id="email" name="email" placeholder="Search">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label">Mobile No</label><input type="text" class="form-control" id="mobileno" name="mobileno" placeholder="Search"></th>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    <button type="button" onclick="clearField();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                                </div>
                            </div>

                            @php
                                $check_privileges = userPrivilegesReturn(81,83);
                            @endphp

                            @if (($check_privileges == 1) || (Session::get('admin_type') == 0))
                                <div class="col-md-2">
                                    <div class="client-report">
                                        <button class="btn btn-secondary" onclick="return downloadPdf();" title="Download PDF" type="button"><span class="mdi mdi-download"></span></button>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="row">
                            <div class="card">
                                <div class="row ">
                                    <div class="col-md-12 ">
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <div class="col-md-12">
                                                    <label for="firm_client_join_with_us" class="form-label">Reports*</label>
                                                    <div class="form-check">
                                                        <input type="hidden" name="substrans" id="substrans" value=0>
                                                        <input type="hidden" name="clientInf" id="clientInf" value=0>
                                                        <input type="hidden" name="trsactionInf" id="trsactionInf" value=0>

                                                        <input class="form-check-inline" type="checkbox" onchange="allCheckboxes()" name="report" id="report1" value="1">
                                                        <label class="form-check-label me-5" for="report1">All</label>

                                                        <input class="form-check-inline" type="checkbox" onchange="clientDetatilsCheckbox()" name="report" id="report2" value="2">
                                                        <label class="form-check-label me-5" for="report2">Client Details</label>

                                                        <input class="form-check-inline" type="checkbox" onchange="subscriptionTransactionCheckbox()" name="report" id="report3" value="3">
                                                        <label class="form-check-label me-5" for="report3">Subscription Transaction Details</label>

                                                        <input class="form-check-inline" type="checkbox" onchange="contactTransactionDetailsCheckbox()" name="report" id="report4" value="4">
                                                        <label class="form-check-label me-5" for="report4"> Web Contact Transaction</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="contentall" class="content">
                                    <div id="content1" class="content">
                                        <table class="table table-bordered border border-3">
                                            <h4 class="mt-1"># Client General Report</h4>
                                            <tbody>
                                                <tr>
                                                    <th>Client No.</th>
                                                    <td id="client_code"></td>
                                                    <th>Firm Name</th>
                                                    <td colspan="2" id="firm_name"></td>
                                                    <th>Adhar No.</th>
                                                    <td id="aadhar_no"></td>
                                                    <th>Gst No</th>
                                                    <td id="gst_number" colspan="7"></td>
                                                </tr>
                                                <tr>
                                                    <th>Mobile No.</th>
                                                    <td id="mobile_no"></td>
                                                    <th> Client Name</th>
                                                    <td id="client_name" colspan="2"></td>
                                                    <th>PAN</th>
                                                    <td id="pan_card"></td>
                                                    <th>User name</th>
                                                    <td id="username"></td>
                                                </tr>
                                                <tr>
                                                    <th>Whatsapp No.</th>
                                                    <td id="whatsapp_number"></td>
                                                    <th>Email</th>
                                                    <td id="agent_email" colspan="2"></td>
                                                    <th>City</th>
                                                    <td id="city"></td>
                                                    <th>Subdomain</th>
                                                    <td id="sub_domain"></td>
                                                </tr>
                                                <tr>
                                                    <th>Birth Date</th>
                                                    <td id="dob">
                                                    </td>
                                                    <th>Website</th>
                                                    <td id="website" colspan="2"></td>
                                                    <th>State</th>
                                                    <td id="state"></td>
                                                    <th>Country</th>
                                                    <td id="country"></td>
                                                </tr>
                                                <tr>
                                                    <th>Pincode</th>
                                                    <td id="pincode"></td>
                                                    <th>Address</th>
                                                    <td id="address" colspan="4"></td>
                                                    <th>1st.Tr.Date</th>
                                                    <td id="st_tr_date"></td>
                                                </tr>
                                            </tbody>

                                        </table>
                                    </div>

                                    <div id="content2" class="content">
                                        <div class="table-responsive">
                                            <table id="datatable" class="table align-middle table-nowrap table-hover table-striped ScrollStyle">
                                                <thead class="table-light">
                                                    <h4># Subscription Transaction</h4>
                                                    <tr>
                                                        <th>Id</th>
                                                        <th>Transaction Date</th>
                                                        <th>Product Name</th>
                                                        <th>Plan Name</th>
                                                        <th> Mode</th>
                                                        <th> Payment Date</th>
                                                        <th> Sub.Due Date</th>
                                                        <th> Invoice No</th>
                                                        <th> Credit Note No</th>
                                                        <th> Subscription Value</th>
                                                        <th> Gst Amount</th>
                                                        <th> Adjust Amount</th>
                                                        <th> Payable Amount</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                            @csrf
                                        </div>
                                    </div>

                                    <div id="content3" class="content">
                                        <!-- <div>
                                            <h4># Contact Transaction Details</h4>
                                            <span>Coming Soon</span>
                                        </div> -->
                                        <div class="table-responsive">
                                            <table id="datatable-contact" class="table align-middle table-nowrap  w-100 table-hover table-striped ScrollStyle">
                                                <thead class="table-light">
                                                    <h4># Web Contact Transaction</h4>
                                                    <tr>
                                                        <th>Id</th>
                                                        <th>Transaction Date</th>
                                                        <th>Transaction Type</th>
                                                        <th>MobileNo/Website/E-mail</th>
                                                        <th>Message Contain</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                            @csrf
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Page-content -->

@endsection

@section('custom-scripts')
<script type="text/javascript">
    var ajaxReport = "{{route('report.ajax')}}";
    var downloadReportPdf = "{{ route('download.report.pdf') }}";
    var ajaxContact = "{{route('contactus.report.ajax')}}";
    var csrfToken = $("[name=_token").val();

    $(document).ready(function() {
        $('#datatable, #datatable-contact').DataTable().ajax.reload(null, false);
    });

    $("#agent_code").keyup(function() {
        $("#report1").attr("checked", "checked");
        $('#datatable, #datatable-contact').DataTable().ajax.reload(null, false);

        if ($("#agent_code").val() == "") {
            $("#firm_name, #client_name, #address, #pincode, #mobile_no, #whatsapp_number, #email").html('');

            $("#report1").removeAttr("checked");
        }

        $('#datatable, #datatable-contact').DataTable().draw();
    });

    $("#email").keyup(function() {
        $("#report1").attr("checked", "checked");
        $('#datatable, #datatable-contact').DataTable().ajax.reload(null, false);

        if ($("#email").val() == "") {
            $("#report1, #report2, #report3").removeAttr("checked");

            $("#firm_name, #client_name, #address, #pincode, #mobile_no, #whatsapp_number, #email").html('');
        }

        $('#datatable, #datatable-contact').DataTable().draw();
    });

    $("#mobileno").keyup(function() {
        $("#report1").attr("checked", "checked");
        $('#datatable, #datatable-contact').DataTable().ajax.reload(null, false);

        if ($("#mobileno").val() == "") {
            $("#report1, #report2, #report3").removeAttr("checked");

            $("#firm_name, #client_name, #address, #pincode, #mobile_no, #whatsapp_number, #email").html('');
        }

        $('#datatable, #datatable-contact').DataTable().draw();
    });

    function allCheckboxes() {
        var content = document.getElementById('content1');
        var content1 = document.getElementById('content2');
        var content2 = document.getElementById('content3');
        var allCheckbox = document.getElementById("report1");
        var checkbox1 = document.getElementById("report2");
        var checkbox2 = document.getElementById("report3");
        var checkbox3 = document.getElementById("report4");

        if (allCheckbox.checked) {
            checkbox1.checked = false;
            checkbox2.checked = false;
            checkbox3.checked = false;
            
            content.style.display = 'block'; // Show the content
            content1.style.display = 'block'; // Show the content
            content2.style.display = 'block'; // Show the content
            
            $("#clientInf, #substrans, #trsactionInf").val(0);
        } else {
            content.style.display = 'none'; // Hide the content
            content1.style.display = 'none'; // Hide the content
            content3.style.display = 'none'; // Show the content

            $("#clientInf, #substrans, #trsactionInf").val(1);
        }
    }

    function clientDetatilsCheckbox() {
        var content = document.getElementById('content1');
        var content1 = document.getElementById('content2');
        var content2 = document.getElementById('content3');
        var allCheckbox = document.getElementById("report1");
        var checkbox1 = document.getElementById("report2");
        var checkbox2 = document.getElementById("report3");
        var checkbox3 = document.getElementById("report4");

        if (checkbox1.checked) {
            allCheckbox.checked = false;
            checkbox2.checked = false;
            checkbox3.checked = false;
            
            content.style.display = 'block'; // Show the content
            content2.style.display = 'none'; // Hide the content
            content1.style.display = 'none'; // Hide the content
            
            $("#clientInf").val(0);
            $("#substrans, #trsactionInf").val(1);
        } else {
            allCheckbox.checked = true;

            $("#clientInf, #substrans, #trsactionInf").val(0);
        }
    }

    function subscriptionTransactionCheckbox() {
        var content = document.getElementById('content1');
        var content1 = document.getElementById('content2');
        var content2 = document.getElementById('content3');
        var allCheckbox = document.getElementById("report1");
        var checkbox1 = document.getElementById("report2");
        var checkbox2 = document.getElementById("report3");
        var checkbox3 = document.getElementById("report4");

        if (checkbox2.checked) {
            allCheckbox.checked = false;
            checkbox1.checked = false;
            checkbox3.checked = false;
            
            content.style.display = 'block'; // Show the content
            content1.style.display = 'block'; // Hide the content
            content2.style.display = 'none'; // Hide the content
            
            $("#clientInf, #substrans").val(0);
            $("#trsactionInf").val(1);
        } else {
            allCheckbox.checked = true;
            $("#clientInf, #substrans").val(1);
            $("#trsactionInf").val(0);
        }
    }

    function contactTransactionDetailsCheckbox() {
        var content = document.getElementById('content1');
        var content1 = document.getElementById('content2');
        var content2 = document.getElementById('content3');
        var allCheckbox = document.getElementById("report1");
        var checkbox1 = document.getElementById("report2");
        var checkbox2 = document.getElementById("report3");
        var checkbox3 = document.getElementById("report4");

        if (checkbox3.checked) {
            allCheckbox.checked = false;
            checkbox1.checked = false;
            checkbox2.checked = false;
            
            content.style.display = 'block'; // Show the content
            content1.style.display = 'none'; // Hide the content
            content2.style.display = 'block'; // Hide the content
            
            $("#clientInf, #trsactionInf").val(0);
            $("#substrans").val(1);
        } else {
            allCheckbox.checked = true;
            $("#clientInf, #trsactionInf").val(1);
            $("#substrans").val(0);
        }
    }

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
        "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": ajaxReport,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "agent_code": function() {return $("#agent_code").val()},
                "email": function() {return $("#email").val()},
                "mobileno": function() {return $("#mobileno").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "created_at"},
            {"mData": "product_name"},
            {"mData": "plan_name"},
            {"mData": "mode"},
            {"mData": "payment_date"},
            {"mData": "expiry_date"},
            {"mData": "invoice_no"},
            {"mData": "credit_note_no"},
            {"mData": "item_price_total"},
            {"mData": "gst_amount"},
            {"mData": "adjust_amount"},
            {"mData": "payable_amount"},
        ]
    });

    table.on('xhr', function() {
        var responseData = table.ajax.json();

        if (responseData.totalAmounts.length === 0 || responseData.recordsTotal === 0) {
            $("#firm_name, #client_name, #address, #client_code, #username, #sub_domain, #pincode, #mobile_no, #whatsapp_number, #agent_email, #gender_name, #gst_number, #dob, #aadhar_no, #pan_card, #website, #city, #state, #country, #st_tr_date").html('');

            $("#report1").removeAttr("checked");
        } else {
            $("#firm_name").html(responseData['totalAmounts'].firm_name);
            $("#client_name").html(responseData['totalAmounts'].client_name);
            $("#address").html(responseData['totalAmounts'].address);
            $("#client_code").html(responseData['totalAmounts'].client_code);
            $("#username").html(responseData['totalAmounts'].username);
            $("#sub_domain").html(responseData['totalAmounts'].sub_domain);
            $("#pincode").html(responseData['totalAmounts'].pincode);
            $("#mobile_no").html(responseData['totalAmounts'].mobile_no);
            $("#whatsapp_number").html(responseData['totalAmounts'].whatsapp_number);
            $("#agent_email").html(responseData['totalAmounts'].email);
            $("#gender_name").html(responseData['totalAmounts'].gender_name);
            $("#gst_number").html(responseData['totalAmounts'].gst_number);
            $("#dob").html(responseData['totalAmounts'].dob);
            $("#aadhar_no").html(responseData['totalAmounts'].aadhar_no);
            $("#pan_card").html(responseData['totalAmounts'].pan_card);
            $("#website").html(responseData['totalAmounts'].website);
            $("#city").html(responseData['totalAmounts'].city);
            $("#state").html(responseData['totalAmounts'].state);
            $("#country").html(responseData['totalAmounts'].country);
            $("#st_tr_date").html(responseData['totalAmounts'].st_tr_date);
        }
    });

    function downloadPdf() {
        //var objectS = table.ajax.json().data;
        var objectS = table.ajax.json().subscriptionalldata;
//        var objectSTransaction = table1.ajax.json().data;
        var objectSTransaction = table1.ajax.json().alldata;

        var clientInformation = table.ajax.json().totalAmounts;
        var transactionInformation = table1.ajax.json();

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

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

        if (objectS.length != 0 || objectSTransaction.length != 0) {
            $.ajax({
                type: 'POST',
                url: downloadReportPdf,
                "data": {
                    "_token": csrfToken,
                    "ids": objectS,
                    "transaction_ids": objectSTransaction,
                    "clientInformation": clientInformation,
                    "transactionInformation": transactionInformation,
                    "agent_code": function() {return $("#agent_code").val()},
                    "clientinfo": function() {return $("#clientInf").val()},
                    "substrans": function() {return $("#substrans").val()},
                    "trsactionInf": function() {return $("#trsactionInf").val()},
                },
                beforeSend: function() {
                    $('#preloader').show();
                    $('#preloader').css('background-color', '#ffffff69');
                    $('#status').show();
                },
                success: function(resultData) {
                    $('#status').hide();
                    $('#preloader').hide();

                    path = resultData['path'];
                    window.open(path, '_blank');
                }
            });
        } else {
            toastr["error"]("Enter agent code, email, or mobile number ");
        }
    }
    
    //- clear filter filter fields
    function clearField() {
        $("#agent_code, #email, #mobileno").val('');

        $('#datatable, #datatable-contact').DataTable().draw();
        
        $("#report1").removeAttr("checked");
    }

    var table1 = $('#datatable-contact').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
        "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": ajaxContact,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "agent_code": function() {return $("#agent_code").val()},
                "email": function() {return $("#email").val()},
                "mobileno": function() {return $("#mobileno").val()},
            }
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "created_at"},
            {"mData": "transactin_type"},
            {"mData": "contact"},
            {"mData": "yourmessage"},
        ]
    });
</script>
@endsection