@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;
    }
    ::-webkit-scrollbar {
        width: 20px;
    }

    input#checkAll {
        float: left;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 6px 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(7) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 300px;
    }

    .complain tr td {
        padding: 5px 10px;
    }

    .complain-mn {
        align-items: center;

    }

    .complain-mn .select2-container {
        width: 116px !important;
        margin-left: 10px;
    }

    .complain-mn .select2-selection__rendered {
        line-height: 32px !important;
    }

    .complain-mn .select2-selection--single {
        height: 33px;
    }

    .complain .btn-primary {
        color: #2762e4 !important;
        background-color: #bcd4ff !important;
        border-color: #bcd4ff !important;
        padding-top: 3px;
        padding-bottom: 3px;
        font-weight: 500;
        font-size: 10px;

    }

    .complain span.badge.bg-warning {
        width: 63px;
    }
</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">
                        <div class="d-flex justify-content-between mb-3 complain-mn">

                            <div>
                                <label for="complain_status" class="form-label" style="margin:0px 15px 0 0; align-self: center;">Status
                                    <select class="form-control" name="complain_status" id="complain_status">
                                        <option value="-1">All</option>
                                        <option value="1">Pending</option>
                                        <option value="0">Inprogress</option>
                                        <option value="2">Completed</option>
                                    </select>
                            </div>

                            @php
                            $check_privileges = userPrivilegesReturn(64, 66);
                            @endphp
                            @if (($check_privileges == 1) || (Session::get('admin_type') == 0))
                            <div>
                                <button type="button" class="form-control btn-danger btm-sm" id="modalSendMail" data-bs-toggle="modal" data-bs-target="#composemodal">Delete</button>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="table-responsive">

                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element complain ">
                            <thead class="table-light">
                                <tr>
                                    <th> <INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" id="chk" class="checkAll" /></th>
                                    <th>Action</th>
                                    <th>Status</th>
                                    <th>Id</th>
                                    <th>Client Code</th>
                                    <th>Client name</th>
                                    <th>Complain Regarding </th>
                                    <th>Description</th>
                                    <th>Created at</th>
                                    <th>Updated at</th>

                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

                        @csrf
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- end row -->
</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->

<!-- end row -->
<!-- Modal -->
<div class="modal fade" id="composemodal" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content  px-5 py-4">
            <form method="post" id="formSendEmail" action="{{route('delete.complain')}}" novalidate enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="rows_selected" id="rows_selected" value="" />
                <h2 class="swal2-title text-center" id="swal2-title">Are you sure want to delete this?</h2>
                <div class="text-center pt-3">
                    <button type="button" class="swal2-confirm swal2-styled" id="btnsend" aria-label="" style="display: inline-block; background-color: rgb(82, 107, 223);">Yes, delete it! <i class="fab fa-telegram-plane ms-1"></i></button>
                    <button type="button" class="swal2-confirm swal2-styled" data-bs-dismiss="modal" aria-label="" style="display: inline-block; background-color: rgb(236, 103, 103);">No, cancel it!</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- end modal -->
<div class="modal fade" id="composemodal1" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content  px-5 py-4">
            <input type="hidden" name="rows_selected" id="rows_selected" value="" />
            <h2 class="swal2-title text-center" id="swal2-title">Please select at least one complain to delete. </h2>
            <div class="text-center pt-3">
                <!-- <button type="button" class="swal2-confirm swal2-styled" id="btnsend" aria-label="" style="display: inline-block; background-color: rgb(82, 107, 223);">Yes, delete it! <i class="fab fa-telegram-plane ms-1"></i></button> -->
                <button type="button" class="swal2-confirm swal2-styled" data-bs-dismiss="modal" id="selectone" aria-label="" style="display: inline-block; background-color: rgb(236, 103, 103);">Ok</button>
            </div>
        </div>
    </div>
</div>

