@extends('layouts.app')

@section('stitle', __('messages.journalEntry'))
@section('title', __('messages.journalEntry'))

@section('content')
    <style>
        table th, .table td {
            padding: 0.4rem;
            vertical-align: middle;
        }
    </style>
    <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">Something's not quite right</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
            <style>
                .table tfoot th {font-size: 1.2rem;}
            </style>
                <div class="alert-danger"></div>
            <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"> {{__('messages.journalEntryNo')}}  {{$number}}</h2>
                        </div>
                    </div>
                </div>

            </div>
            <form id="form" action="{{ route('journal.store') }}" onsubmit="return reg()" method="post">
                @csrf
                <div class="row">
                    <div class="col-md-8 col-12">
                        <div class="form-group">
                            <label for="description">{{__('messages.DESCRIPTION')}}</label>
                            <input name="description" class="form-control" id="description" cols="10" value="{{ old('description') }}" placeholder="Description"  rows="3"></input>
                        </div>
                    </div>
                    <div class="col-md-4 col-12">
                        <div class="form-group">
                            <label for="fp-default">{{__('messages.date')}}</label>
                            <input type="text" id="fp-default" class="form-control my-flatpickr-basic" required placeholder="YYYY-MM-DD" name="date" />
                        </div>
                    </div>
                </div>
                <input type="hidden"  name="total_debits" id="total_debits">
                <input type="hidden"   name="total_credits" id="total_credits">
                <input type="hidden"  name="entry_no" value="{{$number}}">
                <div class="content-body">
                    <div class="card">
                        <table class="invoice-list-table table prowdata">
                            <thead>
                            <tr>
                                <th>{{__('messages.account')}}</th>
                                <th>{{__('messages.name')}}</th>
                                <th>{{__('messages.debits')}}</th>
                                <th>{{__('messages.credits')}}</th>
                                <th>{{__('messages.comments')}}</th>
                                <th>{{__('messages.Branch')}}</th>
                                <th>{{__('messages.Delete')}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr data-row="1">
                                <td>
                                    <select class="select2 form-control form-control-lg acc_id 1" required  name="chartAccList[1][acc_id]">
                                        <option value="">{{__('messages.selectAccount')}}</option>
                                        @foreach($chartOfAccount as $chart_of_accc)
                                            @include('accounting.journal_entry.sub_create',['subcategories' => $chart_of_accc,'level' => 0])
                                        @endforeach
                                    </select>
                                </td>
                                <td style="width: 200px">
                                    <select class="name_select 1 select2 form-control form-control-lg" data-row="1"   name="chartAccList[1][pay_sup_id]">
                                        <option style="width: 200px" value="">N/A</option>
{{--                                        <option value="new">+ Add New</option>--}}
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_SUPPLIER }}" label="Suppliers">
                                            @foreach($suppliers as  $supplier)
                                                <option value="supplier_{{ $supplier->id}}" >{{$supplier->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_USER }}" label="User">
                                            @foreach($users as  $user)
                                                <option value="user_{{ $user->id}}" >{{$user->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_WAREHOUSE }}" label="Warehouse">
                                            @foreach($warehouses as  $warehouse)
                                                <option value="warehouse_{{ $warehouse->id}}" >{{$warehouse->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_BRANCH }}" label="Branch">
                                            @foreach($branches as  $branch)
                                                <option value="branch_{{ $branch->id}}" >{{$branch->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_PAYMENT_METHOD }}" label="Payment Methods">
                                            @foreach($paymentMethods as $payment)
                                                <option value="payment_{{$payment->id}}" >{{$payment->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_PURCHASE_TYPE }}" label="Purchase Type">
                                            @foreach($purchase_types as $purchase)
                                                <option value="purchase_{{$purchase->id}}" >{{$purchase->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::VAT_TYPE }}" label="VAT Type">
                                            <option value="vat_{{ \App\Models\JournalEntryType::IS_INPUT }}" >VAT - Incoming</option>
                                            <option value="vat_{{ \App\Models\JournalEntryType::IS_OUTPUT }}" >VAT - Outgoing</option>
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_TRANSFER }}" label="Transfer">
                                            <option value="vat_{{ \App\Models\JournalEntryType::IS_TRANSFER }}" >Stock - Transfer</option>
                                        </optgroup>
                                    </select>
                                </td>

                                <td><input type="number" class="form-control form-control-md debit 1" autocomplete="off" id="debits" name="chartAccList[1][debits]" value="" placeholder="0"/></td>
                                <td><input type="number" class="form-control form-control-md credit 1" autocomplete="off" id="credits" name="chartAccList[1][credits]" value="" placeholder="0"/></td>
                                <td><textarea type="text" class="form-control form-control-md comment 1" autocomplete="off" name="chartAccList[1][comment]" value="" rows="1" placeholder="Comments"></textarea></td>
                                <td>
                                    <select class="select2 form-control form-control-lg " required  name="chartAccList[1][branch]" >
                                        <option value="">N/A</option>
                                        <optgroup class="opt-group" label="Branches">
                                            {{--                                        <option value="">{{__('messages.SelectBranch')}}</option>--}}
                                            @foreach($branches as $branch)
                                                <option value="{{$branch->id}}">{{$branch->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" label="Account">
                                            <option value="ac_{{ Auth::user()->business_id }}"> Main AC </option>
                                        </optgroup>
                                    </select>
                                </td>
                                <td><button class="btn btn-sm btn-danger removeChart">{{__('messages.Delete')}}</button></td>

                            </tr>
                            <tr data-row="2">
                                <td>
                                    <select class="select2 form-control form-control-lg acc_id 2" required  name="chartAccList[2][acc_id]" >
                                        <option value="">{{__('messages.selectAccount')}}</option>
                                        @foreach($chartOfAccount as $chart_of_accc)
                                            @include('accounting.journal_entry.sub_create',['subcategories' => $chart_of_accc,'level' => 0])
                                        @endforeach
                                    </select>
                                </td>
                                <td style="width: 200px">
                                    <select class="name_select 2 select2 form-control form-control-lg" data-row="2"  name="chartAccList[2][pay_sup_id]">
                                        <option value="">N/A</option>
{{--                                        <option value="new">+ Add New</option>--}}
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_SUPPLIER }}" label="Suppliers">
                                            @foreach($suppliers as  $supplier)
                                                <option value="supplier_{{ $supplier->id}}" >{{$supplier->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_WAREHOUSE }}" label="Warehouse">
                                            @foreach($warehouses as  $warehouse)
                                                <option value="warehouse_{{ $warehouse->id}}" >{{$warehouse->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_BRANCH }}" label="Branch">
                                            @foreach($branches as  $branch)
                                                <option value="branch_{{ $branch->id}}" >{{$branch->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_PAYMENT_METHOD }}" label="Payment Method">
                                            @foreach($paymentMethods as $payment)
                                                <option value="payment_{{$payment->id}}" >{{$payment->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_PURCHASE_TYPE }}" label="Purchase Type">
                                            @foreach($purchase_types as $purchase)
                                                <option value="purchase_{{$purchase->id}}" >{{$purchase->name}}</option>
                                            @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::VAT_TYPE }}" label="VAT Type">
                                            <option value="vat_{{ \App\Models\JournalEntryType::IS_INPUT }}" >VAT - Incoming</option>
                                            <option value="vat_{{ \App\Models\JournalEntryType::IS_OUTPUT }}" >VAT - Outgoing</option>
                                        </optgroup>
                                        <optgroup class="opt-group" data-type_id="{{ \App\Models\JournalEntryType::IS_TRANSFER }}" label="Transfer">
                                            <option value="vat_{{ \App\Models\JournalEntryType::IS_TRANSFER }}" >Stock - Transfer</option>
                                        </optgroup>
                                    </select>
                                </td>
                                <td><input type="number" class="form-control form-control-md debit 2" autocomplete="off" name="chartAccList[2][debits]" value="" placeholder="0"/></td>
                                <td><input type="number" class="form-control form-control-md credit 2" autocomplete="off" name="chartAccList[2][credits]" value="" placeholder="0"/></td>
                                <td><textarea type="text" class="form-control form-control-md comment 2" autocomplete="off" name="chartAccList[2][comment]" rows="1" value="" placeholder="Comments"></textarea></td>
                                <td><select class="select2 form-control form-control-lg " required name="chartAccList[2][branch]" >
                                        <option value="">N/A</option>
                                        <optgroup class="opt-group" label="Branches">
{{--                                        <option value="">{{__('messages.SelectBranch')}}</option>--}}
                                        @foreach($branches as $branch)
                                            <option value="{{$branch->id}}">{{$branch->name}}</option>
                                        @endforeach
                                        </optgroup>
                                        <optgroup class="opt-group" label="Account">
                                            <option value="ac_{{ Auth::user()->business_id }}"> Main AC </option>
                                        </optgroup>
                                    </select>
                                </td>
                                <td><button class="btn btn-sm btn-danger removeChart">{{__('messages.Delete')}}</button></td>

                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th></th>
                                <th>
                                    <span class="text-danger">
                                        <span id="creditAndDebit" class="creditAndDebit"> </span>
                                    </span>
                                </th>
                                <th>{{__('messages.debits')}}<br>
                                    <span class="text-warning">
                                        <span class="total_debits"></span>
                                    </span>
                                </th>
                                <th>{{__('messages.credits')}}<br>
                                    <span class="text-warning">
                                        <span  class="total_credits"></span>
                                    </span>
                                </th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>


                <div class="row" id="selectChartOfAccDiv">
                    <div class="col-4">
                        <button type="button" class="btn btn-primary selectChartAccId" name="selectChartAccId">{{__('messages.add')}}</button>
                    </div>
                    <div class="col-4"></div>
                    <div class="col-4 text-right">
                        <button type="submit" onclick="" class="btn btn-primary">{{__('messages.Submit')}}</button>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <div class="modal-size-sm d-inline-block">
        <!-- Modal -->
        <div class="modal fade text-left" id="selectSupplier" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                <div class="modal-content">
                    <form class="new_user_form "  method="POST">
                        @csrf
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel17">New @yield('stitle')</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="name">Name:</label>
                                        <input type="text" id="name" class="form-control" name="name" required>

                                    </div>
                                    <div class="form-group">
                                        <label for="type">Type:</label>
                                        <select class="select2 form-control" id="type" name="type" required>
                                            <option value="{{ \App\Models\JournalEntryType::IS_CUSTOMER }}">Customer</option>
                                            <option value=" {{ \App\Models\JournalEntryType::IS_SUPPLIER }}">Supplier</option>
                                            <option value="{{ \App\Models\JournalEntryType::IS_EMPLOYEE }}">Employee</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary add_name_btn" >{{__('messages.Submit')}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection


@push('my_scripts')
    <script>
        $('#form').validate({
            rules: {
                description: {
                    required: true
                },
                date: {
                    required: true,
                },
            },
            messages:{
                description: {
                    required: "Please provide a Description",
                },
                date: {
                    required: "Please provide a Date",
                },
            },
            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');
            }
        });

        $(document).ready(function(){
            $(".prowdata").on('change', '.form-control', function(){
                if($(this).val() === 'new'){
                    $('#selectSupplier').modal({
                        show: true
                    });
                }
            });

            $('.add_name_btn').on('click', function(e){
                e.preventDefault();
                const method = 'POST';
                const url = "{{ route('journal.add_name') }}";
                const headers = {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                };
                const data = {
                    name:        $('.new_user_form').find('#name').val(),
                    type:        $('.new_user_form').find('#type').val(),
                    user_id:     "{{ Auth::user()->id }}",
                    business_id: "{{ Auth::user()->business_id }}",
                };
                $.ajax({
                    method,
                    url,
                    headers,
                    data, // data to be sent to server
                    dataType: 'json', // type of data expecting back from server
                    success: function (data) {
                        let user = data.user;
                        let type = data.type;
                        $('.opt-group').each(function(i, group){
                            if($(this).data('type_id') == type){
                                // let name_select = $(this).closest('.name_select');
                                console.log(group)
                                // console.log(name_select)
                                let newOption = new Option(user.name, "supplier_"+user.id, false, false);
                                $('.name_select').find(group).append(newOption).trigger('change');
                                // group.append(newOption);
                            }
                        $('.name_select').trigger('change');
                        });
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            });
        });

        function reg(){
            var debits = $("#total_debits").val();
            var credits = $("#total_credits").val();

            if(debits != credits || debits == 0 || credits == 0 ){
                $('.alert-danger').html("Debit and credit amounts do not match");
                return false;
            }else {
                $('#form').validate({
                    rules: {
                        description: {
                            required: true
                        },
                        date: {
                            required: true,
                        },
                    },
                    messages:{
                        description: {
                            required: "Please provide a Description",
                        },
                        date: {
                            required: "Please provide a Date",
                        },
                    },
                    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');
                    }
                });
                return true;
            }
        }

        $('.my-flatpickr-basic').pickadate({
            onStart: function() {
            },
            formatSubmit: 'yyyy/mm/dd',
            closeOnSelect: true,
            closeOnClear: true,
        });

            totalCalc();
        function totalCalc() {
            var total_debit = 0;
            $('.debit').each(function(){
                if (this.value == '' || this.value == null || this.value == 0){
                    total_debit +=   parseFloat(0);
                }else {
                    total_debit +=   parseFloat(this.value);
                }


            });
            // alert(total_debit);
            $('.total_debits').html(total_debit.toFixed(2));
            $('#total_debits').val(total_debit.toFixed(2));

            var total_credits = 0;

            $('.credit').each(function(){
                if (this.value == '' || this.value == null || this.value == 0){
                    total_credits += parseFloat(0);
                }else {
                    total_credits += parseFloat(this.value);
                }
            });
            // alert(total_credits);
            $('.total_credits').html(total_credits.toFixed(2));
            $('#total_credits').val(total_credits.toFixed(2));
            if (total_credits != total_debit){
                $('#creditAndDebit').html("Credit and Debit amounts are unequal by a difference of " + total_debit);
            }else {
                $('#creditAndDebit').html("");
            }
        }
        $("#selectChartOfAccDiv").on("click", ".selectChartAccId", function(e){
            e.preventDefault();
            var rowCount = $('.prowdata tbody tr').length;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                }
            });
            $.ajax({
                type:'POST',
                url:"{{ route('journal.getitembyid') }}",
                data:{rowCount:rowCount},
                success:function(data)
                {
                        $('.prowdata tbody').append(data.table_data);
                        console.log(data.table_data);
                        $('.acc_id:last-of-type').select2();
                        $('.branch:last-of-type').select2();
                        $('.supllier_id:last-of-type').select2();
                }
            });
        });

        $(".prowdata").on('click', '.removeChart', function () {
            $(this).closest('tr').remove();
            // totalCalc();
        });

        {{--$(".prowdata").on("change", ".acc_id", function(e){--}}
        {{--    e.preventDefault();--}}
        {{--    let row = $(this).closest('tr').data("row");--}}
        {{--    // var text = row.find(".supllier_id").data("row");--}}

        {{--    let account_code = $(this).find(':selected').data('account_id');--}}
        {{--    if (account_code == 210201 || account_code == 110101 || account_code == 110201 ){--}}
        {{--        $.ajaxSetup({--}}
        {{--            headers: {--}}
        {{--                'X-CSRF-TOKEN': $('input[name="_token"]').val()--}}
        {{--            }--}}
        {{--        });--}}
        {{--        $.ajax({--}}
        {{--            type:'POST',--}}
        {{--            url:"{{ route('journal.getSupplier') }}",--}}
        {{--            data:{account_code:account_code},--}}
        {{--            success:function(data)--}}
        {{--            {--}}
        {{--                $.each(data.data,function(i,obj)--}}
        {{--                {--}}

        {{--                    const   acc_name  = obj.name;--}}
        {{--                    var div_data="<option value="+obj.id+">"+obj.name+"</option>";--}}
        {{--                    // $(div_data).appendTo('.');--}}
        {{--                    $(div_data).appendTo('.supllier_id.'+row);--}}
        {{--                    // $('#name').val(acc_name);--}}
        {{--                });--}}
        {{--            }--}}
        {{--        });--}}

        {{--        $('.supplier').removeClass('d-none');--}}

        {{--    }--}}

        {{--});--}}
        $(".prowdata").on('focusout keydown', '.debit', function (e) {
            var keyCode = e.which;
            console.log(keyCode);
            console.log(" which "+e.which +" Code "+e.keyCode)
            if (e.which != 0 && e.which != 9) {
                var row =   $(this).closest('tr');
                row.find('.credit').val('');
            }
            totalCalc();

        });
        $(".prowdata").on('focusout keydown', '.credit', function (e) {
            if (e.which != 0 && e.which != 9) {
                var row =   $(this).closest('tr');
                row.find('.debit').val('');
            }
            totalCalc();
        });


    </script>
@endpush