@extends('layouts.main')

@push('styles')
<link href="{{ asset('elite/bower_components/typeahead.js-master/dist/typehead-min.css') }}" rel="stylesheet">
<link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-md-7">
        <h4>{{ __('payments.edit_payments') }}</h4>
    </div>
    <div class="col-md-5">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> {{ __('payments.home') }}</a></li>
            <li><a href="{{ route('finance') }}"><i class="fa fa-money"></i> {{ __('payments.finance_home') }}</a></li>
            <li class="active"><i class="fa fa-credit-card"></i> {{ __('payments.edit_payments') }}</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-12">

        @include('flash::message')

        {{ Form::model($trans_id ,['method' => 'PATCH', 'route' => ['payments.update_payments', $trans_id], 'data-toggle' => 'validator', 'data-confirm' => 'Are you sure you want to update these payments?']) }}
        {{ Form::hidden('trans_id', $trans_id) }}
        <div class="white-box" style="background-color: #F5FFFA">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col">
                            <div class="panel panel-default" id="payments_items">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col text-left">
                                            {{ __('payments.items') }}
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="span1"></div>
                                        <div class="col">
                                            <label class="control-label" for="item">{{ __('payments.payment_items') }}</label>
                                        </div>

                                        <div class="col">
                                            <label class="control-label" for="item">{{ __('payments.vendor_slash_supplier') }}</label>
                                        </div>

                                        <div class='col'>
                                            <label class='control-label' class=''>{{ __('payments.quantity') }}</label>
                                        </div>

                                        <div class="col">
                                            <label class="control-label">{{ __('payments.amount') }}</label>
                                        </div>

                                        <div class='col'>
                                            <label class='control-label' class=''>{{ __('payments.expense_account') }}</label>
                                        </div>
                                    </div>

                                    <div class="input_fields_wrap">
                                        @if(count($payments) > 0)
                                        @foreach($payments as $item)
                                        <div class="row">
                                            <div class="span1"></div>
                                            <div class='col'>
                                                <div class='form-group'>
                                                    <div class='controls'>
                                                        <select name="item_id[]" id="item_{{$item->id}}" class="form-control compulsory">
                                                            {!! custom_dropdown_selected("payment_items", "id", "name", $item->item_id) !!}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col'>
                                                <div class='form-group'>
                                                    <div class='controls'>
                                                        <select name="supplier_id[]" id="supplier_id_{{$item->id}}" class="form-control compulsory">
                                                            {!! custom_dropdown_selected("suppliers", "id", "name", $item->vendor) !!}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col'>
                                                <div>
                                                    <div class='form-group'>
                                                        <input type="number" min="0" name="quantity[]" value="{{$item->quantity}}" id="quantity_{{$item->id}}" class="form-control compulsory qty">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col'>
                                                <div class='form-group'>
                                                    <div class='controls'>
                                                        <input type="number" min="0" name="amount[]" id="amount_{{$item->id}}" class="form-control compulsory amt" value="{{$item->amount}}" />
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col'>
                                                <div>
                                                    <div class='form-group'>
                                                        @php $expense_acc_name = get_name($item->expense_account, 'id', 'name', 'chart_of_accounts'); @endphp
                                                        <input type="hidden" name="expense_acc_id[]" id="expense_acc_id_{{$item->id}}" value="{{$item->expense_account}}">
                                                        <input type="text" name="expense_acc_name[]" id="expense_acc_name_{{$item->id}}" class="form-control compulsory" readonly="true" value="{{$expense_acc_name}}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach


                                        <div class="row">

                                            @php
                                            $option_items = "<option value=''>-select-</option>";
                                            foreach ($items as $item){
                                            $option_items .= "<option value='$item->id'>$item->name</option>";
                                            }

                                            $option_suppliers = "<option value=''>-select-</option>";
                                            foreach ($suppliers as $item){
                                            $option_suppliers .= "<option value='$item->id'>$item->name</option>";
                                            }
                                            $option_suppliers .= "<option value='N/A'>N/A</option>";
                                            @endphp

                                            <!-- Commented out till a required feature -->
                                            <!--
                                                <div class="col-sm-12">
                                                    <a class="label label-success add_item pull-right" style="color: white; margin-left: 25px;">Add item</a>
                                                    <br />
                                                </div>
                                            -->
                                        </div>

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

                            @endif
                        </div><!-- Payment Items -->
                    </div>
                </div>
            </div>

            <div class="col">
                <table class="table color-bordered-table success-bordered-table">
                    <thead>
                        <tr>
                            <th colspan="8">{{ __('payments.payment') }}: #{{ $trans_id }}</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td colspan="2">{{ __('finance.account_to_pay_from') }}:</td>
                            <td colspan="2">{{ __('finance.date_of_expense') }}:</td>
                            <td colspan="2">{{ __('finance.current_account_balance') }}:</td>
                            <td colspan="2">{{ __('finance.payment_items_total') }}:</td>
                        </tr>

                        <tr>
                            <td colspan="2">
                                <div class="form-group compulsory required">
                                    @php $bank_name = get_name($bank, 'id', 'name', 'chart_of_accounts') @endphp
                                    {{ Form::text('bank', $bank_name, ['class'=>'form-control compulsory', 'id'=>'bank', 'readonly']) }}
                                </div>
                            </td>

                            <td colspan="2">
                                <div class="form-group">
                                    <div class="input-group">
                                        {{ Form::text('expense_date', \Carbon\Carbon::parse($expense_date)->format('d-m-Y'), ['class'=>'form-control required compulsory', 'id'=>'expense_date', 'readonly']) }}
                                        <span class="input-group-addon"><i class="icon-calender"></i></span>
                                    </div>
                                </div>
                            </td>

                            <td colspan="2">
                                <div class="form-group">
                                    {{ Form::text('account_balance', $bank_balance, ['class'=>'form-control compulsory', 'id'=>'account_balance', 'readonly']) }}
                                </div>
                            </td>

                            <td colspan="2">
                                <div class="form-group-group">
                                    <div class="controls">
                                        <input type="number" name="total_amount" id="total_amount" class="form-control compulsory" readonly='true' value="{{$payments_total}}" />
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td colspan="8">
                                <div class="row">
                                    <div class="col-md-6">
                                        <br />
                                        <div class="form-group">
                                            {{ Form::textarea('memo', $memo, ['class'=>'form-control compulsory', 'placeholder'=>'Memo']) }}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <br />
                                        <div class="row">
                                            <div class="form-group col-md-4 submit_btn" style="display: none">
                                                {{ Form::submit(__('payments.update_payment'), ['class'=>'btn btn-success', 'id'=>'update_payment']) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>

        </div>
        {{ Form::close() }}
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('elite/js/validator.js') }}"></script>
<script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript">
    // disabled intentionally until it's a required feature
    // $('#expense_date').datepicker({
    //     autoclose: true,
    //     todayHighlight: true,
    //     format: 'dd-mm-yyyy',
    // });

    var x = parseInt("{!!json_encode($max_id) !!}"); //initial text box count
    var max_fields = x + 20; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_item"); //Add button ID


    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append("\
                <div class='row'>\n\
                    <div class='span1'></div>\n\
                    \n\
                    <div class='col'>\n\
                        <div class='form-group'>\n\
                            <div class='controls'>\n\
                                <select name='item_id[]' id='item_" + x + "' class='form-control compulsory'>\n\
                                    <?php echo $option_items; ?>\n\
                                </select>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                    \n\
                    <div class='col'>\n\
                        <div class='form-group'>\n\
                            <div class='controls'>\n\
                                <select name='supplier_id[]' id='supplier_id_" + x + "' class='form-control compulsory'>\n\
                                    <?php echo $option_suppliers; ?>\n\
                                </select>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                    \n\
                    <div class='col'>\n\
                        <div>\n\
                            <div class='form-group'>\n\
                                <input type='number' min=0 name='quantity[]' value=1 id ='quantity_" + x + "' class='form-control compulsory qty'>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                    \n\
                    <div class='col'>\n\
                        <div class='form-group'>\n\
                            <div class='controls'>\n\
                                <input type='number' min=0 name='amount[]' value=0 id='amount_" + x + "' class='form-control compulsory amt' />\n\
                                <br/>\n\
                                &nbsp;<a href='#' class='remove_field label label-danger' style='margin-top:5px;'>delete</a>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                    \n\
                    <div class='col'>\n\
                        <div>\n\
                            <div class='form-group'>\n\
                                <input type='hidden' name='expense_acc_id[]' id ='expense_acc_id_" + x + "'>\n\
                                <input type='text' name='expense_acc_name[]' id ='expense_acc_name_" + x + "' class='form-control compulsory' readonly='true'>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                </div>\n\
            "); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').parent('div').parent('div').parent('div').remove();

        var final_total = 0;
        var total_field = $("#total");

        $("[id^='amount_']").each(function() {
            final_total += Number($(this).val());
        });
        total_field.val(final_total);
        x--;
    });

    $(".input_fields_wrap").on('change', "select, .qty .amt", function() {

        var id = parseInt(this.id.substr(this.id.indexOf("_") + 1));

        var item_id = $("#item_" + id).val(); //console.log(item_id)
        var quantity = $("#quantity_" + id).val();
        var amount_field = $("#amount_" + id);
        var expense_acc_id = $("#expense_acc_id_" + id);
        var expense_acc_name = $("#expense_acc_name_" + id);
        var total_field = $("#total_amount");
        var final_total = 0;

        if (item_id === "" || quantity === "") {
            alert("Item and quantity are required");
            amount_field.val("");
            return false;
        }

        $.ajax({
            type: 'POST',
            url: '/payments/get_expense_acc',
            data: {
                'item_id': item_id
            },
            cache: false,
            success: function(result) {
                if (result[0] != null) {
                    expense_acc_id.val(result[0].id);
                    expense_acc_name.val(result[0].name);
                }
            },
            error: function(error) {
                //console.log(error);
            }
        });

        var dataString = "item_id=" + item_id + "&quantity=" + quantity;
        $.ajax({
            type: 'POST',
            url: '/payments/total_price',
            data: dataString,
            cache: false,
            success: function(result) {
                //console.log(result)
                amount_field.val(result[0]);
                $("[id^='amount']").each(function() {
                    final_total += Number($(this).val());
                });
                total_field.val(final_total);
            },
            error: function(error) {
                //console.log(error)
            }
        });

    });

    $("#payments_items").focusout(function(e) {
        var total_amount = 0;
        $("[id^=amount]").each(function() {
            var auto_price = $(this).val();
            var auto_price_integer = parseInt(auto_price);
            total_amount += auto_price_integer;
        });
        if (total_amount === "NaN") {
            total_amount = 0;
        }
        $("#total_amount").val(total_amount);

        // determine if submit_btn should display
        if (total_amount > 0) {
            $('.submit_btn').show();
        } else {
            $('.submit_btn').hide();
        }
    });
