@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" />
    <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.make_payment') }}</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.make_payment') }}</li>
            </ol>
        </div>
    </div>



    <div class="row">
        <div class="col-md-10 offset-1">

            @include('flash::message')

            <div class="white-box" style="background-color: #F5FFFA">

                <div class="row">
                    <div class="col-md-12">
                        <div class="pull-left">
                            <address>
                                <h3> &nbsp;<b class="text-danger">{{ $hospital_information->name }}</b></h3>
                                <p class="text-muted m-l-5">{{ $hospital_information->phone_number }}, {{ $hospital_information->email }},
                                    <br/> {{ get_name($hospital_information->sub_county,'id', 'name', 'subcounties') }}, {{ get_name($hospital_information->district,'id', 'name', 'districts') }},
                                    <br/> {{ $hospital_information->country }}.</p>
                            </address>
                        </div>
                        <div class="pull-right text-right">
                            <address>
                                <p class="m-t-30"><b>{{ __('payments.payment_date') }} : </b> <i class="fa fa-calendar"></i> {{ streamline_date_time(\Carbon\Carbon::now()->toDateTimeString()) }}</p>
                            </address>
                        </div>
                        <br/>
                    </div>
                </div>
                <!-- check if there are registered service items, display error if not -->
                <br/>
                {{ Form::open(['route' => 'payments.make_payment', 'data-toggle' => 'validator']) }}

                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="row">
                                            <div class="col text-left">
                                                {{ __('payments.items') }}
                                            </div>
                                            <div class="col text-right">
                                                <button class="btn btn-success btn-sm btn-rounded">{{ __('payments.ADD_PAYMENT_ITEM') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class="input_fields_wrap" id="payments_items">
                                            <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">
                                                                <option>-select-</option>
                                                                @foreach($items as $item)
                                                                    <option style='color: orange;' value='{{ $item->id }}'>{{ $item->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div><!-- Item -->

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

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

                                                <div class="col">
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-6 text-left">
                                                                <label class="control-label">{{ __('payments.amount') }}</label>
                                                            </div>
                                                            <div class="col-md-6 text-right">
                                                                <label class="label label-info" id="edit_item_0" style="display: none;">{{ __('payments.edit_unit_price') }}</label>
                                                            </div>
                                                        </div>

                                                        <div class="controls">
                                                            <input type="text" name="amount[]" id="amount_0" class="compulsory form-control"/>
                                                        </div>
                                                        <span style="margin-bottom: 4px; font-size: x-small; float: right;" id="unit-cost_0"></span>
                                                    </div>
                                                </div>

                                                <div class='col'>
                                                    <div class="form-group">
                                                        <label class='control-label' class=''>{{ __('payments.expense_account') }}</label>
                                                        <a class="label label-success add_item" style="color: white; margin-left: 25px;">{{ __('payments.add_item') }}</a>
                                                        <div class=''>
                                                            <input type='text' name='expense_accn[]' id ='expense_accn_0' class='form-control compulsory' readonly='true'>
                                                        </div>
                                                    </div>
                                                </div><!-- Expense account -->


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

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <table class="table color-bordered-table success-bordered-table">
                                <thead>
                                <tr>
                                    <th colspan="6"><b>{{ __('payments.payment') }}</b></th>
                                </tr>

                                </thead>

                                <tbody>
                                <tr>
                                    <td colspan="6"><b>{{ __('payments.bank_account_details') }}</b></td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <div class="form-group">
                                            <label class="control-label">{{ __('payments.account') }}</label>
                                            <select class="form-control compulsory required" name="bank" id="bank" onchange="show_acc_bal(this.value)" required>
                                                <option value="">-select-</option>
                                                @foreach($banks as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </td>

                                    <td colspan="2">
                                        <div class="form-group">
                                            <label class="control-label">{{ __('payments.account_balance') }}</label>
                                            {{ Form::text('account_balance', 0, ['class'=>'form-control compulsory', 'id'=>'account_balance', 'readonly']) }}
                                            {{ Form::hidden('bank_id', 0, ['class'=>'form-control compulsory', 'id'=>'bank_id']) }}
                                        </div>
                                    </td>

                                    <td colspan="2">

                                        <div class="row">
                                            <div class='col'>
                                                <div class="form-group-group">
                                                    <label class="control-label" for="tot">{{ __('payments.payment_items_total') }}</label>
                                                    <div class="controls">
                                                        <input type="text" name="total_amount" id="total_amount" class="form-control compulsory" readonly='true'/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- Total -->

                                    </td>
                                </tr>

                                <tr>
                                    <td colspan="6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <br/>
                                                <div class="form-group">
                                                    {{ Form::textarea('memo', '', ['class'=>'form-control', '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>
    </div>

    <div class="modal" id="edit_payment_item_modal" tabindex="-1" role="dialog" aria-labelledby="edit_payment_item_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-6 text-left">
                            <h5 class="modal-title" id="edit_payment_item_modal_label"><b>{{ __('payments.EDIT_PAYMENT_ITEM_PRICE') }}</b></h5>
                        </div>
                        <div class="col-sm-6 text-right">
                            <strong>{{ __('payments.date') }}:</strong> {{ \Carbon\Carbon::now()->format('D m Y') }}
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row" style="padding: 10px;">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>{{ __('payments.new_unit_cost') }}</label>
                                <input name="item_id" id="item_id" type="hidden">
                                <input name="item_unit_cost" id="item_unit_cost" class="form-control" />
                                <input name="reset_id" id="reset_id" type="hidden"/>
                                <input name="preset_qty" id="preset_qty" type="hidden"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{{ __('payments.cancel') }}</button>
                    <button type="button" class="btn btn-success" id="confirm_edit">{{ __('payments.confirm_edit') }}</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>

        //         $(".input_fields_wrap").on('change', "select", function () {
        // //            var i = parseInt(this.id.replace("item_", ""), 10);
        //             var i = parseInt(this.id.substr(this.id.indexOf("_") + 1));
        //
        //             var item_id = $("#item_" + i).val();
        //             var quantity = $("#quantity_" + i).val();
        //             var amount_field = $("#amount_" + i);
        //             var expense = $("#expense_accn_" + i);
        //             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){
        //                     expense.val(result);
        //                 },
        //                 error: function (error) {
        //                     console.log(error);
        //                 }
        //             });
        //
        //             var dataString = "item_id=" + item_id + "&quantity=" + quantity;
        //             $.ajax({
        //                 type: "POST",
        //                 url: "total_price",
        //                 data: dataString,
        //                 cache: false,
        //                 success: function (result) {
        //                     amount_field.val(result); console.log('cows')
        //                     $("[id^='amount_']").each(function () {
        //                         final_total += Number($(this).val());
        //                     });
        //                     total_field.val(final_total);
        //                     // $(".add_item").trigger("click");
        //                 },
        //                 error: function (error) {
        //                     console.log(error)
        //                 }
        //             });
        //         });

        $("[id^='edit_item_']").click(function () {

            var id = /\d+(?=\D*$)/.exec($(this).attr('id'));
            var quantity = $("#quantity_" + id).val();
            var unit_cost_field = $("#unit-cost_" + id);
            var item = parseFloat($("#item_" + id).val());

            $('#reset_id').val(id);
            $('#item_id').val(item);
            $('#preset_qty').val(quantity);
            $('#edit_payment_item_modal').modal('show');
        });

        $('#confirm_edit').click(function () {
            var id = $('#reset_id').val();
            var amount = $('#item_unit_cost').val();
            var quantity = $('#preset_qty').val();
            var item = $('#item_id').val();
            $.ajax({
                type: "POST",
                url: "/payment_items/quick_update",
                data: {
                    'item_id' : item,
                    'amount' : amount
                },
                cache: false,
                success: function (result) {
                    console.log(result)
                    $('#edit_payment_item_modal').modal('hide');
                    $('#quantity_' + id).val(1);
                    $('#amount_' + id).val(quantity * amount);
                },
                error: function (error) {
                    console.log(error)
                }
            });
        });


        $("[id^='quantity'],[id^='amount'],[id^='amount']").on("change keyup", function () {
            var id = /\d+(?=\D*$)/.exec($(this).attr('id'));

            var item = parseFloat($("#item_" + id).val());
            var quantity = parseFloat($("#quantity_" + id).val()) || 1;
            var amount = parseFloat($("#amount_" + id).val()) || 0;
            var edit_btn = $('#edit_item_' + id);

            var unit_cost_field = $("#unit-cost_" + id);
            var final_total = 0;

            var dataString = "item_id=" + item;

            $.ajax({
                type: "POST",
                url: "total_price",
                data: dataString,
                cache: false,
                success: function (result) {
                    var price_factor = result;
                    unit_cost_field.text((price_factor) + ' ugx per item');
                    edit_btn.show();
                    var cost = quantity * price_factor;
                    $("#amount_" + id).val(cost);   console.log(price_factor * quantity)
                },
                error: function (error) {
                    console.log(error)
                }
            });

            // $.ajax({
            //     url: '/prescriptions/get_factor/'+frequency_id,
            //     data: {},
            //     success: function(data){
            //         var factor = parseFloat(data);
            //         var quantity = parseFloat(equiv_total * factor * duration_days) || 0;
            //         var required = quantity / pack;
            //         var dispense = Math.ceil(required); // @TODO Roundup this to the nearest whole number

            // $("#quantity_dispensed" + id).val(dispense);
            //
            // var selling_price = parseInt($("#selling_price" + id).val());
            // var cost = dispense * selling_price;
            // $("#auto_price" + id).text(cost + " UGx");
            //     },
            //     error: function(response){
            //         //
            //     }
            // });
        });

        $("#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;
                console.log(auto_price_integer);
            });
            $("#total_amount").val(total_amount);
        });


        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("\
                <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 $options; ?>" +

                    "</select>\n\
            </div>\n\
        </div>\n\
    </div>\n\
    <div class='col'>\n\
        <div>\n\
            <div class='form-group'>" +
                    "<input type='text' name='quantity[]' value='1' id ='quantity_" + x + "' class='form-control compulsory'>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                    <div class='col'>\n\
                    \<div class=\"col-md-6 text-right\">\
                        <label class=\"label label-info\"id='edit_item_" + x + "' style=\"display: block;\">Edit unit price</label>\
                    </div>\
                        <div class='form-group'>" +
                    "<div class='controls'>\n\
                        <input type='text' name='amount[]' id='amount_" + x + "' class='form-control compulsory' readonly='true' />" +
                    "<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'>\n\
                    <input type='text' name='expense_accn[]' id ='expense_accn_" + x + "' class='form-control compulsory' readonly='true'>\n\
                    </div>\n\
                        </div>\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--;
        });
    </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;
                    $('#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{
                        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);
        }

    </script>
@endpush