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

<style>
    .row{
        align-items: center;
    }
    .scrollable-menu {
        height: auto;
        max-height: 800px;
        overflow-x: hidden;
    }

    .dropdown-checklist{
        padding: 0px 12px;
        line-height: 0px; 
    }
    .dropdown-checklist input{
        margin-left: 3px;
    }

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

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

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

</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <h4 class="mb-sm-0 font-size-18">{{$data['title']}}</h4>        
        <!-- end page title -->

        <!-- start row -->
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <br>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-hover table-striped ScrollStyle">
                            <thead class="table-light">
                                <tr>
                                    <th>Id</th>
                                    <th>Agent </th>
                                    <th>Plan Name</th>
                                    <th> Plan Amt </th>
                                    <th> Sgst</th>
                                    <th>Cgst</th>
                                    <th>Igst</th>
                                    <th>Period Days</th>
                                    <th>Payable Amt</th>
                                    <th>status</th>
                                    <th>Created At</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') }}"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    
<script type="text/javascript">

    var ajaxURLGetUsers='{{route("payment.ajax")}}';
    var csrfToken=$("[name=_token").val();

    var table=$('#datatable').DataTable({
    "aoColumnDefs": [{ "bSortable": false, "aTargets": [5] }],
    "order":[[ 0, 'desc' ]],
    "processing": true,
    "serverSide": true,
    "scrollX": true,
    "scrollY": function() {return $(window).height() - 320;},
    "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,}
    },
    "aoColumns" : [
        {"mData" : "id"},
        {"mData" : "agent_id"},
        {"mData" : "subscription_plan_id"},
        {"mData" :  "subscription_plan_amount"},
        {"mData" :  "sgst"},
        {"mData" : "cgst"},
        {"mData" : "igst"},
        {"mData" : "subscription_period_days"},
        {"mData" : "payable_amount"},
        {"mData" : "status"},
        {"mData" : "created_at"},
    ]
    });

</script>

@endsection