</script>

<script type="text/javascript">
    $('#expense_date').change(function() {
        var bank = $('#bank').val();
        var date = $(this).val();
        var date_parts = date.split("-");
        const dateExpense = new Date(date_parts[2] + '-' + date_parts[1] + '-' + date_parts[0] + 'T00:00:00'); // yyyy-mm-ddThh:mm:ss

        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
        var yyyy = today.getFullYear();
        var today_formatted = dd + '-' + mm + '-' + yyyy;

        const diffTime = Math.abs(today - dateExpense); // milliseconds
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // div by milliseconds in a day

        // Ask if they want to transact beyond 90 days!!!
        var proceed = true;
        if (diffDays > 90) {
            proceed = confirm('This transaction will be older than 90 days!!! Are you sure you want proceed with this payment?');
        }

        var total_amount = $('#total_amount').val();
        var account_balance_input = $('#account_balance');

        if (proceed == true) {
            if (bank !== '') {
                // Current Account Balance
                $.ajax({
                    method: 'POST',
                    url: '/banking/get_current_account_balance_per_date',
                    data: {
                        'bank': bank,
                        'date': today_formatted
                    },
                    async: true,
                    success: function(response) {
                        var bank_record = JSON.parse(response);
                        var account_balance = bank_record['account_balance'];
                        account_balance_input.val(account_balance);

                        if (account_balance <= 0) {
                            alert('Account Balance is Zero(0) UGX');
                            $('.submit_btn').hide();
                        } else if (parseInt(total_amount) > account_balance) {
                            alert('Your Account Balance is low');
                            $('.submit_btn').hide();
                        } else {
                            $('.submit_btn').show();
                        }

                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            } else {
                alert('Please Select A Bank Account.');
                $(this).val('');
            }
        } else {
            $(this).val('');
        }
    });

    function calculate_values() {
        let total_amount = 0;

        // calculate total amount
        $('.amt').each(function() {
            total_amount += parseInt(this.value);
        });
        // console.log(total_amount);
        // show total amount to pay
        $('#total').val(total_amount);

    }

    function change_amt(qty) {
        let px = $('.amt').val();
        var total_unit_cost = qty * px;
        // console.log(total_unit_cost);
        $('#amt').val(total_unit_cost);
    }

    // Prevent making payment if user opts out
    $(document).ready(function() {
        // Select the submit buttons of forms with data-confirm attribute
        var submit_buttons = $("form[data-confirm] input[type='submit']");

        // On click of one of these submit buttons
        submit_buttons.on('click', function(e) {
            e.preventDefault();

            var button = $(this);
            var form = button.closest('form'); // Get the related form
            var msg = form.data('confirm'); // Get the confirm message

            if (confirm(msg)) form.submit();
        });
    });
</script>
@endpush