@extends('admin.layout.master')
@section('title','ACCOUNTS HEAD MANAGEMENT')
@section ('content')
<style>
.select_2{
    min-width: 100%!important;
}

</style>
<div id="dashboard" class="card sina-card " style="background:#f6f6f6 !important; ">
    <div class="card-header card-header-s mb-1">
        <h4>{{__('obs.accounts_head_form')}}</h4>
    </div>
    <div class="cart-body">
        <div class="card-box"> 
            <div class="row p-3">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <p class="text-center tree-title">{{__('obs.privilege')}}</p>
                    <div class="well" style="background-color: transparent !important;height: 450px;overflow-y: scroll;padding: 0px;">
                    <div id="tree" class="tree" style="font-size: 10px"></div>
                    </div>
                </div>
                <div class="col-md-8 col-sm-8 col-xs-8">
                    <form action="{{route('accounts_head.store')}}" id="acc_form" method="post" class="form">
                        @csrf
                        {{-- <span>Edit Mode<input id="edit_mode" onchange="changeMode(this.value)" value="0" type="checkbox" data-toggle="toggle" data-size="sm" data-onstyle="success"></span> --}}
                        {{-- <h3 class="title text-center mt-4 mb-8"><span>Account Create</span></h3> --}}
                        <div class="row mb-1">
                            <div class="col-lg-12 col-sm-12" id="parent_container">
                                {{-- <div class="input-group"> --}}
                                    <span class="input-group-addon head-label">{{__('obs.parent_account_(Changed)')}}</span>
                                    <input type="text" id="new_parent_name" name="parent_name" class="form-control head-input" placeholder="" data-toggle="modal" data-target="#addNewParent">
                                    <input type="hidden" id="new_parent_id" name="new_parent_id">
                                {{-- </div> --}}
                            </div>
                        </div>
                        <div class="row mb-1">
                        <div class="col-lg-6 col-sm-6">
                            <span class="input-group-addon head-label">{{__('obs.parent_account')}}</span><br>
                                {{-- <select name="parent_id" class="select2" id="parent_id" required>
                                    <option value="null">Select Parent</option>
                                    @forelse ($accountsHeadsOptions as $item)
                                        <option value="{{$item->id}}" class="group_head_{{$item->id}}">{{$item->name}}</option>
                                    @empty
                                        
                                    @endforelse
                                </select> --}}
                            <input type="text" id="parent_name" class="form-control head-input" placeholder="" readonly>
                            <input type="hidden" id="parent_id" name="parent_id">
                        
                        
                        </div>

                        <div class="col-lg-6 col-sm-6">
                            <span class="input-group-addon head-label">{{__('obs.account_no.')}}</span>
                            <input id="acc_code" type="text"  name="code" class="form-control head-input" placeholder="">
                            <input id="acc_code_edit" type="hidden">
                        </div>
                        </div>_
                        <div class="row mb-1">
                            <div class="col-lg-6 col-sm-6">
                                <span class="input-group-addon head-label">{{__('obs.account_name')}}</span>
                                <input id="acc_name" type="text" class="form-control head-input"  name="name" placeholder="">
                                <input id="acc_name_edit" type="hidden">
                                <input id="parent_name_edit" type="hidden">
                                <input id="edit_id" type="hidden" name="edit_id">
                            </div>
                            <div class="col-lg-6 col-sm-6">
                                <span class="input-group-addon head-label">{{__('obs.local_name')}}</span>
                                <input id="acc_foreign_name" type="text" name="local_name" class="form-control head-input" placeholder="">
                                <input id="acc_foreign_name_edit" type="hidden">
                            </div>
                        </div>
                        <div class="row mb-1">
                        <div class="col-lg-6 col-sm-6">
                            <div class="input-group">
                                <span class="input-group-addon head-label">{{__('obs.account_type')}}</span>
                                <select class="form-control select_2" id="acc_type" name="type">
                                    <option class="acc_type-0" value="0">{{__('obs.ledger')}}</option>
                                    <option class="acc_type-1" value="1">{{__('obs.group')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6">
                            <div class="input-group">
                                <span class="input-group-addon head-label">{{__('obs.account_status')}}</span>
                                <select class="form-control select_2" id="acc_status" name="status">
                                    <option class="acc_status-1" value="1">{{__('obs.active')}}</option>
                                    <option class="acc_status-2" value="2">{{__('obs.inactive')}}</option>
                                </select>
                            </div>
                        </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-lg-6 col-sm-6">
                                <span class="input-group-addon head-label">{{__('obs.note')}}</span>
                                <input class="form-control" id="note_no" name="note" placeholder="Note No" />
                                <input id="note_no_edit" type="hidden">
                            </div>
                            <div class="col-lg-6 col-sm-6">
                                <div class="input-group">
                                    <span class="input-group-addon head-label">{{__('obs.user_revilige')}}</span>
                                    <select name="user" class="form-control select_2" id="user" multiple>
                                        <option value="null">{{__('obs.select_users')}}</option>
                                        @forelse ($users as $item)
                                            <option value="{{$item->id}}">{{$item->name}}</option>
                                        @empty
                                            
                                        @endforelse
                                    </select>
                                    </div>
                            </div>
                            <div class="col-lg-6 col-sm-6">
                                <span class="input-group-addon head-label">{{__('obs.remarks')}}</span>
                                <textarea rows="4" class="form-control" id="remarks" name="remarks"></textarea>
                                <input id="remarks_edit" type="hidden">
                                <input id="is_sub" type="hidden" name="is_sub" value="2">
                            </div>
                        </div>

                            <div class="row p-2" style="text-align: center">
                                <button type="submit" id="submit_btn" class="btn btn-primary">{{__('obs.submit')}}</button>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
        
<div class="modal fade" id="addNewParent" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{__('obs.select_parent_account_head')}} </h5>
                <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <p class="text-center tree-title">{{__('obs.privilege')}}</p>
                    <div class="well" style="background-color: transparent !important;height: 450px;overflow-y: scroll;padding: 0px;">
                      <div id="tree1" class="tree"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('obs.close')}}</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <!-- page script -->
    <script type="text/javascript">
        $('.select_2').select2();
        var tree =@json($accountsHeadDataJson);
        function getTree() {
        return tree;
        }

    $(document).ready(function() {
        $("#parent_container").hide();
        $('#tree1').treeview({
            selectable: true,
            multiSelect: true,
            highlightSelected: false,
            showBorder: false,
            showCheckbox: true,
            levels: 1,
            backColor: 'white',
            expandIcon: 'fa fa-plus',
            collapseIcon: 'fa fa-minus',
            data: getTree()}).on('nodeSelected', function(event, data) {
                $("#new_parent_name").val(data.acc_name);
                $("#new_parent_id").val(data.id);
                $("#addNewParent").modal("hide");
                });
        $('#tree').treeview({
            selectable: true,
            multiSelect: true,
            highlightSelected: false,
            showBorder: false,
            showCheckbox: true,
            levels: 1,
            backColor: 'white',
            expandIcon: 'fa fa-plus',
            collapseIcon: 'fa fa-minus',
            data: getTree()}).on('nodeSelected', function(event, data) {
                $("#node_id").val(data.nodeId);
                $("#btnNew").show();
                $("#btnUpdate").show();
                $("#btnSaveAccount").hide();
                // $("#acc_type").attr("disabled",true);
                //$('#parent_id').find("option").attr("selected", false);
                $("#edit_id").val(data.id);

                $("#acc_name_edit").val(data.acc_name);
                $("#parent_name_edit").val(data.parent_title);
                $("#note_no_edit").val(data.note);
                $("#acc_code_edit").val(data.acc_code);
                $("#acc_foreign_name_edit").val(data.acc_foreign_name);
                // $("#parent_id_edit").val(data.parent_id);
                
                
                if($("#edit_mode").val()==1){
                    $("#parent_name").val(data.parent_title);
                    $("#parent_id").val(data.parent_id);
                    $("#acc_name").val(data.acc_name);
                    $("#note_no").val(data.note);
                    $("#acc_code").val(data.acc_code);
                    $("#acc_foreign_name").val(data.acc_foreign_name);
                    $(".acc_status-"+data.status).attr("selected",true);
                    $("#acc_form").attr('action',"{{route('accounts_head.update')}}");
                    //$(".group_head_"+data.parent_id).attr('selected',true);
                }else{
                    $("#parent_name").val(data.acc_name);
                    $("#parent_id").val(data.id);
                    nullAllField();
                    $("#acc_form").attr('action',"{{route('accounts_head.store')}}");
                    //$(".group_head_"+data.id).attr('selected',true);
                }
                

                var ans = Array.isArray(data.nodes);
            });
    });
    function nullAllField(){
        $("#acc_name").val('');
        $("#note_no").val('');
        $("#acc_code").val('');
        $("#acc_foreign_name").val('');
        $("#new_parent_name").val('');
        $("#new_parent_id").val(0);
    }
    function changeMode(checkVal)
    {
        $('#parent_id').find("option").attr("selected", false);
        if(checkVal==1){
            $("#parent_container").hide();
            //$(".group_head_"+$("#edit_id").val()).attr('selected',true);
            nullAllField();
            $("#parent_name").val($("#acc_name_edit").val());
            $("#parent_id").val($("#edit_id").val());
            $("#edit_mode").val(0);
            $("#submit_btn").text('Add New');
            $("#acc_form").attr('action',"{{route('accounts_head.store')}}");
        }else{
            
            $("#parent_container").show();
            $("#edit_mode").val(1);
            $("#acc_form").attr('action',"{{route('accounts_head.update')}}");
            $("#acc_name").val($("#acc_name_edit").val());
            $("#note_no").val($("#note_no_edit").val());

            $("#parent_name").val($("#parent_name_edit").val());
            $("#parent_id").val($("#edit_id").val());
            
            $("#acc_code").val($("#acc_code_edit").val());
            $("#acc_foreign_name").val($("#acc_foreign_name_edit").val());
            //$(".group_head_"+$("#parent_id_edit").val()).attr('selected',true);
            $("#submit_btn").text('Update');
        }
    }
    </script>
@stop