@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/select2/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('finance.journals') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> {{ __('finance_reports.dashboard') }}</a></li>
            <li><a href="{{ route('finance') }}"><i class="fa fa-money"></i> {{ __('finance.finance_home') }}</a></li>
            <li class="active"><i class="fa fa-file"></i> {{ __('finance.journals') }}</li>
        </ol>
    </div>
</div>

@include('journals::journals.menu')
@include('flash::message')
<div class="row">
    <div class="col-md-12">
        <div class="white-box">

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

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

                <div class='col-md-6'></div>

                <div class='col-md-3'>
                    <div id='journalNumber'>
                        <div class='form-group'>
                            {{ Form::label('journal_number', __('finance.journal_number')) }}
                            {{ Form::text('journal_number', $journal_number, ['class'=>'form-control required compulsory', 'required', 'readonly', 'id'=>'journal_number']) }}
                        </div>
                    </div>
                </div>

            </div>
            <hr/>
            <div class='row'>
                <div class='col-md-12'>
                    <div 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'>{{ __('finance.account') }}</div>
                                            <div class='col-2'>{{ __('finance.debits') }}</div>
                                            <div class='col-2'>{{ __('finance.credit') }}</div>
                                            <div class='col-1'>{{ __('finance.description') }}</div>
                                            <div class='col-1'>{{ __('finance.type') }}</div>
                                            <div class='col-2'>{{ __('finance.name') }}</div>
                                            <div class='col-1'></div>
                                        </div>
                                    </th>
                                </tr>
                            </thead>

                            @php
                                $option_accounts = "<option value=''>-select-</option>";
                                foreach ($accounts as $account) {
                                    $option_accounts .= "<option value='$account->id'>$account->name (" . get_name($account->type, 'id', 'name', 'account_types') . ")</option>";
                                }

                                $option_types = "<option value=''>-" . __('finance.select') . "-</option>";
                                $option_types .= "<option value='1'>" . __('finance.customer') . "</option>";
                                $option_types .= "<option value='2'>" . __('finance.supplier') . "</option>";
                                $option_types .= "<option value='3'>" . __('finance.employee') . "</option>";
                                $option_types .= "<option value='4'>" . __('finance.patient_categories') . "</option>";
                                $option_types .= "<option value='5'>" . __('finance.payment_items') . "</option>";

                                $option_customers = "<option value=''>-" . __('finance.select') . "-</option>";
                                foreach($customers as $customer){
                                    $option_customers .= "<option value='$customer->id'>$customer->first_name $customer->last_name</option>";
                                }

                                $option_suppliers = "<option value=''>-" . __('finance.select') . "-</option>";
                                foreach ($suppliers as $supplier){
                                    $option_suppliers .= "<option value='$supplier->id'>$supplier->name</option>";
                                }

                                $option_employees = "<option value=''>-" . __('finance.select') . "-</option>";
                                foreach ($employees as $employee){
                                    $option_employees .= "<option value='$employee->id'>$employee->first_name $employee->last_name</option>";
                                }

                                $option_patient_categories = "<option value=''>-" . __('finance.select') . "-</option>";
                                foreach ($patient_categories as $category){
                                    $option_patient_categories .= "<option value='$category->id'>$category->name</option>";
                                }

                                $option_payment_items = "<option value=''>-" . __('finance.select') . "-</option>";
                                foreach ($payment_items as $payment_item){
                                    $option_payment_items .= "<option value='$payment_item->id'>$payment_item->name</option>";
                                }
                                $back_date = \Streamline\Models\HospitalInformation::first()->pluck('back_date');
                            @endphp

                            <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='account_id[]' id='account_0' class='form-control compulsory required item_select' required>
                                                            @php echo $option_accounts; @endphp
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col-2'>
                                                <div class='form-group'>
                                                    <div class='controls'>
                                                        <input type='number' name='debit[]' id ='debit_0' class='form-control debit'>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col-2'>
                                                <div class='form-group'>
                                                    <div class='controls'>
                                                        <input type='number' name='credit[]' id='credit_0' class='form-control credit'/>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col-1'>
                                                <div class='form-group'>
                                                    <div class='controls'>
                                                        <input type='text' name='description[]' id='description_0' class='form-control compulsory' required/>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col-1'>
                                                <div class='control-group'>
                                                    <div id='type_selected_0' class='form-group'>
                                                        <select name='type_id[]' id='type_0' class='form-control type_select'>
                                                            @php echo $option_types; @endphp
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class='col-2'>
                                                <div class='control-group'>
                                                    <div id='customer_selected_0' class='form-group name_select'>
                                                        <select name='customer_id[]' id='customer_0' class='form-control item_select'>
                                                            @php echo $option_customers; @endphp
                                                        </select>
                                                    </div>

                                                    <div id='supplier_selected_0' class='form-group name_select'>
                                                        <select name='supplier_id[]' id='supplier_0' class='form-control item_select'>
                                                            @php echo $option_suppliers; @endphp
                                                        </select>
                                                    </div>

                                                    <div id='employee_selected_0' class='form-group name_select'>
                                                        <select name='employee_id[]' id='employee_0' class='form-control item_select'>
                                                            @php echo $option_employees; @endphp
                                                        </select>
                                                    </div>

                                                    <div id='category_selected_0' class='form-group name_select'>
                                                        <select name='category_id[]' id='category_0' class='form-control item_select'>
                                                            @php echo $option_patient_categories; @endphp
                                                        </select>
                                                    </div>

                                                    <div id='payment_item_selected_0' class='form-group name_select'>
                                                        <select name='payment_item_id[]' id='payment_item_0' class='form-control item_select'>
                                                            @php echo $option_payment_items; @endphp
                                                        </select>
                                                    </div>
                                                </div>
                                                <input type='hidden' name='name_id[]' id='name_0' />
                                                <input type='hidden' name='invoice_number[]' id='invoice_number_0' placeholder="Invoice Number" />
                                            </div>

                                            {{-- <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>

                            <tfoot class='footer_input_fields_wrap'>
                                <tr>
                                    <td>
                                        <div class='row'>
                                            <div class='col-1'></div>
                                            <div class='col-2'><strong>{{ __('finance.total') }}</strong></div>
                                            <div class='col-2'>
                                                <input type="number" name="total_debits" id="total_debits" class="form-control" readonly='true' value='0' />
                                            </div>
                                            <div class='col-2'>
                                                <input type="number" name="total_credits" id="total_credits" class="form-control" readonly='true' value='0' />
                                            </div>
                                            <div class="col-2"></div>
                                            <div class='col-1'>
                                                <div class='form-group' style='margin-top: 10px;'>
                                                    <button class='btn btn-sm btn-rounded btn-success pull-right add_item' style='color: white; margin-left: 25px;'><i class='fa fa-plus'></i> Add Row</button>
                                                </div>
                                            </div>
                                            <div class='col-2'></div>
                                        </div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <br/>
            <div class='row'>
                <div class='col-md-9'>
                </div>
                <div class='col-md-3'>
                    <button class='btn btn-rounded btn-primary pull-right' id='journal_action' name='journal_action' value='save'>{{ __('finance.save_journal') }}</button>
                </div>
            </div>                
            {{ Form::close() }}
        </div>
    </div>
</div>

@endsection

@push('scripts')
    <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() {
            $(".name_select").hide();
            $(".invoice_number").hide();
            $("#journal_action").attr('disabled', 'disabled');
        });
        let min_days = <?php echo $back_date[0]; ?>;
        var min_date = new Date();
        min_date.setDate(min_date.getDate() - min_days);
        $('#journal_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            endDate: new Date(),
            startDate:  min_date,
            format: 'dd-mm-yyyy'
        });

        var max_rows = 20;
        var wrapper = $(".input_fields_wrap"); //Fields wrapper
        var add_button = $(".add_item");

        var x = 1; // initial row count

        add_button.click(function (e) { // on add input button click
            e.preventDefault();
            if (x < max_rows) {
                $(wrapper).append("\
                \<tr>\
                    <td>\
                        <div class='row'>\
                            \
                            <div class='col-1'>\
                                <label style='margin-top: 10px;'>" + parseInt(x + 1) + ". " + "</label>\
                            </div>\
                            \
                            <div class='col-2'>\
                                <div class='control-group'>\
                                    <div class='form-group'>\
                                        <select name='account_id[]' id='account_" + x + "' class='form-control compulsory required item_select' required>" +
                                            "<?php echo $option_accounts; ?>" +
                                        "</select>\
                                    </div>\
                                </div>\
                            </div>\
                            \
                            <div class='col-2'>\
                                <div class='form-group'>\
                                    <div class='controls'>\
                                        <input type='number' name='debit[]' id ='debit_" + x + "' class='form-control debit'>\
                                    </div>\
                                </div>\
                            </div>\
                            \
                            <div class='col-2'>\
                                <div class='form-group'>\
                                    <div class='controls'>\
                                        <input type='number' name='credit[]' id ='credit_" + x + "' class='form-control credit'>\
                                    </div>\
                                </div>\
                            </div>\
                            \
                            <div class='col-1'>\
                                <div class='form-group'>\
                                    <div class='controls'>\
                                        <input type='text' name='description[]' id ='description_" + x + "' class='form-control compulsory' required>\
                                    </div>\
                                </div>\
                            </div>\
                            \
                            <div class='col-1'>\
                                <div class='control-group'>\
                                    <div id='type_selected_" + x + "' class='form-group'>\
                                        <select name='type_id[]' id='type_" + x + "' class='form-control type_select'>" +
                                            "<?php echo $option_types; ?>" +
                                        "</select>\
                                    </div>\
                                </div>\
                            </div>\
                            \
                            <div class='col-2'>\
                                <div class='control-group'>\
                                    <div id='customer_selected_" + x + "' class='form-group name_select'>\
                                        <select name='customer_id[]' id='customer_" + x + "' class='form-control item_select'>" +
                                            "<?php echo $option_customers; ?>" +
                                        "</select>\
                                    </div>\
                                    \
                                    <div id='supplier_selected_" + x + "' class='form-group name_select'>\
                                        <select name='supplier_id[]' id='supplier_" + x + "' class='form-control item_select'>" +
                                            "<?php echo $option_suppliers; ?>" +
                                        "</select>\
                                    </div>\
                                    \
                                    <div id='employee_selected_" + x + "' class='form-group name_select'>\
                                        <select name='employee_id[]' id='employee_" + x + "' class='form-control item_select'>" +
                                            "<?php echo $option_employees; ?>" +
                                        "</select>\
                                    </div>\
                                    \
                                    <div id='category_selected_" + x + "' class='form-group name_select'>\
                                        <select name='category_id[]' id='category_" + x + "' class='form-control item_select'>" +
                                            "<?php echo $option_patient_categories; ?>" +
                                        "</select>\
                                    </div>\
                                    \
                                    <div id='payment_item_selected_" + x + "' class='form-group name_select'>\
                                        <select name='payment_item_id[]' id='payment_item_" + x + "' class='form-control item_select'>" +
                                            "<?php echo $option_payment_items; ?>" +
                                        "</select>\
                                    </div>\
                                </div>\
                                <input type='hidden' name='name_id[]' id='name_" + x + "' />\
                                <input type='hidden' name='invoice_number[]' id='invoice_number_" + x + "' placeholder='Invoice Number' />\
                            </div>\
                            \
                            <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 row

                $("#customer_selected_" + x).hide();
                $("#supplier_selected_" + x).hide();
                $("#employee_selected_" + x).hide();
                $("#category_selected_" + x).hide();
                $("#payment_item_selected_" + x).hide();

                $("select.type_select").change(function(){
                    var id = /\d+(?=\D*$)/.exec($(this).attr('id'));
                    var type_selected = $(this).children("option:selected").val();

                    if (type_selected == '1') {
                        $("#customer_selected_" + id).show();
                        $("#supplier_selected_" + id).hide();
                        $("#employee_selected_" + id).hide();
                        $("#category_selected_" + id).hide();
                        $("#invoice_number_" + id).attr('type', 'hidden');
                        $("#payment_item_selected_" + id).hide();
                    } else if (type_selected == '2') {
                        $("#customer_selected_" + id).hide();
                        $("#supplier_selected_" + id).show();
                        $("#employee_selected_" + id).hide();
                        $("#category_selected_" + id).hide();
                        $("#invoice_number_" + id).attr('type', 'hidden');
                        $("#payment_item_selected_" + id).hide();
                    } else if (type_selected == '3') {
                        $("#customer_selected_" + id).hide();
                        $("#supplier_selected_" + id).hide();
                        $("#employee_selected_" + id).show();
                        $("#category_selected_" + id).hide();
                        $("#invoice_number_" + id).attr('type', 'hidden');
                        $("#payment_item_selected_" + id).hide();
                    } else if (type_selected == '4') {
                        $("#customer_selected_" + id).hide();
                        $("#supplier_selected_" + id).hide();
                        $("#employee_selected_" + id).hide();
                        $("#category_selected_" + id).show();
                        $("#invoice_number_" + id).attr('type', 'text');
                        $("#payment_item_selected_" + id).hide();
                    } else if (type_selected == '5') {
                        $("#customer_selected_" + id).hide();
                        $("#supplier_selected_" + id).hide();
                        $("#employee_selected_" + id).hide();
                        $("#category_selected_" + id).hide();
                        $("#invoice_number_" + id).attr('type', 'hidden');
                        $("#payment_item_selected_" + id).show();
                    } else {
                        $("#customer_selected_" + id).hide();
                        $("#supplier_selected_" + id).hide();
                        $("#employee_selected_" + id).hide();
                        $("#category_selected_" + id).hide();
                        $("#invoice_number_" + id).attr('type', 'hidden');
                        $("#payment_item_selected_" + id).hide();
                    }
                    $("#name_" + id).val('');
                    $("#customer_selected_" + id + " option[value='']").prop('selected', true);
                    $("#supplier_selected_" + id + " option[value='']").prop('selected', true);
                    $("#employee_selected_" + id + " option[value='']").prop('selected', true);
                    $("#category_selected_" + id + " option[value='']").prop('selected', true);
                    $("#payment_item_selected_" + id + " option[value='']").prop('selected', true);
                });

                $("select.item_select").change(function(){
                    var id = /\d+(?=\D*$)/.exec($(this).attr('id'));
                    var name_selected = $(this).children("option:selected").val();
                    $("#name_" + id).val(parseInt(name_selected));
                });
                $('#account_'+x).select2();

                x++;
            }
        });

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

            calculateTotalDebits();
            calculateTotalCredits();

            // x--; // decrementing messes up the id referencing. If you're decrementing in this way, you're probably not submitting some data!!!!!!
        });

        $('#account_0').select2();

        $("select.type_select").change(function(){
            var id = /\d+(?=\D*$)/.exec($(this).attr('id'));
            var type_selected = $(this).children("option:selected").val();

            if (type_selected == '1') {
                $("#customer_selected_" + id).show();
                $("#supplier_selected_" + id).hide();
                $("#employee_selected_" + id).hide();
                $("#category_selected_" + id).hide();
                $("#invoice_number_" + id).attr('type', 'hidden');
                $("#payment_item_selected_" + id).hide();
            } else if (type_selected == '2') {
                $("#customer_selected_" + id).hide();
                $("#supplier_selected_" + id).show();
                $("#employee_selected_" + id).hide();
                $("#category_selected_" + id).hide();
                $("#invoice_number_" + id).attr('type', 'hidden');
                $("#payment_item_selected_" + id).hide();
            } else if (type_selected == '3') {
                $("#customer_selected_" + id).hide();
                $("#supplier_selected_" + id).hide();
                $("#employee_selected_" + id).show();
                $("#category_selected_" + id).hide();
                $("#invoice_number_" + id).attr('type', 'hidden');
                $("#payment_item_selected_" + id).hide();
            } else if (type_selected == '4') {
                $("#customer_selected_" + id).hide();
                $("#supplier_selected_" + id).hide();
                $("#employee_selected_" + id).hide();
                $("#category_selected_" + id).show();
                $("#invoice_number_" + id).attr('type', 'text');
                $("#payment_item_selected_" + id).hide();
            } else if (type_selected == '5') {
                $("#customer_selected_" + id).hide();
                $("#supplier_selected_" + id).hide();
                $("#employee_selected_" + id).hide();
                $("#category_selected_" + id).hide();
                $("#invoice_number_" + id).attr('type', 'hidden');
                $("#payment_item_selected_" + id).show();
            } else {
                $("#customer_selected_" + id).hide();
                $("#supplier_selected_" + id).hide();
                $("#employee_selected_" + id).hide();
                $("#category_selected_" + id).hide();
                $("#invoice_number_" + id).attr('type', 'hidden');
                $("#payment_item_selected_" + id).hide();
            }
            $("#name_" + id).val('');
            $("#customer_selected_" + id + " option[value='']").prop('selected', true);
            $("#supplier_selected_" + id + " option[value='']").prop('selected', true);
            $("#employee_selected_" + id + " option[value='']").prop('selected', true);
            $("#category_selected_" + id + " option[value='']").prop('selected', true);
            $("#payment_item_selected_" + id + " option[value='']").prop('selected', true);
        });

        $("select.item_select").change(function(){
            var id = /\d+(?=\D*$)/.exec($(this).attr('id'));
            var name_selected = $(this).children("option:selected").val();
            $("#name_" + id).val(parseInt(name_selected));
        });

        $(".input_fields_wrap").on('change', ".debit", function () {
            var id = /\d+(?=\D*$)/.exec($(this).attr('id'));

            // empty the adjacent credit field
            $("#credit_" + id).val(null);

            calculateTotalDebits();
            calculateTotalCredits();
        });

        $(".input_fields_wrap").on('change', ".credit", function () {
            var id = /\d+(?=\D*$)/.exec($(this).attr('id'));

            // empty the adjacent debit field
            $("#debit_" + id).val(null);

            calculateTotalDebits();
            calculateTotalCredits();
        });

        function calculateTotalDebits() {
            var total_debits = 0;
            $("[id^='debit_']").each(function () {
                if ($(this).val() != null) {
                    total_debits += Number($(this).val());
                }
            });
            $("#total_debits").val(total_debits);
        }

        function calculateTotalCredits() {
            var total_credits = 0;
            $("[id^='credit_']").each(function () {
                if ($(this).val() != null) {
                    total_credits += Number($(this).val());
                }
            });
            $("#total_credits").val(total_credits);
        }

        // enable / diable submit button
        $(".input_fields_wrap").on('change', ".credit, .debit", function () {
            if ($('#journal_date').val() !== '' && ($('#total_debits').val() === $('#total_credits').val())) {
                $('#journal_action').removeAttr("disabled");
            } else {
                $('#journal_action').attr('disabled', 'disabled');
            }
        });

        $('#journal_date').on('change', function() {
            // validating the journal_date because the basic `required` rule fails to work on that field
            if ($('#journal_date').val() !== '' && ($('#total_debits').val() === $('#total_credits').val())) {
                $('#journal_action').removeAttr("disabled");
            } else {
                $('#journal_action').attr('disabled', 'disabled');
            }
        });

    </script>
@endpush