@extends('layouts.app')

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

@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.editChartOfAccount')}}</h4>
                                </div>
                                <div id="combos" class="card-body">
                                    <form class="form" action="{{route('coa.update',$chartOfAccount->id)}}" method="POST">
                                        @csrf
                                        <div class="row" id="selectAccountType">
                                            <div class="col-md-4 col-12">
                                                <div class="form-group">
                                                    <label for="tax_group">{{__('messages.parentAccount')}}</label>
                                                    <select class="select2 form-control select_parent" id="parent_account_id" name="parent_account_id" disabled>
                                                        <option value="" selected>{{__('messages.selectAccount')}}</option>
                                                        <option value="0"> + {{__('messages.parentAccount')}}</option>
                                                        @foreach($cOA as $cate)
                                                            @include('accounting.chart_of_account.sub_chart_edit',['subcategories' => $cate,'level' => 0])
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 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" >
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 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="{{ $chartOfAccount->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="{{ $chartOfAccount->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">{{$chartOfAccount->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">{{$chartOfAccount->arabic_description }}</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-12">
                                                <div class="form-group">
                                                    <label for="code">{{__('messages.code')}}</label>
                                                    <div class="input-group">
                                                        <input type="number" class="form-control" id="code" name="code" readonly required  value="{{ $chartOfAccount->code }}" aria-describedby="code"  />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="  col-md-4 col-12">
                                                <div class="custom-control custom-checkbox ">
                                                    <input type="hidden"  value="0" {{$chartOfAccount->accept_payment == 0 ? 'unchecked' :''}} class="selectUnChecked" name="accept_payment" id="checkBox" />
                                                    <input type="checkbox" class="custom-control-input selectChecked"  value="1" {{$chartOfAccount->accept_payment == 1 ? 'checked' :''}} name="accept_payment" id="inlineCheckbox2"  />
                                                    <label class="custom-control-label" for="inlineCheckbox2">{{__('messages.acceptPayment')}}:</label>

                                                </div>
                                            </div>
                                            <div class="col-md-4 col-12">
                                                <div class="custom-control custom-switch custom-switch-success">
                                                    <p class="mb-50">{{__('messages.STATUS')}}</p>
                                                    <input type="checkbox" value="1" {{$chartOfAccount->status ?'checked':''}} class="custom-control-input" name="status" id="customSwitch111"  />
                                                    <label class="custom-control-label" for="customSwitch111">
                                                        <span class="switch-icon-left"><i data-feather="check"></i></span>
                                                        <span class="switch-icon-right"><i data-feather="x"></i></span>
                                                    </label>
                                                </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>
        $('.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').val() != 0){
            var select_parent_id = $(".select_parent").val();
            // let account_id = $(this).data('id');
            let account_id = $('.select_parent option:selected').data('account_id');
            console.log(account_id);
            $.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+">"+obj.name+"</option>";
                        console.log('id'+obj.id + "type"+account_id + "title"+acc_name);
                        let div_data='<option value="'+ obj.id +'"' + ( obj.id == account_id ? 'selected':'') + '>' + acc_name + '</option>';
                        // console.log(div_data);
                        $('#account_type_id').append(div_data);
                        if($(div_data).is(':selected' ===true)){
                            alert ('hi');
                        }
                        // $(div_data).appendTo('#account_type_id option');
                        // $('#name').val(acc_name);
                    });
                    // console.log(data.code);

                }
            });
        }
        $(function(){
            $("#selectAccountType").on("change", ".select_parent", function(e){
                e.preventDefault();
                let select_parent_id = $('.select_parent').val();
                let account_id = $('.select_parent option:selected').data('id');
                // let account_id = $(this).find(':selected').data('id')
                // let account_id = $(this).find(':selected').attr('data-id')
                // let account_id = $(this).data('id');
                console.log(account_id);
                $.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+">"+obj.name+"</option>";
                            console.log(div_data);
                            $(div_data).appendTo('#account_type_id');
                            // $('#name').val(acc_name);
                        });
                        $('#code').val(data.code);
                        console.log(data.code);

                    }
                });

            });

        });
    </script>

