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

<style>
    .badge-soft-success{
        color: #fff;
        background-color: #34c38f;
        width: 68.5px;
    }
    .badge-soft-danger {
        color: #ffffff;
        background-color: #f46a6a;
    }
    .table .table-light{
        border-color: #d7dade !important;
    }
    .scrollable-menu {
        height: auto;
        max-height: 500px;
        overflow-x: hidden;
    }
    .dropdown-checklist {
        padding: 0px 12px;
        line-height: 0px;
    }
    ::-webkit-scrollbar {
        width: 20px;
    }
    ::-webkit-scrollbar-track {
        background-color: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #C7C7C7;
        border-radius: 20px;
        border: 4px solid transparent;
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }
    .pos-middle {
        vertical-align: middle;
    }
    .custom-dropdown-toggle-top.show {
        top: 70% !important;
    }
    #datatable tbody td:nth-child(13),
    #datatable tbody td:nth-child(25) {
        white-space: normal;
        word-wrap: break-word;
    } 
    #datatable tbody td:nth-child(19),
    #datatable tbody td:nth-child(20),
    #datatable tbody td:nth-child(21) {
        white-space: normal;
        word-wrap: break-word;
        min-width: 200px;
    }
    .text-white{
        font-size: 14px;
    }
    #cards .card{
        margin-bottom: unset;
    }
    .head-lable-bg{
        background-color: #3e62ff;
    }
    .head-row-bg{
        background-color: #d4dcff;
        color: #000;
    }
    .member-lable-bg{
        background-color: #2d9dff;
    }
    .member-row-bg{
        background-color: #d0e9ff;
        color: #000;
    }
    @media (max-width: 1199px){
        .text-white{
            font-size: 13px;
        }
    }
    @media (max-width: 991px){
        .text-white{
            font-size: 11px;
        }
    }
    @media (max-width: 767px){
        .float-end{
            margin-bottom: 5px;
        }
    }
    @media only screen and (max-width:375px) {
        .card-body {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 1.25rem 0.8rem;
        }
    }    
    .modal-xxl {
        max-width: 1440px;
    }


</style>

