@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/elite/bower_components/datatables/jquery.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('elite/tables/css/buttons.dataTables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />
@endpush


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

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

    @include('flash::message')

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

                {{ Form::open(['method'=>'post','route' => 'payments.save_bill']) }}
                <div class="row">

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{{ __('payments.vendor') }}:</label>
                            <select class="form-control compulsory required" name="vendor" id="vendor" required>
                                <option value="">-select-</option>
                                @foreach($suppliers as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                            <small><a href="#" data-toggle="modal" data-target="#addNewSupplier">{{ __('payments.add_vendor') }}</a></small>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div id="sDate">
                            <div class="form-group">
                                {{ Form::label('start_date', __('finance.bill_date')) }}
                                <div class="input-group">
                                    {{ Form::text('bill_date', '', ['class'=>'form-control required compulsory', 'readonly', 'id'=>'bill_date']) }}
                                    <span class="input-group-addon"><i class="icon-calender"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div  id="eDate">
                            <div class="form-group">
                                {{ Form::label('end_date', __('payments.bill_due_date')) }}
                                <div class="input-group">
                                    {{ Form::text('bill_due_date', '', ['class'=>'form-control required compulsory', 'readonly', 'id'=>'bill_due_date']) }}
                                    <span class="input-group-addon"><i class="icon-calender"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div  id="eDate">
                            <div class="form-group">
                                {{ Form::label('bill_number', __('payments.bill_number')) }}
                                {{ Form::text('bill_number', '', ['class'=>'form-control required compulsory', 'id'=>'bill_number']) }}
                            </div>
                        </div>
                    </div>

                </div>
                <hr/>
                <div class="row">
                    <div class="col-md-12">
                        <div class="" id="payments_items">
                            <table class="table color-bordered-table success-bordered-table">
                                <thead>
                                <tr>
                                    <th>
                                        <div class="row">
                                            <div class="col-1">#</div>
                                            <div class="col-2">{{ __('payments.item') }}</div>
                                            <div class="col-1">{{ __('payments.quantity') }}</div>
                                            <div class="col-1">{{ __('payments.unit_cost') }}</div>
                                            <div class="col-2">{{ __('payments.amount') }}</div>
                                            <div class="col-2">{{ __('payments.expense_account') }}</div>
                                            <div class="col-2">{{ __('payments.payable_account') }}</div>
                                            <div class="col-1">{{ __('payments.action') }}</div>
                                        </div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody class="input_fields_wrap">
                                <tr>
                                    <td>
                                        <div class="row">

                                            <div class="col-1">
                                                <label style="margin-top: 10px;">1.</label>
                                            </div>

                                            <div class="col-2">
                                                <div class=" control-group">
                                                    <div class="form-group">
                                                        <select name='item_id[]' id='item_0' class="form-control compulsory item_select" required>
                                                            <option>-select-</option>
                                                            @foreach($items as $item)
                                                                <option style='color: orange;' value='{{ $item->id }}'>
                                                                    {{ $item->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div><!-- Item -->

                                            @php
                                                $option_items = "<option value=''>-select-</option>";
                                                foreach ($items as $item){
                                                $option_items .= "<option value='$item->id'>$item->name</option>";
                                                }
                                                $back_date = \Streamline\Models\HospitalInformation::first()->pluck('back_date');
                                                $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

                                            <div class='col-1'>
                                                <div class="form-group">
                                                    <div class=''>
                                                        <input type='text' name='quantity[]' id ='quantity_0' value="1" class='form-control compulsory qty'>
                                                    </div>
                                                </div>
                                            </div><!-- Quantity -->

                                            <div class="col-1">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <input type="text" name="unit_cost[]" id="unit_cost_0" class="compulsory form-control unit_cost"/>
                                                    </div>
                                                </div>
                                            </div><!-- Unit Cost -->

                                            <div class="col-2">
                                                <div class="form-group">
                                                    <div class="controls">
                                                        <input type="text" name="amount[]" id="amount_0" class="compulsory form-control"/>
                                                    </div>
                                                </div>
                                            </div><!-- Amount -->

                                            <div class='col-2'>
                                                <div class="form-group">
                                                    <div class=''>
                                                        <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'>
                                                    </div>
                                                </div>
                                            </div><!-- Expense account -->

                                            <div class='col-2'>
                                                <div class="form-group">
                                                    <div class=''>
                                                        <input type='text' name='payable_acc_name[]' id ='payable_acc_name_0' class='form-control compulsory' readonly='true'>
                                                        <input type='hidden' name='payable_acc_id[]' id ='payable_acc_id_0'>
                                                    </div>
                                                </div>
                                            </div><!-- payable account -->

                                            <div class="col-1">
                                                <div class="form-group" style="margin-top: 10px;">
                                                    <button class="btn btn-sm btn-rounded btn-success add_item" style="color: white; margin-left: 25px;"><i class="fa fa-plus"></i></button>
                                                </div>
                                            </div>

                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label>{{ __('payments.bill_memo') }}</label>
                            <textarea  rows="7" class="form-control compulsory" name="bill_memo"></textarea>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group-group">
                            <label>{{ __('payments.total_amount') }}</label>
                            <div class="controls">
                                <input type="text" name="total_amount" id="total_amount" class="form-control compulsory" readonly='true'/>
                            </div>
                        </div>
                        <br/>
{{--                        <button class="btn btn-rounded btn-success" name="bill_action" value="pay">Pay Bill</button>--}}
                        <button class="btn btn-rounded btn-primary pull-right" name="bill_action" value="save">{{ __('payments.save_bill') }}</button>
                    </div>
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>

    <div class="modal fade" id="addNewSupplier" tabindex="-1" role="dialog" aria-labelledby="addNewSupplierLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addNewSupplierLabel">{{ __('payments.add_new_supplier') }}</h5>
                    <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="form-group">
                        {{ Form::label('supplier_name', __('payments.supplier_name')) }}
                        {{ Form::text('supplier_name', '', ['class'=>'form-control compulsory', 'required','id'=>'supplier_name']) }}
                    </div>

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

                    <div class="form-group">
                        {{ Form::label('supplier_contact', __('payments.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', __('payments.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">{{ __('payments.close') }}</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" id="saveNewSupplier">{{ __('payments.save_changes') }}</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <!-- Date Picker Plugin JavaScript -->
    <script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>

    <script>

        $('#saveNewSupplier').click(function(e){
            e.preventDefault();
            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
                        $('#vendor').append($('<option>', {
                            value: response,
                            text: supplier_name
                        }));
                        $('#vendor').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.')
                    }
                });
            }
        })

        $("[id^='item_check_']").each(function () {
            var i = parseInt(this.id.substr(this.id.indexOf("_") + 1));
        });

        $('#bill_term').on('change', function () {
            var date = $('#bill_date').datepicker("getDate"); //Get the Date object with actual date
            date.setDate(date.getDate() + parseInt($('#bill_term').val()));
            $("#bill_due_date").datepicker("setDate", date);
            $.ajax({
                type: "GET",
                url: "/payments/get_bill_number",
                cache: false,
                success: function (result) {
                    $('#bill_number').val(result);
                },
                error: function (error) {
                    alert('There was an error while generating the bill number.')
                }
            });
        });

        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
                $(wrapper).append("\
                \ <tr>\
                    <td>\
                <div class='row'>\n\
                     \
                     \<div class=\"col-1\">\
                         <label style=\"margin-top: 10px;\">" + (x)+ ". " +"</label>\
                     </div>\
                    <div class='col-2'>\n\
                        <div class='form-group'>" +
                    "<div class='controls'>\n\
                        <select name='item_id[]' id='item_" + x + "' class='form-control compulsory item_select'>" +

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

                    "</select>\n\
            </div>\n\
        </div>\n\
    </div>\n\
    \n\
    <div class='col-1'>\n\
        <div>\n\
            <div class='form-group'>" +
                    "<input type='text' name='quantity[]' value='1' id ='quantity_" + x + "' class='form-control compulsory qty'>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
        <div class='col-1'>\n\
            <div class='form-group'>\n\
                <input type='text' name='unit_cost[]' id='unit_cost_" + x + "' class='form-control compulsory' />\n\
            </div>\n\
        </div>\n\
        <div class='col-2'>\n\
            <div class='form-group'>" +
                 "<div class='controls'>\n\
                    <input type='text' name='amount[]' id='amount_" + x + "' class='form-control compulsory' />" +
                    "&nbsp;\n\
                </div>\n\
            </div>\n\
        </div>\n\
        <div class='col-2'>\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 class='col-2'>\n\
            <div>\n\
                <div class='form-group'>\n\
                    <input type='hidden' name='payable_acc_id[]' id ='payable_acc_id_" + x + "'>\n\
                    <input type='text' name='payable_acc_name[]' id ='payable_acc_name_" + x + "' class='form-control compulsory' readonly='true'>\n\
                </div>\n\
            </div>\n\
        </div>\n\
        \
        <div class=\"col-1\">\
             <div class=\"form-group\" style=\"margin-top: 10px;\">\
                  <button class=\" remove_field btn btn-sm btn-rounded btn-danger\" style=\"color: white; margin-left: 25px;\"><i class=\"fa fa-trash\"></i></button>\
             </div>\
         </div>\
    </div>  \
            </td>\
         </tr>"); //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('td').parent('tr').remove();

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

            $("[id^='amount_']").each(function () {
                final_total += Number($(this).val());
            });
            total_field.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 unit_cost = $("#unit_cost_" + id);
            var amount_field = $("#amount_" + id);
            var expense_acc_id = $("#expense_acc_id_" + id);
            var expense_acc_name = $("#expense_acc_name_" + id);
            var payable_acc_id = $("#payable_acc_id_" + id);
            var payable_acc_name = $("#payable_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) { //console.log(result);

                    unit_cost.val(result[1]);
                    amount_field.val(result[0]);

                    $("[id^='amount']").each(function () { //console.log(this.value);
                        final_total += Number($(this).val());
                    });
                    total_field.val(final_total);
                },
                error: function (error) {
                    alert('Something Went Wrong, Please Contact Support.')
                }
            });

        });

        $("#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);
        });

        $(".input_fields_wrap").on('change', "[id^='unit_cost_']", function () {
            var id = /\d+(?=\D*$)/.exec($(this).attr('id'));
            var quantity = $("#quantity_" + id).val();
            var unit_cost = this.value;

            $('#amount_'+id).val(parseInt(quantity) * parseInt(unit_cost));
        });
    </script>

    <script type="text/javascript">
        // display the appropriate price of the service
        function show_service_price(item_id, prompt_div_id) {
            // get patient id
            let patient_id = $('#patient_id').val();

            $.ajax({
                method: 'POST',
                url: '/payments/get_payment_item_details',
                data: {'item_id' : item_id},

                success: function(response){

                    // add amount to div
                    $('#' + (prompt_div_id - 1000)).html(response);

                    // enable button for calculating
                    $('#calculate_button').attr('disabled', false);
                }
            });
        }

        // display the appropriate price of the service
        function show_acc_bal(bank_id) {

            $.ajax({
                method: 'POST',
                url: '/payments/get_account_balance',
                data: {'bank_id' : bank_id},

                success: function(response){

                    var acc_bal = response[0].balance;
                    var total_cost = $('#total_amount').val(); //console.log(total_cost > acc_bal)

                    $('#account_balance').val(acc_bal);
                    $('#bank_id').val(response[0].id);

                    if(acc_bal <= 0){
                        alert('Account Balance is Zero(0) UGX');
                        $('.submit_btn').hide();
                    }
                    else
                    if(total_cost > acc_bal){
                        alert('Your Account Balance is low');
                        $('.submit_btn').hide();
                    }
                    else{
                        alert('Are you sure you want proceed with this payment ?');
                        $('.submit_btn').show();
                    }
                },
                error: function (error) {
                    // console.log(error);
                }
            });
        }

        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 bank_deposit(cashier_income_id, amount) {
            $('#deposit_amount').val(amount);
            $('#cashier_income_id').val(cashier_income_id);
            $('#banking_modal').modal('show');
        }

        $('#confirm_deposit').click(function () {

            var cashier_income_id = $('#cashier_income_id').val();
            var deposit_amount = $('#deposit_amount').val();
            var deposit_account = $('#deposit_account').val();
            var deposit_date = $('#deposit_date').val();

            $.ajax({
                method: 'POST',
                url: '/banking/quick_bank_deposit',
                data: {
                    'cashier_income_id' :  cashier_income_id,
                    'deposit_amount' : deposit_amount,
                    'deposit_account' : deposit_account,
                    'deposit_date' : deposit_date,
                },

                success: function(response){
                    console.log(response);
                    $('#banking_modal').modal('hide');
                    $('#bank_' + cashier_income_id).hide();
                    $('#div_' + cashier_income_id).append("<label class='label label-success'>BANKED</label>");
                },
                error: function (error) {
                    console.log(error);
                }
            });
        });

        function get_acc_bal(bank_id) {
            $.ajax({
                method: 'POST',
                url: '/banking/get_current_account_balance',
                data: {'bank_id' : bank_id},

                success: function(response){
                    var acc_bal = response[0].balance;
                    var amount = $('#deposit_amount').val();
                    $('#current_account_balance').val(acc_bal);
                    $('#new_account_balance').val(acc_bal + parseInt(amount));
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
    </script>
    <script src="{{ asset('elite/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/jszip.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('elite/tables/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('elite/tables/js/buttons.print.min.js') }}"></script>
    <script type="text/javascript">

        jQuery('#end_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd-mm-yyyy'
        });
    </script>

    <script type="text/javascript">
        let min_days = <?php echo $back_date[0]; ?>;
        var min_date = new Date();
        min_date.setDate(min_date.getDate()-min_days);
        $('#bill_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            endDate: new Date(),
            startDate:  min_date,
            format: 'dd-mm-yyyy'
        });
        $('#bill_due_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            startDate:  new Date(),
            format: 'dd-mm-yyyy'
        });
    </script>

    <script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>

    <script>
        $('#staff_member, #vendor, .item_select').select2({
            placeholder: "-select-"
        });
    </script>
@endpush