@endpush
{{--@push('my_scripts')--}}
{{--    <script>--}}

{{--        if ($('.selectAccountType ').val() != 0){--}}
{{--                var accountTypeId = $(".selectAccountType").val();--}}
{{--                // alert(accountTypeId);--}}
{{--                $.ajaxSetup({--}}
{{--                    headers: {--}}
{{--                        'X-CSRF-TOKEN': $('input[name="_token"]').val()--}}
{{--                    }--}}
{{--                });--}}
{{--                $.ajax({--}}
{{--                    type:'POST',--}}
{{--                    url:"{{ route('coa.getaccountbyid') }}",--}}
{{--                    data:{accountTypeId:accountTypeId},--}}
{{--                    success:function(data)--}}
{{--                    {--}}

{{--                        $('#detail_type_id').empty();--}}
{{--                        $.each(data.accountType,function(i,obj)--}}
{{--                        {--}}
{{--                            const   acc_name  = obj.name;--}}
{{--                            console.log('id'+obj.id + "type"+{{$chartOfAccount->acc_detail_type_id}} );--}}
{{--                            var div_data='<option value="'+ obj.id + '" selected="' + ( obj.id == {{$chartOfAccount->acc_detail_type_id}} ? 'true':'false' )  + '" >' + obj.name + '</option>';--}}
{{--                            // console.log(div_data);--}}
{{--                            $(div_data).appendTo('#detail_type_id');--}}
{{--                            // $('#name').val(acc_name);--}}
{{--                        });--}}


{{--                    }--}}
{{--                });--}}
{{--        }--}}

{{--        $("#selectAccountType").on("change", ".selectAccountType", function(e){--}}
{{--            e.preventDefault();--}}
{{--            var accountTypeId = $(".selectAccountType").val();--}}
{{--            // alert(accountTypeId);--}}
{{--            // if (accountTypeId == 1 ){--}}
{{--            //     $("#balance").attr("disabled", true);--}}
{{--            //     $("#as_of").datepicker("option", "disabled", true);--}}
{{--            // }--}}
{{--            $.ajaxSetup({--}}
{{--                headers: {--}}
{{--                    'X-CSRF-TOKEN': $('input[name="_token"]').val()--}}
{{--                }--}}
{{--            });--}}
{{--            $.ajax({--}}
{{--                type:'POST',--}}
{{--                url:"{{ route('coa.getaccountbyid') }}",--}}
{{--                data:{accountTypeId:accountTypeId},--}}
{{--                success:function(data)--}}
{{--                {--}}

{{--                    $('#detail_type_id').empty();--}}
{{--                    $.each(data.accountType,function(i,obj)--}}
{{--                    {--}}
{{--                        const   acc_name  = obj.name;--}}
{{--                        var div_data="<option value="+obj.id+">"+obj.name+"</option>";--}}
{{--                        $(div_data).appendTo('#detail_type_id');--}}
{{--                        // $('#name').val(acc_name);--}}
{{--                    });--}}


{{--                }--}}
{{--            });--}}
{{--        });--}}

{{--        if($('input[name="is_sub_account"]').is(':checked')){--}}
{{--            // console.log('check');--}}
{{--            $("#sub_account_id").removeAttr("disabled");--}}
{{--        }else {--}}
{{--            // console.log('uncheck');--}}
{{--            $("#sub_account_id").attr("disabled", true);--}}
{{--        }--}}

{{--        $(document).ready(function(){--}}
{{--            $('input[type="checkbox"]').click(function(){--}}
{{--                if($(this).is(":checked")){--}}
{{--                    // console.log("Checkbox is checked.");--}}
{{--                    $("#sub_account_id").removeAttr("disabled");--}}
{{--                }--}}
{{--                else if($(this).is(":not(:checked)")){--}}
{{--                    // console.log("Checkbox is unchecked.");--}}
{{--                    $("#sub_account_id").attr("disabled", true);--}}
{{--                }--}}
{{--            });--}}
{{--        });--}}
{{--    </script>--}}
{{--@endpush--}}