@extends('layouts.main')

@push('styles')
<link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />
<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" />
<style type="text/css">
    #discounts_table td {
        border-left: 1px solid #dddddd;
    }

    #paid_services_table td {
        border-left: 1px solid #dddddd;
    }

    #services_table td {
        border-left: 1px solid #dddddd;
    }
</style>
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-md-7">
        <h4>{{ __('payments.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.new_payment') }}</li>
        </ol>
    </div>
</div>

@include('expenses::payments.menu')

<div class="white-box">
    @include('flash::message')

    {{ Form::open(['route' => 'payments.make_payment', 'data-toggle' => 'validator', 'data-confirm' => 'Are you sure you want proceed with this payment?']) }}

    <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') }}
                                    <a class="label label-success add_item" style="color: white; margin-left: 25px;">{{ __('payments.add_item') }}</a>
                                </div>
                                <div class="col text-right">
                                    {{-- <a href="{{ route('payments.streamline_bill') }}" class="label label-success">Generate Stre@mline Bill</a>--}}
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="input_fields_wrap">
                                <div class="row">
                                    <div class="span1"></div>
                                    <div class="col">
                                        <div class=" control-group">
                                            <label class="control-label" for="item">{{ __('payments.payment_items') }}</label>
                                            <div class="form-group">
                                                <select name='item_id[]' id='item_0' class="form-control item_id">
                                                    <option>-select-</option>
                                                    @foreach($items as $item)
                                                        <option style='color: orange;' value='{{ $item->id }}'>{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col">
                                        <div class=" control-group">
                                            <label class="control-label" for="item">{{ __('payments.vendor_slash_supplier') }}</label>
                                            <div class="form-group">
                                                <select name='supplier_id[]' id='supplier_id_0' class="form-control vendor_id">
                                                    <option>-select-</option>
                                                    @foreach($suppliers as $item)
                                                        <option style='color: orange;' value='{{ $item->id }}'>{{ $item->name }}</option>
                                                    @endforeach
                                                    <option style='color: orange;' value="N/A">N/A</option>
                                                </select>
                                                <small><a href="#" data-toggle="modal" class="pull-right" onclick="show_add_supplier_modal(0)">{{ __('payments.add_vendor') }}</a></small>
                                            </div>
                                        </div>
                                    </div>

                                    @php
                                        $back_date = \Streamline\Models\HospitalInformation::first()->pluck('back_date');

                                        $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>";

                                        $option_expense_accounts = "<option value=''>-select-</option>";
                                        foreach ($expense_accounts as $exp_account){
                                            $option_expense_accounts .= "<option value='$exp_account->id'>$exp_account->name</option>";
                                        }
                                    @endphp

                                    <div class='col'>
                                        <div class="form-group">
                                            <label class='control-label'>{{ __('payments.quantity') }}</label>
                                            <div>
                                                <input type='number' name='quantity[]' id='quantity_0' value="1" class='form-control compulsory qty'>
                                            </div>
                                        </div>
                                    </div>                                    

                                    <div class="col">
                                        <div class="form-group">
                                            <label class="control-label">{{ __('payments.amount') }}</label>
                                            <div class="controls">
                                                <input type="number" name="amount[]" id="amount_0" class="compulsory form-control" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class='col'>
                                        <div class="form-group">
                                            <label class='control-label'>{{ __('payments.item_memo') }}</label>
                                            <div>
                                                <input type='text' name='item_memo[]' id='item_memo_0' value="" class='form-control item_memo'>
                                            </div>
                                        </div>
                                    </div>

                                    <div class='col'>
                                        <div class="form-group">
                                            <label class='control-label'>{{ __('payments.expense_account') }}</label>
                                            <div>
                                                @if (Auth::user()->can('change-expense-account-on-make-payment'))
                                                    @php $can_change_expense_account = 1; @endphp
                                                    <select name='expense_acc_id[]' id='expense_acc_id_0' class="form-control compulsory expense_acc_id" required>
                                                        <?php echo $option_expense_accounts; ?>
                                                    </select>
                                                @else
                                                    @php $can_change_expense_account = 0; @endphp
                                                    <input type='text' name='expense_acc_name[]' id='expense_acc_name_0' class='form-control compulsory' readonly='true'>
                                                    <input type='hidden' name='expense_acc_id[]' id='expense_acc_id_0'>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <table class="table color-bordered-table success-bordered-table">
                    <thead>
                    <tr>
                        <th colspan="8">{{ __('payments.payment') }}</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">
                                <select class="form-control compulsory required select_items" name="bank" id="bank" required>
                                    <option value="">{{ __('finance.select') }}</option>
                                    @foreach($banks as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </td>

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

                        <td colspan="2">
                            <div class="form-group">
                                {{ Form::text('account_balance', 0, ['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' />
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="8">
                            <div class="row">
                                <div class="col-md-6">
                                    <br />
                                    <div class="form-group">
                                        {{ Form::textarea('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.submit_payment'), ['class'=>'btn btn-success', 'id'=>'save_payment']) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {{ Form::close() }}
</div>

<div class="modal" id="add_new_vendor_modal" tabindex="-1" role="dialog" aria-labelledby="add_new_vendor_modal_label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row" style="padding: 10px;">
                    <div class="col-sm-12 text-left">
                        <h4>Add New Vendor</h4>
                    </div>
                </div>
            </div>

            <div class="modal-body">
                <div class="form-group">
                    {{ Form::label('supplier_name', 'Vendor Name') }}
                    {{ Form::text('supplier_name', '', ['class'=>'form-control compulsory', 'required','id'=>'supplier_name']) }}
                </div>

                <input id="input_id" type="hidden">

                <div class="form-group">
                    {{ Form::label('supplier_company', 'Company') }}
                    {{ Form::text('supplier_company', '', ['class'=>'form-control compulsory', 'required','id'=>'supplier_company']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('supplier_contact', 'Mobile Number') }}
                    {{ Form::text('supplier_contact', '', ['class'=>'form-control compulsory', 'data-mask'=>"0799 999 999", 'required','id'=>'supplier_contact']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('supplier_address', 'Address') }}
                    {{ Form::text('supplier_address', '', ['class'=>'form-control compulsory', 'required','id'=>'supplier_address']) }}
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" data-dismiss="modal" onclick="save_supplier()">Save changes</button>
            </div>
        </div>
    </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 src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>
<script type="text/javascript">
    function show_add_supplier_modal(id) {
        $('#input_id').val(id);
        $('#add_new_vendor_modal').modal('show');
    }

    function save_supplier() {

        let row_id = $('#input_id').val();
        var supplier_name = $('#supplier_name').val();
        var supplier_company = $('#supplier_company').val();
        var supplier_contact = $('#supplier_contact').val();
        var supplier_address = $('#supplier_address').val();

        let has_errors = false;
        let error_messages = "";

        if (supplier_name === '') {
            error_messages += "Please fill in the supplier's name\n";
            has_errors = true;
        }

        if (supplier_company === '') {
            error_messages += "Please fill in the supplier's company \n";
            has_errors = true;
        }

        if (supplier_contact === '') {
            error_messages += "Please fill in the supplier's contact \n";
            has_errors = true;
        }

        if (supplier_address === '') {
            error_messages += "Please fill in the supplier's address \n";
            has_errors = true;
        }
        if (has_errors) {
            alert(error_messages);
        } else {
            $.ajax({
                url: '/save_new_supplier',
                type: 'get',
                data: {
                    supplier_name: supplier_name,
                    supplier_company: supplier_company,
                    supplier_contact: supplier_contact,
                    supplier_address: supplier_address
                },
                success: function(response) {
                    //response = last inserted id
                    $('#supplier_id_' + row_id).append($('<option>', {
                        value: response,
                        text: supplier_name
                    }));
                    $('#supplier_id_' + row_id).val(response); //preselect the newly added referral
                    alert('new supplier has been added');
                },
                error: function(response) {
                    // console.log('there was an error');
                    alert('There was an error, Contact IT.')
                }
            });
        }
    }

    $('#saveNewSupplier').click(function(e) {
        e.preventDefault();
    });
    
    let min_days = <?php echo $back_date[0]; ?>;
    let can_change_exp_account = <?php echo $can_change_expense_account; ?>;
    //console.log("can change account =="+can_change_exp_account);
    var min_date = new Date();
    min_date.setDate(min_date.getDate()-min_days);
    $('#expense_date').datepicker({
        autoclose: true,
        todayHighlight: true,
        endDate: new Date(),
        startDate:  min_date,
        format: 'dd-mm-yyyy'
    }); 

    var max_fields = 20; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_item"); //Add button ID

    var x = 1; //initlal text box count

    $(add_button).click(function(e) { //on add input button click
        e.preventDefault();

        if (x < max_fields) { //max input box allowed
            x++; //text box increment

            let expense_acc_options = "<input type='hidden' name='expense_acc_id[]' id ='expense_acc_id_" + x + "'><input type='text' name='expense_acc_name[]' id ='expense_acc_name_" + x + "' class='form-control compulsory' readonly='true'>";

            if(can_change_exp_account == 1){
                expense_acc_options = "<select name='expense_acc_id[]' id='expense_acc_id_" + x + "' class='form-control compulsory expense_acc_id_" + x + "' required>" +
                "<?php echo $option_expense_accounts; ?>" +
                "</select>";
            }

            $(wrapper).append("\
                <div class='row'>\n\
                    <div class='span1'></div>\n\
                    <div class='col'>\n\
                        <div class='form-group'>" +
                "<div class='controls'>\n\
                        <select name='item_id[]' id='item_" + x + "' class='form-control compulsory'>" +

                "<?php echo $option_items; ?>" +

                "</select>\n\
            </div>\n\
        </div>\n\
    </div>\n\
    \<div class='col'>\n\
        <div class='form-group'>" +
            "<div class='controls'>\n\
                <select name='supplier_id[]' id='supplier_id_" + x + "' class='form-control compulsory'>" +

                "<?php echo $option_suppliers; ?>" +

                "</select>\n\
            </div>\n\
            <small><a href='#' data-toggle='modal' class='pull-right' onclick='show_add_supplier_modal(" + x + ")'>add vendor</a></small>\n\
        </div>\n\
    </div>\n\
    <div class='col'>\n\
        <div>\n\
            <div class='form-group'>" +
                "<input type='number' name='quantity[]' value='1' id ='quantity_" + x + "' class='form-control compulsory qty'>\n\
            </div>\n\
        </div>\n\
    </div>\n\
    <div class='col'>\n\
        <div class='form-group'>" +
            "<div class='controls'>\n\
                <input type='number' name='amount[]' id='amount_" + x + "' class='form-control compulsory' />" +
                "<br/>" +
                "&nbsp;<a href='#' class='remove_field label label-danger' style='margin-top:5px;'>delete</a>\n\
            </div>\n\
        </div>\n\
    </div>\n\
    <div class='col'>\n\
        <div>\n\
            <div class='form-group'>" +
                "<input type='text' name='item_memo[]' value='' id ='item_memo_" + x + "' class='form-control item_memo'>\n\
            </div>\n\
        </div>\n\
    </div>\n\
    <div class='col'>\n\
        <div>\n\
            <div class='form-group'>\n\
                "+expense_acc_options+"'\n\
                </div>\n\
                    </div>\n\
                </div>\n\
            </div>\n\
        </div>\n\
    </div>\n\
        "); //add input box
        }
        generalSelect2Set('item_'+x);
        generalSelect2Set('supplier_id_'+x);
        genSelect2Set('expense_acc_id_'+x);

        $('.select2-selection.select2-selection--single').css('border-left', '3px solid #F08080');/*add compulsory class*/
        $('.select2-selection.select2-selection--single.sec_d').css('border-left', '3px solid #aaa');
        $('.select2-selection__arrow').css('top','3px');
        //$('.select2-selection.select2-selection--single').css('height','calc(3.85rem)');
    });

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

        let final_total = 0;

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

        $("#total_amount").val(final_total);
        x--;
    });

    $(".input_fields_wrap").on('change', "select, .qty", 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: "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);
                }
                // if (result[1] != null) {
                //     payable_acc_id.val(result[1].id);
                //     payable_acc_name.val(result[1].name);
                // }
                // console.log(result);
            },
            error: function(error) {
                //console.log(error);
            }
        });

        var dataString = "item_id=" + item_id + "&quantity=" + quantity;
        // console.log(dataString);
        $.ajax({
            type: "POST",
            url: "total_price",
            data: dataString,
            cache: false,
            success: function(result) {

                amount_field.val(result[0]); //console.log(result)
                $("[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);
    });

    $('#expense_date').change(function() {
        var bank = $('#bank').val();
        var is_payment_of_greater_expense_allowed = <?php echo is_payment_of_greater_expense_allowed(); ?>;
        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');
                            if (is_payment_of_greater_expense_allowed === 1) {
                                $('.submit_btn').show();
                            } else{
                                $('.submit_btn').hide();
                            }
                        } else if (parseInt(total_amount) > account_balance) {
                            alert('Your Account Balance is low');
                            if (is_payment_of_greater_expense_allowed === 1) {
                                $('.submit_btn').show();
                            } else{
                                $('.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('');
        }
    });

    $('#bank').change(function() {
        var bank = $('#bank').val();
        var total_amount = $('#total_amount').val();
        var account_balance_input = $('#account_balance');
        var expense_date = $('#expense_date').val();
        console.log("expense date == "+expense_date);
        var is_payment_of_greater_expense_allowed = <?php echo is_payment_of_greater_expense_allowed(); ?>;
        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;

        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');
                        if (is_payment_of_greater_expense_allowed === 1 && expense_date != '') {
                            $('.submit_btn').show();
                        } else{
                            $('.submit_btn').hide();
                        }
                    } else if (parseInt(total_amount) > account_balance) {
                        alert('Your Account Balance is low');
                        if (is_payment_of_greater_expense_allowed === 1 && expense_date != '') {
                            $('.submit_btn').show();
                        } else{
                            $('.submit_btn').hide();
                        }
                    } else {
                        if (expense_date != '') {
                            $('.submit_btn').show();
                        } else {
                            $('.submit_btn').hide();
                        }
                    }

                },
                error: function(error) {
                    console.log(error);
                }
            });
        } else {
            alert('Please Select A Bank Account.');
            $(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);
    }

    function generalSelect2Set(id) {
        $('#'+id).select2({
            //width: "100%"
        });
    } 

    function genSelect2Set(expe){
        $('.'+expe).select2({
            //width: "100%"
        });
    }

    // 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();
        });

        $('.item_id, .vendor_id, .expense_acc_id, #bank').select2({
            //width: "100%"
        });

        $('.select2-selection.select2-selection--single').css('border-left', '3px solid #F08080');/*add compulsory class*/
        $('.select2-selection.select2-selection--single.sec_d').css('border-left', '3px solid #aaa');
        $('.select2-selection__arrow').css('top','3px');
        $('.select2-selection.select2-selection--single').css('height','calc(3.85rem)');
    });
</script>
@endpush