@endsection('content')
@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 ajaxURLGetUsers = '{{route("reachassuree.admin.complain.ajax")}}';
    var ajaxDeactivecomplain = '{{route("deactive.complain")}}';
    var ajaxActivecomplain = '{{route("active.complain")}}';
    var ajaxmoveToCompleted = '{{route("move.to.completed.complain")}}';
    var ajaxdelete = "{{route('delete.complain')}}";



    $("#selectone").click(function() {
        $('#composemodal').modal('hide');
    });

    $("#btnsend").click(function() {
        if (rows_selected.length === 0) {
            $("#composemodal1").modal('show');

        } else {

            $("#btnsend").prop("disabled", true);
            $("#btnsend").html(
                '<i class="ri-arrow-right-s-line"></i> Processing...'
            );
            $.ajax({
                type: 'POST',
                data: $("#formSendEmail").serialize(),
                url: ajaxdelete,
                success: function(resultData) {

                    if (resultData['status'] == 1) {
                        $("#btnsend").prop("disabled", false);
                        $("#btnsend").html(
                            '<i class="ri-arrow-right-s-line"></i>   Yes, delete it!'
                        );
                        toastr['success'](resultData['msg']);
                        $("#composemodal").modal('hide');
                        $('#datatable').DataTable().ajax.reload(null, false);
                        $('input:checkbox').prop('checked', false);
                    } else {
                        toastr['error'](resultData['msg']);
                    }
                }
            });
            // }
        }

    });

    var csrfToken = $("[name=_token]").val();

    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": ajaxURLGetUsers,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "complain_status": function() {return $("#complain_status").val();},
            }
        },
        "aoColumns": [
            { "mData": "checkbox", },
            { "mData": "action","bSortable": false },
            { "mData": "status","bSortable": false },
            { "mData": "id" },
            { "mData": "client_code" },
            { "mData": "agent_name" },
            { "mData": "complain_regarding" },
            { "mData": "description" },
            { "mData": "created_at" },
            { "mData": "updated_at" },
        ],
        "drawCallback": function() {

            for (var i = 0; i < rows_selected.length; i++) {
                var ids = rows_selected[i];
                $("#" + ids).attr("checked", "checked");
            }

        }
    });
    //- deactivate user
    function deactiveComplain(customer_complain_id) {
        swal.fire({
            title: "Are you sure want to Move to Inprogress in RA-WEB?",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, Inprogress it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                deactive(customer_complain_id);
            }
        });
    }

    function deactive(customer_complain_id) {
        $.ajax({
            type: 'GET',
            url: ajaxDeactivecomplain + "?id=" + customer_complain_id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    var rows_selected = [];
    var arraycheck = [];
    //-multiple delete 
    function isCheckedComplain(customer_complain_id) {

        if (customer_complain_id == -1) {
            $('.checkBoxComplain').each(function() {

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

                $('#rows_selected').val(rows_selected);
            });
            $('.checkBoxComplain').change(function() {
                if ($('.checkBoxComplain:checked').length == $('.checkBoxComplain').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);
                }
            });

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

    //- activate user
    function activeComplain(customer_complain_id) {
        swal.fire({
            title: "Are you sure want to Move to Inprogress in RA-WEB ?",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, Inprogress it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                active(customer_complain_id);
            }
        });
    }

    function active(customer_complain_id) {
        $.ajax({
            type: 'GET',
            url: ajaxActivecomplain + "?id=" + customer_complain_id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function moveToCompleted(customer_complain_id) {
        swal.fire({
            title: "Are you sure want to Move to Completed in RA-WEB?",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, Completed!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                movetocompleted(customer_complain_id);
            }
        });
    }

    function movetocompleted(customer_complain_id) {
        $.ajax({
            type: 'GET',
            url: ajaxmoveToCompleted + "?id=" + customer_complain_id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
    //- show data according to policy status
    $("#complain_status").select2();
    $("#complain_status").change(function() {
        $('#datatable').DataTable().ajax.reload(null, false);
    });


    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;
                }
            }
            isCheckedComplain(-1);
        } else {
            for (var i = 0; i < checkboxes.length; i++) {

                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = false;

                }
            }
            isCheckedComplain(-2);
        }
    }
</script>

@endsection