@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title-wrap bar-success">
                    <h4 class="card-title" id="basic-layout-form">General Journal Entries</h4>
                </div>
                {{-- <p class="mb-0">This is the most basic and cost estimation form is the default position.</p> --}}
            </div>
            <div class="card-body">
                <div class="px-3">
                    <form class="form" id="generalJournalForm">
                        <div class="form-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="date">Date</label>
                                        <input type="date" name="date" id="date" class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="ref">Ref Number</label>
                                        <input type="text" name="ref" id="ref" class="form-control" value="{{$refNo==null ? $refNo+1 : $refNo->ref+1}}">
                                        <input type="text" hidden name="entry_no" id="entry_no" class="form-control" value="{{$entry_no==NULL ? $entry_no+1 : $entry_no->entry_no+1}}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="account_id">Select Account</label>
                                        <select name="account_id[]" data-account="0" class="form-control account_id" required>
                                            <option value="" selected disabled>Select Account</option>
                                            @foreach ($banks as $b)
                                            <option data-name="bank" value="{{$b->id}}">{{$b->account_name}}-{{$b->banks->bank_name}}</option>
                                            @endforeach
                                            @foreach ($accounts as $a)
                                            <option data-name="account" value="{{$a->id}}">{{$a->name}}-{{$a->category}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" name="account_type[]" class="account_type_0">
                                <input type="hidden" name="account_type_credit[]" class="account_type_credit_0">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="debit">Debit</label>
                                        <input type="number" name="debit[]" placeholder="Amount" class="form-control debit">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="credit">Credit</label>
                                        <input type="number" name="credit[]" placeholder="Amount" class="form-control credit">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="memo">Memo</label>
                                        <input type="text" name="memo[]" placeholder="Memo" class="form-control">
                                    </div>
                                </div>
                                <!-- <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="bank_id">Select Account</label>
                                        <select name="bank_id[]" data-account-credit="0" class="form-control bank_id">
                                            <option value="" selected disabled>Select Account</option>
                                            @foreach ($banks as $b)
                                                <option data-name-credit="bank" value="{{$b->id}}">{{$b->account_name}}-{{$b->banks->bank_name}}</option>
                                            @endforeach
                                            @foreach ($accounts as $a)
                                                <option data-name-credit="account" value="{{$a->id}}">{{$a->name}}-{{$a->category}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="credit">Credit</label>
                                        <input type="number" name="credit[]" placeholder="Amount" class="form-control">
                                    </div>
                                </div> -->


                            </div>
                            <div id="records"></div>
                            <div class="row">
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-success addMore" style="margin-top: 30px;">
                                        <i class="icon-plus"></i> Add More
                                    </button>
                                </div>
                                <div class="col-md-2 ">
                                    <div class="form-group vendor_div">
                                        <label for="">Vendor</label>
                                        <select name="vendor_id" class="form-control vendor_id[]" id="vendor_id">
                                            <option value="">Please Select</option>
                                            @foreach ($vendors as $item)
                                            <option value="{{$item->id}}">{{$item->v_fname.' '.$item->v_lname}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="memo">Total Debit</label>
                                        <input type="text" name="total_debit" id="total_debit" placeholder="Total Debit" class="form-control" value="0">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="memo">Total Credit</label>
                                        <input type="text" name="total_credit" id="total_credit" placeholder="Total Credit" class="form-control " value="0">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                            <button type="button" class="btn btn-success" id="saveBtn">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('afterScript')
<script src="{{ asset('app-assets/vendors/js/core/jquery-3.3.1.min.js')}}"></script>

<script>
    $(document).on('keyup', '.debit', function() {
        var total_debit = 0;
        var debit = 0;
        $('.debit').each(function() {
            debit = $(this).val();


            if (debit == '') {
                debit = 0
            }
            total_debit = total_debit + parseInt(debit);
        });
        $('#total_debit').val(total_debit);
    });

    $(document).on('keyup', '.credit', function() {
        var total_credit = 0;
        var credit = 0;
        $('.credit').each(function() {
            credit = $(this).val();

            console.log("credit");

            console.log(credit);

            if (credit == '') {
                credit = 0
            }
            total_credit = total_credit + parseInt(credit);
        });
        $('#total_credit').val(total_credit);
    });

    $(document).ready(function() {
        $('.account_id,.bank_id').select2();
        var count = 1;
        $('.vendor_div').hide();
        $('.account_id').change(function() {
            if ($(this).val() == 26) {
                $('.vendor_div').show();
            }
        });

        $(document).on('click', '.addMore', function(e) {
            e.preventDefault();



            var html = '<div class="row" id="record_' + count + '">';
            html += '<div class="col-md-4">';
            html += '<div class="form-group">';
            html += '<label for="account_id">Select Account</label>';
            html += '<select name="account_id[]" id="account_id" required data-account="' + count + '" class="form-control account_id">';
            html += '<option value="" selected disabled>Select Account</option>';
            html += '@foreach ($banks as $b)';
            html += '<option data-name="bank" value="{{$b->id}}">{{$b->account_name}}-{{$b->banks->bank_name}}</option>';
            html += '@endforeach';
            html += '@foreach ($accounts as $a)';
            html += '<option data-name="account" value="{{$a->id}}">{{$a->name}}-{{$a->category}}</option>';
            html += '@endforeach';
            html += '</select>';
            html += '</div>';
            html += '</div>';
            html += '<input type="hidden" name="account_type[]" class="account_type_' + count + '">';
            html += '<input type="hidden" name="account_type_credit[]" class="account_type_credit_' + count + '">';
            html += '<div class="col-md-2">';
            html += '<div class="form-group">';
            html += '<label for="debit">Debit</label>';
            html += '<input type="number" name="debit[]" placeholder="Amount" class="form-control debit">';
            html += '</div>';
            html += '</div>';
            html += '<div class="col-md-2">';
            html += '<div class="form-group">';
            html += '<label for="credit">Credit</label>';
            html += '<input type="number" name="credit[]" placeholder="Amount" class="form-control credit">';
            html += '</div>';
            html += '</div>';
            // html +='<div class="col-md-4">';
            // html +='<div class="form-group">';
            // html +='<label for="bank_id">Select Account</label>';
            // html +='<select name="bank_id[]" data-account-credit="'+count+'" class="form-control bank_id">';
            // html +='<option value="" selected disabled>Select Account</option>';
            // html +='@foreach ($banks as $b)';
            // html +='<option data-name-credit="bank" value="{{$b->id}}">{{$b->account_name}}-{{$b->banks->bank_name}}</option>';
            // html +='@endforeach';
            // html +='@foreach ($accounts as $a)';
            // html +='<option data-name-credit="account" value="{{$a->id}}">{{$a->name}}-{{$a->category}}</option>';
            // html +='@endforeach';
            // html +='</select>';
            // html +='</div>';
            // html +='</div>';
            // html +='<div class="col-md-4">';
            // html +='<div class="form-group">';
            // html +='<label for="credit">Credit</label>';
            // html +='<input type="number" name="credit[]" placeholder="Amount" class="form-control">';
            // html +='</div>';
            // html +='</div>';
            html += '<div class="col-md-2">';
            html += '<div class="form-group">';
            html += '<label for="memo">Memo</label>';
            html += '<input type="text" name="memo[]" placeholder="Memo" class="form-control">';
            html += '</div>';
            html += '</div>';
            // html +='<div class="col-md-4">';
            // html +='<div class="form-group">';
            // html +='<label for="name">Name</label>';
            // html +='<select name="name[]" class="form-control name">';
            // html +='<option value="" selected disabled>Select Options</option>';
            // html +='@foreach ($clients as $client)';
            // html +='<option value="{{$client->id}}">{{$client->client_name}}-Client</option>';
            // html +='@endforeach';
            // html +='@foreach ($vendors as $v)';
            // html +='<option value="{{$v->id}}">{{$v->v_fname}}-Vendor</option>';
            // html +='@endforeach';
            // html +='</select>';
            // html +='</div>';
            // html +='</div>';
            html += '<div class="col-md-2 text-left text-md-right" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">';
            html += '<button class="btn btn-danger removeRecord" data-id="' + count + '">Remove</button>'
            html += '</div>';
            html += '</div>';

            $('#records').append(html);
            count = count + 1;
            $('.account_id,.bank_id').select2();

        });














        $(document).on('click', '.removeRecord', function(e) {
            e.preventDefault();

            var data_id = $(this).attr('data-id');
            $('#record_' + data_id).remove();
        });

        $(document).on('change', '.account_id', function() {
            var attr = $(this).attr('data-account');
            var type = $('[data-account=' + attr + '] option:selected').attr('data-name');
            console.log(type);
            $('.account_type_' + attr).val(type);
        });
        $(document).on('change', '.bank_id', function() {
            var attr = $(this).attr('data-account-credit');
            var type = $('[data-account-credit=' + attr + '] option:selected').attr('data-name-credit');
            console.log('Credit', type);
            $('.account_type_credit_' + attr).val(type);
        });

        $(document).on('click', "#saveBtn", function(e) {
            e.preventDefault();

            var total_debit = $("#total_debit").val();
            var total_credit = $("#total_credit").val();

            if (total_debit == total_credit) {

                var form_data = new FormData($("#generalJournalForm")[0]);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('general_journal.store') }}",
                    type: "POST",
                    data: form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function(res) {
                        swal("Inserted!", "Data has been Added Successfully!", "success");
                        setTimeout(function() {
                            location.reload(true);
                        }, 1000);
                    },
                    error: function(err) {
                        swal('Not Valid', err.responseJSON.message, 'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);

                    }
                });

            } else {

                swal('Not Valid', "Your Debit or Credit Is Not Balanced", 'error');
            }
        });
    });
</script>