@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;
    }
    .dropdown-checklist {
        padding: 0px 12px;
        line-height: 0px;
    }

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

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

    .scrollable-menu {
        height: auto;
        max-height: 400px;
        overflow-x: hidden;
    }

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

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


  

   
   


</style>
<div class="page-content">
    <div class="container-fluid">
         <!-- start page title -->
         @include('../reachassuree_admin/comman/header')
         <!-- end page title -->        
       
        <form action="{{route('agent.tab.save')}}" method="POST" id="formAddMenu" class="needs-validation" novalidate enctype="multipart/form-data">
            @csrf
            <input type="hidden" class="form-control" id="tab_id" name="tab_id" value="">

            <div class="row">
                <div class="col-md-10" id="main_tab_id">
                    <div class="mb-3">
                        <label for="tab_name" class="form-label">Tab Name*</label>
                        <input type="text" class="form-control" id="tab_name" name="tab_name" placeholder="Tab name" value="" required>
                    </div>
                </div>
                <div class="col-md-5" id="sub_tab_id">
                    <div class="mb-3">
                        <label for="parent_tab_name" class="form-label">Select Parent Tab*</label>
                        <select class="form-control select2-ajax" id="parent_tab_name" name="parent_tab_name"></select>
                        <div class="invalid-feedback">This value is required.</div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="mb-3">
                        <label  class="form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <button type="submit" class="form-control btn btn-primary" id="btnTabSave">Insert</button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="mb-3">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-inline form-check-input" id="is_sub_tab" name="is_sub_tab">
                        <label for="is_sub_tab" class="form-label">Is Sub Tab</label>
                    </div>
                </div>
            </div>
        </form>
        
        <br>

        <div class="row ">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-hover table-striped dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Tab Name</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@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') }}?v=2"></script>
<script src="{{ asset('ra-assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var csrfToken=$("[name=_token]").val();
    var ajaxURLGetTabs = "{{route('get.agent.tabs.name.ajax')}}";
    var ajaxSearchParentTab = "{{route('search.parent.tab')}}";
    var ajaxURLTabNameDetail = "{{route('edit.tab.name')}}";

    $(document).ready(function(){
        $("#sub_tab_id").hide();

        $("#parent_tab_name").select2({
            ajax: {
                url: ajaxSearchParentTab,
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for parent tab name',
        });

        $("input[name='is_sub_tab']").click(function() {
            if ($("#is_sub_tab").is(":checked")) {
                $("#sub_tab_id").show();
                $("#parent_id").attr('required',true);
                $("#main_tab_id").removeClass('col-md-10').addClass('col-md-5');
            }else{
                $("#sub_tab_id").hide();
                $("#parent_id").attr("required" , false);
                $("#main_tab_id").removeClass('col-md-5').addClass('col-md-10');
            }
        });
        
    });

    function resetInputForm(){
        $('#formAddMenu').trigger("reset").removeClass('was-validated');
        $("#parent_tab_name").empty().trigger("change");
        $("#tab_id").val("");
        $("#sub_tab_id").hide();
        $("#is_sub_tab").attr('checked' , false);
        $("#main_tab_id").removeClass('col-md-5').addClass('col-md-10');
    }

    function editView(id) {
        resetInputForm();

        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });

        $.ajax({
            type: 'GET',
            url: ajaxURLTabNameDetail + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    if(resultData['data']['parent_id'] != 0){
                        var newOption = new Option("" + resultData['data']['parent_tab_name'] + "", "" + resultData['data']['parent_id'] + "", false, false);
                        $('#parent_tab_name').append(newOption).trigger('change');

                        $("#is_sub_tab").attr('checked' , true);

                        $("#sub_tab_id").show();
                        $("#parent_id").attr('required',true);
                        $("#main_tab_id").removeClass('col-md-10').addClass('col-md-5');
                    }

                    $("#tab_id").val(resultData['data']['id']);
                    $("#tab_name").val(resultData['data']['tab_name']);
                    $("#btnTabSave").html("Update");
                }else{
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }
   
    var table=$('#datatable').DataTable({
      "aoColumnDefs": [{ "bSortable": false, "aTargets": [] }],
      "order":[[ 0, 'desc' ]],
      "processing": true,
      "serverSide": true,
      "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": ajaxURLGetTabs,
        "type": "POST",
         "data": {"_token": csrfToken}
      },
      "aoColumns" : [
        {"mData" : "id"},
        {"mData" : "name"},
        {"mData" : "action"},
      ]
    });

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest,
            success: showResponse 
        };

        $('#formAddMenu').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {

        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            resetInputForm();
            $('#datatable').DataTable().ajax.reload(null, false);
            $("#btnTabSave").html('Insert');

        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        } 
    }
</script>
@endsection