@extends('layouts.app')

@section('stitle',  __('messages.account'))
@section('title',  __('messages.createAccount'))

@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-6 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>

            <div class="content-body">
                <!-- Basic Horizontal form layout section start -->
                <section id="basic-horizontal-layouts">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">{{__('messages.createChartOfAccount')}}</h4>
                                </div>
                                <div id="combos" class="card-body">
                                    <form class="form" action="{{route('coa.store')}}" method="POST">
                                        @csrf
                                        <div class="row" id="selectAccountType">

                                            <div class="col-md-4 col-12">
                                                <div class="form-group">
                                                    <label class="asterisk" data-toggle="tooltip" data-placement="top" data-original-title="summation of the respective child account values.">{{__('messages.parentAccount')}} <span></span>  <i data-feather='alert-circle' class=""></i></label>
                                                    <select class="select2 form-control select_parent" id="parent_account_id" name="parent_account_id" required>
                                                        <option value="" data-level="" selected>{{__('messages.selectAccount')}}</option>
{{--                                                        <option value="0"> + {{__('messages.parentAccount')}}</option>--}}
                                                        @foreach($cOA as $chartAcc)
                                                            @include('accounting.chart_of_account.sub_create',['subcategories' => $chartAcc,'level' => 0])
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-12">
                                                <div class="form-group">
                                                    <label class="asterisk" data-toggle="tooltip" data-placement="top" data-original-title="classification of accounts into categories.">{{__('messages.accountType')}} <span></span>  <i data-feather='alert-circle' class=""></i></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-4 col-12">--}}
{{--                                                <div class="form-group">--}}
{{--                                                    <label for="tax_group">{{__('messages.detailType')}}</label>--}}
{{--                                                    <select class="select2 form-control" id="detail_type_id" name="detail_type_id" required>--}}
{{--                                                        @foreach($categories as $cate)--}}
{{--                                                            <option value="{{$cate->id}}" {{ (old('category') == $cate->id ?"selected":"")}} >{{$cate->name}}</option>--}}
{{--                                                        @endforeach--}}
{{--                                                    </select>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
                                            <div class="col-md-4 col-12">
                                                <div class="form-group">
                                                    <label class="asterisk" data-toggle="tooltip" data-placement="top" data-original-title="">{{__('messages.englishName')}} <span></span>  </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-4 col-12">
                                                <div class="form-group">
                                                    <label class="asterisk" data-toggle="tooltip" data-placement="top" data-original-title="">{{__('messages.arabicName')}} <span></span>  </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-4 col-12">
                                                <div class="form-group">
                                                    <label for="receipt_header">{{__('messages.DESCRIPTION')}}</label>
                                                    <textarea name="description" class="form-control" id="description" cols="10" rows="3">{{ old('description') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-12">
                                                <div class="form-group">
                                                    <label for="arabic_description">{{__('messages.arabicDescription')}}</label>
                                                    <textarea name="arabic_description" class="form-control" id="arabic_description" cols="10" rows="3">{{ old('description') }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-12">
                                                <div class="form-group">
                                                    <label for="code"></label>
                                                    <label class="asterisk" data-toggle="tooltip" data-placement="top" data-original-title="">{{__('messages.code')}} <span></span> </label>
                                                    <div class="input-group">
                                                        <input type="number" class="form-control" id="code" name="code" required readonly  value="{{ old('code') }}" aria-describedby="code"  />
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="accept_payment_check" class="col-md-4 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 class="form-group mt-1">--}}
{{--                                                    <div class="form-group">--}}
{{--                                                        <select class="select2 form-control" id="sub_account_id" name="sub_account_id" required>--}}
{{--                                                            @foreach($cOA as $cate)--}}
{{--                                                                <option   value="{{$cate->id}}" {{ (old('category') == $cate->id ?"selected":"")}} > {{$cate->name}} </option>--}}
{{--                                                                @if(count($cate->subcategory))--}}
{{--                                                                    @include('accounting.subCategoryList',['subcategories' => $cate->subcategory,'level' => 0])--}}
{{--                                                                @endif--}}
{{--                                                            @endforeach--}}
{{--                                                        </select>--}}
{{--                                                        <select class="select2 form-control" id="sub_account_id" name="sub_account_id" required>--}}
{{--                                                            @foreach($cOA as $cate)--}}
{{--                                                                    @include('accounting.subCategoryList',['subcategories' => $cate,'level' => 0])--}}
{{--                                                            @endforeach--}}
{{--                                                        </select>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
                                            </div>

                                            <div class="col-12 text-right">
                                                {{--                                          <a href="{{url()->previous()}}">  <button type="button" class="btn btn-outline-secondary mr-1">Back</button></a>--}}
                                                <button class="btn btn-secondary waves-effect waves-float waves-light" type="button" onclick="location.href='{{ route('coa.list') }}'"><i data-feather='chevron-left' class="mr-1"></i>{{__('messages.Back')}}</button>
                                                <button type="submit" class="btn btn-primary">{{__('messages.Submit')}}</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Basic Horizontal form layout section end -->
            </div>

        </div>
    </div>
@endsection
@push('my_scripts')
    <script>
        $(function(){
            var select = $('.select_parent');
            select.each(function () {
                var $this = $(this);
                $this.wrap('<div class="position-relative"></div>');
                $this
                    .select2({
                        placeholder: '{{__('messages.selectAccount')}}',
                        dropdownParent: $this.parent()
                    })
                    .change(function () {
                        $(this).valid();
                    });
            });
            $('.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');
                }
            });



            if ($('.select_parent')){
                let select_parent_id = $('.select_parent').val();
                // alert($('option:selected',this).data("level"));
                let level =$('option:selected',this).data("level");

                // console.log(level);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });

                $.ajax({
                    type:'POST',
                    url:"{{ route('coa.getaccountbyid') }}",
                    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;
                            var div_data="<option value="+obj.id+">"+ acc_name+"</option>";
                            console.log(div_data);
                            $(div_data).appendTo('#account_type_id');
                        });
                        $('#code').val(data.code);
                        if (level != 0 && level !=2 && level !=4){
                            document.getElementById("account_type_id").disabled = true;
                            // $(div_data).empty().appendTo('#account_type_id');
                            $('#account_type_id').empty().append(div_data)
                        }else {
                            document.getElementById("account_type_id").disabled = false;
                        }
                        if (level != 0 && level !=2 ){
                            $("#accept_payment_check").show();
                        }else {
                            $("#accept_payment_check").hide();
                        }

                    }
                });
            }

            $("#selectAccountType").on("change", ".select_parent", function(e){
                e.preventDefault();
               let select_parent_id = $('.select_parent').val();
                // alert($('option:selected',this).data("level"));
               let level =$('option:selected',this).data("level");

                // console.log(level);

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });

                $.ajax({
                    type:'POST',
                    url:"{{ route('coa.getaccountbyid') }}",
                    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;
                                    var div_data="<option value="+obj.id+">"+ acc_name+"</option>";
                            console.log(div_data);
                            $(div_data).appendTo('#account_type_id');
                        });
                        $('#code').val(data.code);
                        if (level != 0 && level !=2 && level !=4){
                            document.getElementById("account_type_id").disabled = true;
                            // $(div_data).empty().appendTo('#account_type_id');
                            $('#account_type_id').empty().append(div_data)
                        }else {
                            document.getElementById("account_type_id").disabled = false;
                        }
                        if (level != 0 && level !=2 ){
                            $("#accept_payment_check").show();
                        }else {
                            $("#accept_payment_check").hide();
                        }
                    }
                });


            });

        });
    </script>

@endpush