@extends('layouts.app')

@section('stitle', __('messages.accounting'))
@section('title', __('messages.chartOfAccounts'))

@section('content')
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">

            @if(session()->get('title') == "success")
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">Success</h4>
                    <div class="alert-body">
                        {{ session()->get('message') }}
                    </div>
                </div>
            @elseif (session()->get('title') == "error")
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Error</h4>
                    <div class="alert-body">
                        {{ session()->get('message') }}
                    </div>
                </div>
            @elseif($errors->any())
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Error</h4>
                    @foreach ($errors->all() as $error)
                        <div class="alert-danger">{{ $error }}</div>
                    @endforeach
                </div>
            @else
            @endif
            <div class="content-header row">
                <div class="content-header-left col-md-4 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">@yield('title')</h2>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-right col-md-8 col-12 d-md-block d-none">
                    @include('accounting.chart_of_account.chart_of_account_manu')
                </div>
                <div class="content-body">
                    <!-- Table Hover Animation start -->
                    <div class="row" id="selectAccountType">
                        <div class="col-12">
                            <div class="card">
                                {{-- <div class="card-header">
                                    <h4 class="card-title">Table Hover Animation</h4>
                                </div> --}}

                                <div class="table-responsive" >
                                    <table class="invoice-list-table table">
                                        <thead>
                                        <tr>
                                            <th>{{__('messages.name')}}</th>
                                            <th>{{__('messages.TYPE')}}</th>
                                            <th width="30%">{{__('messages.DESCRIPTION')}}</th>
                                            <th>{{__('messages.acceptPayment')}}</th>
                                            <th width="15%">{{__('messages.ACTION')}}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($data as $chartOfAcc)
                                            @include('accounting.chart_of_account.sub_category_list',['subcategories' => $chartOfAcc,'level' => 0])
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="card-footer">
                                    <!-- Separated Pagination starts -->
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination justify-content-end mt-2">
                                            {{$data->links()}}
                                        </ul>
                                    </nav>
                                    <!-- Separated Pagination ends -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Table head options end -->

                </div>
            </div>
        </div>
        <div class="modal-size-lg d-inline-block">
            <!-- Modal -->
            <div class="modal fade text-left" id="chart_of_account" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                    <div class="modal-content">
                        <form class="form" action="{{ route('coa.store') }}" method="post">
                            @csrf
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel17"></h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <input type="hidden" class="parent_account_id" name="parent_account_id">
                            </div>
                            <div class="modal-body">

                                <div class="row">
{{--                                    <div class="col-12">--}}
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="tax_group">{{__('messages.accountType')}}</label>
                                            <select class="select2 form-control" id="account_type_id" name="account_type_id" required>
{{--                                                @foreach($accountType as $cate)--}}
{{--                                                    <option value="{{$cate->id}}" {{ (old('account_type_id') == $cate->id ?"selected":"")}} >{{$cate->name}}</option>--}}
{{--                                                @endforeach--}}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="name">{{__('messages.englishName')}}</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="name" name="name" required  value="{{ old('name') }}" aria-describedby="name"  />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="name">{{__('messages.arabicName')}}</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="arabic_name" name="arabic_name" required  value="{{ old('arabic_name') }}" aria-describedby="name"  />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="code">{{__('messages.code')}}</label>
                                            <div class="input-group">
                                                <input type="number" readonly class="form-control" id="code" name="code" required  value="{{ old('code') }}" aria-describedby="code"  />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="receipt_header">{{__('messages.DESCRIPTION')}}</label>
                                            <div class="input-group">
                                                <textarea name="description" class="form-control" id="description" cols="10" rows="3">{{ old('description') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="receipt_header">{{__('messages.arabicDescription')}}</label>
                                            <div class="input-group">
                                                <textarea name="arabic_description" class="form-control" id="arabic_description" cols="10" rows="3"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="accept_payment" class="col-md-6 col-12">
                                        <div class="custom-control custom-checkbox ">
                                            <input type="hidden"  value="0" class="selectUnChecked" name="accept_payment" id="checkBox" />
                                            <input type="checkbox" class="custom-control-input selectChecked"  value="1"  name="accept_payment" id="inlineCheckbox2"  />
                                            <label class="custom-control-label" for="inlineCheckbox2">{{__('messages.acceptPayment')}}:</label>

                                        </div>
                                    </div>


{{--                                    </div>--}}
                                </div>

                            </div>
                            <div class="modal-footer">
{{--                                <button type="submit" class="btn btn-primary" data-dismiss="modal">Accept</button>--}}
                                <button type="submit" id="updateOptionModal-save"  id="chart_account" data-dismiss="true" class="btn btn-primary">
                                    {{__('messages.Save')}}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('my_scripts')
    <script>

        $(function(){
            // validation
            $('.form').validate({
                rules: {
                    parent_account_id: {
                        required: true
                    },
                    account_type_id: {
                        required: true
                    },
                    name: {
                        required: true,
                    },
                    arabic_name: {
                        required: true,
                    },
                },
                messages:{
                    parent_account_id: {
                        required: "Please provide a Parent Account",
                    },
                    account_type_id: {
                        required: "Please provide a Account Type",
                    },
                    name: {
                        required: "Please provide a English Name ",
                    },
                    arabic_name: {
                        required: "Please provide a Arabic Name",
                    },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
            // model chart of add save and reload
            $("#selectAccountType").on("click", "#chart_account", function(e){
                location.reload();
            });
            // Get Account Type
            $("#selectAccountType").on("click", ".account_type", function(e){
                e.preventDefault();
                let select_parent_id = this.id;
                // let account_id = $('.select_parent option:selected').data('account_id');
                let account_id = $(this).data('account_id');
                console.log(account_id);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });

                $.ajax({
                    type:'POST',
                    url:"{{ route('coa.get_sub_account') }}",
                    data:{select_parent_id:select_parent_id},
                    success:function(data)
                    {
                        $('#account_type_id').empty();

                        $.each(data.parentAccount,function(i,obj)
                        {
                            const   acc_name  = obj.name;
                            if(account_id == 'level2'){
                                let div_data='<option value="'+ obj.id +'">' + acc_name + '</option>';
                                $(div_data).appendTo('#account_type_id');
                                // $('#account_type_id').removeAttr("disabled", true);
                                $('#accept_payment').show();
                            }else if (account_id == 'level0') {
                                let div_data='<option value="'+ obj.id +'">' + acc_name + '</option>';
                                $(div_data).appendTo('#account_type_id');
                                // $('#account_type_id').removeAttr("disabled", true);
                                $('#accept_payment').hide();
                                console.log(account_id);
                            }else {
                                let div_data='<option value="'+ obj.id +'"' + ( obj.id == account_id ? 'selected':'') + '>' + acc_name + '</option>';
                                console.log(account_id);
                                // $('#account_type_id').prop("disabled", true);
                                $(div_data).appendTo('#account_type_id');
                                $('#accept_payment').show();
                            }
                            // console.log(div_data);

                            // $('#name').val(acc_name);
                        });
                        $('#code').val(data.code);
                        $("#myModalLabel17").html(  "{{__('messages.new')}}" + "-"  + data.name);
                        $(".parent_account_id").val( data.id);
                        // $('#myModalLabel17').val(data.name);
                        console.log(data);

                    }
                });

            });
        });


    </script>

@endpush