<div class="page-content">
    <div class="container-fluid">

        {{-- @include('../reachassuree_agent_sub/master/comman/header') --}}

        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">
                <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="backbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
            </h4>
        </div>

        <div class="row" id="card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="row" id="cards">
                                <div class="col-md-3 col-sm-6 c mb-3">
                                    <div class="card text-center font-size-14 p-2" style="background-color: #f46a6a;">
                                        <h6 class="text-white mt-2">Total Group</h6>
                                        <h6 class="text-white" id="total_group"></h6>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 c mb-3">
                                    <div class="head-lable-bg card text-center font-size-14 p-2">
                                        <h6 class="text-white mt-2">Total Family Head</h6>
                                        <h6 class="text-white" id="total_family"></h6>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 c mb-3">
                                    <div class="member-lable-bg card text-center font-size-14 p-2">
                                        <h6 class="text-white mt-2">Total Member</h6>
                                        <h6 class="text-white" id="total_member"></h6>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 c mb-3">
                                    <div class="card text-center font-size-14 p-2" style="background-color: #6c6e72;">
                                        <h6 class="text-white mt-2">Total Firm</h6>
                                        <h6 class="text-white" id="total_firm"></h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 float-end">
                            <div class="float-end manageBox">

                                <button class="btn clearSearch tooltipMsg" onclick="return clearSearch();" type="button"><span class="mdi mdi-brush"></span><span class="tooltiptext">Clear Search Data</span></button>
                                <button class="btn openFullScreen tooltipMsg" onclick="return openFullScreen();" type="button"><span class="mdi mdi-arrow-expand-all"></span><span class="tooltiptext">Open Full Screen</span></button>
                                <button class="btn dropdown-toggle dropdownMenuButton1 tooltipMsg" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"><span class="mdi mdi-file-download-outline"></span><span class="tooltiptext">Download</span></button> 
                                <div class="dropdown-menu custom-dropdown-toggle-top" aria-labelledby="dropdownMenuButton1">
                                    <a href="#" class="dropdown-item" id="csv" style="width:150px;">Export CSV</a>
                                    <a href="#" class="dropdown-item" id="excel" style="width:150px;">Export Excel</a>
                                    <a href="#" class="dropdown-item" id="pdf" style="width:150px;">Export PDF</a>
                                    <button class="dropdown-item" id="print1" style="width:150px;"><del>Print</del></button>
                                </div>
                                
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap display nowrap w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>Action</th>
                                    <th>Transaction <br>Confirmation</th>
                                    <th>Status</th>
                                    <th>Id<br><input type="text" class="form-control" name="id" placeholder="Search" autocomplete="off" style="width: 50px; height: 25px"></th>
                                    <th class="text-center">App <br>Tracker</th>
                                    <th>Group<br><input type="text" class="form-control" name="group" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Full Name<br><input type="text" class="form-control" name="full_name" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Relation<br><input type="text" class="form-control" name="relation" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Gender<br><input type="text" class="form-control" name="gender" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>DOB<br><input type="text" class="form-control" name="dob" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Anniversary<br><input type="text" class="form-control" name="anniversary_date" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Mobile No.<br><input type="text" class="form-control" name="mobile_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Whatsapp No.<br><input type="text" class="form-control" name="whatsapp_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Email<br><input type="text" class="form-control" name="email" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Client Status<br><input type="text" class="form-control" name="client_status" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Marriage Status<br><input type="text" class="form-control" name="marriage_status" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Business<br><input type="text" class="form-control" name="business" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>City<br><input type="text" class="form-control" name="city" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Area<br><input type="text" class="form-control" name="area" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Address<br><input type="text" class="form-control" name="address1" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Address 2<br><input type="text" class="form-control" name="address2" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Join With Us<br><input type="text" class="form-control" name="join_with_us" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Pan No.<br><input type="text" class="form-control" name="pan_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Aadhar No.<br><input type="text" class="form-control" name="aadhaar_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Gst No.<br><input type="text" class="form-control" name="gst_number" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Reference<br><input type="text" class="form-control" name="reference_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Created By<br><input type="text" class="form-control" name="created_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Created date<br><input type="text" class="form-control" name="crated_at" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Modified By<br><input type="text" class="form-control" name="modify_by" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Modified date<br><input type="text" class="form-control" name="updated_at" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="queryModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <input type="hidden" name="client_id" id="client_id" value="">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Transaction Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="message-text" class="col-form-label">Raised Query:</label>
                        <textarea class="form-control" id="query" maxlength="250" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel Request</button>
                <button type="button" class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script type="text/javascript">
    var visibleColumns = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29];
    var changeClientStatusURL = "{{ route('change.client.status') }}";
    var ajaxURLGetClients = "{{ route('sub.clients.ajax') }}";
    var restoreClient = "{{ route('restore.client') }}";
    var policyList = "{{ route('policy.list') }}";
    var isDeleted = "{{ $data['is_deleted'] }}";
    var csrfToken = $("[name=_token").val();
    const selectedGeneralValues = [];
    const selectedLifeValues = [];
    const selectedInvestmentValues = [];

    $(document).ready(function() {
        $('input.toggle-vis').on('click', function(e) {
            var columnIndex = $(this).attr('data-column');
            var unHiddenValues = [2, 3, 5, 10];

            if (columnIndex === "-1") {
                var checked = $(this).prop('checked');

                if (!checked) {
                    table.columns().visible(false);

                    unHiddenValues.forEach(function(index) {
                        table.column(index).visible(true);
                    });

                    $('input.toggle-vis').not('[data-column="-1"]').prop('checked', false).prop('disabled', true);
                } else {
                    table.columns().visible(true);
                    $('input.toggle-vis').not('[data-column="-1"]').prop('disabled', false).prop('checked', true);
                }
            } else {
                var column = table.column(columnIndex);
                column.visible($(this).prop('checked'));

                var allUnchecked = true;

                $('input.toggle-vis').not('[data-column="-1"]').each(function() {
                    if ($(this).prop('checked')) {
                        allUnchecked = false;
                        return false;
                    }
                });

                if (allUnchecked) {
                    var allCheckbox = $('input.toggle-vis[data-column="-1"]');
                    allCheckbox.prop('checked', false).prop('disabled', true);
                    
                    var allColumn = table.column("-1");
                    allColumn.visible(false);
                } else {
                    var allCheckbox = $('input.toggle-vis[data-column="-1"]');
                    allCheckbox.prop('disabled', false);
                }
            }
        });
   
        $("#csv").on('click', function() {
            var table = $('#datatable').DataTable();
            table.button('.buttons-csv').trigger();
        });
    
        $("#excel").on('click', function() {
            var table = $('#datatable').DataTable();
            table.button('.buttons-excel').trigger();
        });
    
        $("#pdf").on('click', function() {
            var table = $('#datatable').DataTable();
            table.button('.buttons-pdf').trigger();
        });
    
        $("#print").on('click', function() {
            var table = $('#datatable').DataTable();
            table.button('.buttons-print').trigger();
        });
    });
    
    var table = $('#datatable').DataTable({
        buttons: [
            {extend: 'csvHtml5',exportOptions: {columns: ':visible', exportOptions: {columns: ':visible'}},title: 'Client Manage Report', exportOptions: {columns: visibleColumns}}, 
            {extend: 'excelHtml5',exportOptions: {columns: ':visible'},title: 'Client Manage Report', exportOptions: {columns: visibleColumns}}, 
            {extend: 'pdfHtml5',orientation: 'landscape',pageSize: 'A1',exportOptions: {columns: ':visible'},title: 'Client Manage Report', exportOptions: {columns: visibleColumns}}, 
            {extend: 'print',orientation: 'landscape',exportOptions: {columns: ':visible'},title: 'Client Manage Report', exportOptions: {columns: visibleColumns}}, 
        ],
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]}],
        "order": [[2, 'desc']],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "scrollY": function() {return $(window).height() - 300;},
        "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": ajaxURLGetClients,
            "type": "POST",
            "data": { "_token": csrfToken, "is_deleted": isDeleted }
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            if (aData['form_type'] == 0) {
                $(nRow).removeClass().addClass('head-row-bg');
            } else if(aData['form_type'] != 2) {
                $(nRow).removeClass().addClass('member-row-bg');
            }else{
                $(nRow).removeClass().addClass('table-light');
            }
            return nRow;
        },
        "aoColumns": [
            {"mData": "action", "bSortable": false},
            {"mData": "actions", "bSortable": false},
            {"mData": "status", "bSortable": false, "visible": false},
            {"mData": "id"},
            {"mData": "is_app_user", "visible": false},
            {"mData": "group"},
            {"mData": "full_name"},
            {"mData": "relation"},
            {"mData": "gender"},
            {"mData": "dob"},
            {"mData": "anniversary_date"},
            {"mData": "mobile_number"},
            {"mData": "whatsapp_number"},
            {"mData": "email"},
            {"mData": "client_status"},
            {"mData": "marriage_status"},
            {"mData": "business"},
            {"mData": "city"},
            {"mData": "area"},
            {"mData": "address1"},
            {"mData": "address2"},
            {"mData": "join_with_us"},
            {"mData": "pan_number"},
            {"mData": "aadhaar_number"},
            {"mData": "gst_number"},
            {"mData": "reference_by"},
            {"mData": "created_by", "visible": false},
            {"mData": "created_at", "visible": false},
            {"mData": "modified_by", "visible": false},
            {"mData": "updated_at", "visible": false},
        ]
    });

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

        if(responseData['recordsTotal'] == 0){
            $('#dropdownMenuButton1').hide();
        }
        
        if(responseData['recordsFiltered'] == 0){
            function strikeThroughElement(id) {
                var text = $("#" + id).text();
                $("#" + id).html("<del>" + text + "</del>").css({'cursor': 'no-drop'});
            }

            strikeThroughElement("pdf");
            strikeThroughElement("csv");
            strikeThroughElement("excel");

        }else{
            function strikeThroughElement(id) {
                var text = $("#" + id).text();
                $("#" + id).html(text ).css({'cursor': 'pointer'});
            }

            strikeThroughElement("pdf");
            strikeThroughElement("csv");
            strikeThroughElement("excel");
        }

        $("#total_family").html(responseData['client_count'].total_family);
        $("#total_member").html(responseData['client_count'].total_member);
        $("#total_firm").html(responseData['client_count'].total_firm);
        $("#total_group").html(responseData['client_count'].total_group);
    });

    function openFullScreen() {
        var element = document.getElementById("card");

        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            /* Safari */
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            /* IE11 */
            element.msRequestFullscreen();
        }
    }

    var inputNames = [
        'actions', 'id', 'app_tracker', 'group', 'full_name', 'relation', 'gender', 'dob', 'anniversary_date', 'mobile_number', 'whatsapp_number', 'email', 'client_status', 'marriage_status', 'business', 
        'city', 'area', 'address1', 'address2', 'join_with_us', 'pan_number', 'aadhaar_number', 'gst_number', 'reference_by', 'created_by', 'crated_at', 'modify_by', 'updated_at'
    ];

    var namesToSkip = ['actions', 'app_tracker', 'created_by', 'crated_at', 'modify_by', 'updated_at'];

    function clearSearch() {
        for (let index = 0; index <= 28; index++) {
            const column = table.column(index);
            const initialVisibility = column.settings()[0].bVisible;
            if (initialVisibility) {
                column.visible(true);
            }
        }

        $('.custom-select option:first').prop('selected', true);
        $('.toggle-vis').prop('checked', true);

        for (var i = 0; i < inputNames.length; i++) {
            if (namesToSkip.indexOf(inputNames[i]) === -1) {
                $('[name="' + inputNames[i] + '"]').val('');
            }
        }

        table.search('').columns().search('').draw();
    }

    inputNames.forEach(function(id, index) {
        var currentInput = $('input[name="' + id + '"]');
        if (namesToSkip.indexOf(id) === -1) {
            currentInput.click(function(event) {
                event.stopPropagation();
            });

            currentInput.on('keyup input', function() {
                table.columns(index + 3).search(this.value).draw();
            });
        }
    });

    function handleConfirmProcess(recordID) {
        Swal.fire({
            text: "Are you sure confirm this transaction?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, Confirm it!",
            cancelButtonText: "Cancel Request",
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: "Confirm!",
                    text: "Your request has been Confirmed.",
                    icon: "success"
                });

                confirmAjax(recordID, "confirm");
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                confirmAjax(recordID, "cancel");
            }

            table.search('').columns().search('').draw();
        });
    }

    function confirmAjax(id, type) {
        var confirmFormData = {
            client_id: id,
            action: type,
            _token: $('[name="_token"]').val()
        };

        $.ajax({
            type: 'POST',
            url: "{{ route('confirm.client.transaction') }}",
            data: confirmFormData,
        });
    }

    function handleQueryProcess(recordID) {

        $('#client_id').val(recordID);
        var getClientQuery = "{{ route('get.client.query') }}";

        $.ajax({
            type: 'GET',
            url: getClientQuery + "?id=" + recordID,
            success: function(response) {
                if(response['data']['tr_confir'] == 1){
                    $('#query').val('');
                    $('#query').val(response['data']['query']);
                }
            }
        });
    }

    $('#queryModal .btn-primary').click(function(){

        var queryTextareaValue = $('#query').val();
        if (queryTextareaValue === '') {
            toastr["error"]("Please enter a query before confirming.");
            event.preventDefault();
        } else {
            $('#queryModal').modal('hide');
            var raisedClientQuery = "{{ route('raised.client.query') }}";
    
            var formData = {
                client_id: $('#client_id').val(),
                query: $('#query').val(),
                action: $(this).hasClass('btn-secondary') ? 'cancel' : 'confirm',
                _token: $('[name="_token"]').val()
            };
    
            $.ajax({
                type: 'POST',
                url: raisedClientQuery,
                data: formData,
            });
    
            $('#query').val('');
    
            table.search('').columns().search('').draw();
        }

    });

    $('#queryModal .btn-secondary').click(function(){

        $('#queryModal').modal('hide');

        var queryTextareaValue = $('#query').val();
        var raisedClientQuery = "{{ route('raised.client.query') }}";
        var formData = {
            client_id: $('#client_id').val(),
            query: $('#query').val(),
            action: $(this).hasClass('btn-secondary') ? 'cancel' : 'confirm',
            _token: $('[name="_token"]').val()
        };

        $.ajax({
            type: 'POST',
            url: raisedClientQuery,
            data: formData,
            success: function(response) {
            }
        });
        
        table.search('').columns().search('').draw();
        $('#query').val('');
    });
</script>
@endsection