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

<style>
    @media only screen and (max-width:680px) {
        .card-body {
            padding: 1.25rem 0.2rem !important;
        }
        .page-content {
            padding: calc(70px + 24px) calc(24px / 2) 30px calc(24px / 2);
        }
    }

    tr th,
    tr td {
        font-size: 14px;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <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 class="col-md-1">
                    <div class="page-title-right">
                        {{-- @if($data['users'] == 1) --}}
                            <a href="{{ route('user.add') }}" class="btn btn-primary px-4 form-control" id="add_Btn"><i class="bx bx-plus"></i>Add</a>
                        {{-- @else --}}
                            <a class="btn btn-primary px-4 form-control" onclick="userErrorMSG();" id="add_Btn_Error"><i class="bx bx-plus"></i>Add</a>
                        {{-- @endif --}}
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        <!-- start row -->
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Avatar</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Designation</th>
                                    <th>Username</th>
                                    <th>Email</th>
                                    <th>Mobile</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Action</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('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var ajaxURL = "{{ route('users.ajax') }}";
    var changeUserStatusURL = "{{ route('user.change.status') }}";
    var deleteUser = "{{ route('delete.user') }}";
    var csrfToken = $("[name=_token").val();

    $("#add_Btn, #add_Btn_Error").hide();

    $(document).ready(function(){
        setTimeout(function() {
            if("{{$data['users']}}" == 1){
                $("#add_Btn").show();
            }else{
                $("#add_Btn_Error").show();
            }            
        }, 400);
    });

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{ "bSortable": true, "aTargets": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }],
        "order": [[0, 'asc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 400;},
        "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": ajaxURL,
            "type": "POST",
            "data": {"_token": csrfToken,}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "avatar", "bSortable": false},
            {"mData": "first_name"},
            {"mData": "last_name"},
            {"mData": "designation"},
            {"mData": "username"},
            {"mData": "email"},
            {"mData": "mobile"},
            {"mData": "type"},
            {"mData": "status", "bSortable": false},
            {"mData": "action", "bSortable": false}
        ]
    });

    function userErrorMSG(){
        toastr["error"]("The user limit has been reached, and no more users can be added at this time. To accommodate additional users, you can purchase more units from the 'Purchase' tab");
    }

    function changeStatus(id) {
        var user_status = document.getElementById("user_status" + id);
       
        if (user_status.checked) {
            user_status = 1;
        } else {
            user_status = 0;
        }
       
        $.ajax({
            type: 'GET',
            url: changeUserStatusURL + "?id=" + id + "&user_status=" + user_status,
            success: function(resultData) {                

                $("#add_Btn, #add_Btn_Error").hide();

                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                }else{
                    toastr["error"](resultData['msg']);
                }
                // setTimeout(function() {
                    if(resultData['users'] == 1){
                        $("#add_Btn").show();
                    }else{
                        $("#add_Btn_Error").show();
                    }                    
                // }, 400);

                $('#datatable').DataTable().ajax.reload(null, false);
            }
        });
    }
    
    //- soft delete record
    function userDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteUser + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    $("#add_Btn, #add_Btn_Error").hide();
                    
                    toastr["success"](resultData['msg']);

                    if(resultData['users'] == 1){
                        $("#add_Btn").show();
                    }else{
                        $("#add_Btn_Error").show();
                    }   

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

        });
    }
</script>
@endsection