@extends('layouts.admin')


@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid mt-4">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- jquery validation -->
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Account Head Entry</h3>

                            <a href="{{ route('chartpl.index') }}" style="float: right;padding: 3px 26px;"
                                class="btn btn-outline-dark btn-flat">List</a>

                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->

                        <form id="grouptypeform" method="POST" action="{{ route('chartpl.store') }}">

                            @csrf

                            <div class="card-body">

                                <div class="row">

                                    <div class="col-md-6 offset-3"> 

                                        <div class="row"> 

                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label for="account_type" class="col-sm-4 col-form-label text-right">Account Type <span class="text-danger"> * </span></label>
                                                    <div class="col-sm-8">
                                                        <select name="account_type" class="form-control" id="account_type">
                                                            <option value="">Please Select</option>
                                                            <option value="Expense">Expense</option>
                                                            <option value="Income">Income</option>
                                                        </select>

                                                        @error('account_type')
                                                            <span class="error invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label for="parent_id" class="col-sm-4 col-form-label text-right">Parent <span class="text-danger"> * </span></label>
                                                    <div class="col-sm-8">
                                                        <select name="parent_id" class="form-control select2" id="parent_id">
                                                        </select>

                                                        @error('parent_id')
                                                            <span class="error invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label for="account_name" class="col-sm-4 col-form-label text-right">Account Name  <span
                                                    class="text-danger"> * </span></label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control  form-control-sm" name="account_name" id="account_name"
                                                            value="{{ old('account_name') }}" placeholder="Enter Sub Group Name">

                                                        @error('account_name')
                                                            <span class="error invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-12" style="display:none;">
                                                <div class="form-group row">
                                                    <label for="account_number" class="col-sm-4 col-form-label text-right">Account Number  <span
                                                    class="text-danger"> * </span></label>
                                                    <div class="col-sm-8">
                                                        <input type="number" class="form-control  form-control-sm" name="account_number" id="account_number"
                                                            value="{{ old('account_number') }}" placeholder="Enter Sub Group Name">

                                                        @error('account_number')
                                                            <span class="error invalid-feedback" role="alert">
                                                                <strong>{{ $message }}</strong>
                                                            </span>
                                                        @enderror

                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-md-12 text-right">
                                                <button type="submit" class="btn btn-info">Submit</button>
                                            </div>


                                        </div>

                                    </div>


                                </div>


                            </div>
                            <!-- /.card-body -->
                           
                        </form>
                    </div>
                    <!-- /.card -->
                </div>
                <!--/.col (left) -->
                <!-- right column -->
                <div class="col-md-6">

                </div>
                <!--/.col (right) -->
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@push('scripts')
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>

    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>

    <script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>

    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('js/jquery.table2excel.js') }}"></script>

    <script>
       
        $(function() {

                $("#account_type").change(function(){

                    $("#parent_id").html('');

                     $("#account_number").val('');

                    if($(this).val()){

                        let account_type = $(this).val();

                        let url = "{{ route('chartOfaccountpl.accountslist') }}";

                        $.get( url, { account_type: account_type } )
                        .done(function( data ) {

                            if(data.account_number){
                                $("#parent_id").html(data.row);
                                $("#account_number").val(data.account_number);
                            }

                            
                        });


                    }

                });

        });
    </script>
@endpush