@extends('layouts.app')

@section('title', __('New Expense'))

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('New Expense') }}</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('expense.store') }}" class="needs-validation" novalidate>
                            @csrf
                            <div class="form-row">
                                <div class="col-md-6 mb-3">
                                    <label for="date">{{ __('Expense Date') }}</label>
                                    <input id="date" type="date"
                                           class="form-control @if($errors->has('date')) is-invalid @endif"
                                           name="date"
                                           value="{{ old('date') }}"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('date'))
                                            {{ $errors->first('date') }}
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="type">{{ __('Expense Type') }}</label>
                                    <input id="type" type="text"
                                           class="form-control @if($errors->has('type')) is-invalid @endif"
                                           name="type"
                                           value="{{ old('type') }}"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('type'))
                                            {{ $errors->first('type') }}
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label for="to">{{ __('Pay To') }}</label>
                                    <input id="to" type="text"
                                           class="form-control @if($errors->has('to')) is-invalid @endif"
                                           name="to"
                                           value="{{ old('to') }}"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('to'))
                                            {{ $errors->first('to') }}
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-4 mb-3">
                                    <label for="payment_type">{{ __('Payment Type') }}</label>
                                    <select id="payment_type"
                                            class="custom-select @if($errors->has('payment_type')) is-invalid @endif"
                                            name="payment_type">
                                        <option value="cash" selected>{{ __('cash') }}</option>
                                        <option value="visa">{{ __('visa') }}</option>
                                        <option value="cheque">{{ __('cheque') }}</option>
                                        <option value="transfer">{{ __('transfer') }}</option>
                                    </select>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('payment_type'))
                                            {{ $errors->first('payment_type') }}
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-4 mb-3" id="payment_number_field" style="display: none;">
                                    <label for="payment_number">{{ __('Payment Number') }}</label>
                                    <input id="payment_number" name="payment_number" value="{{ old('payment_number') }}"
                                           class="form-control @if($errors->has('payment_number')) is-invalid @endif"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('payment_number'))
                                            {{ $errors->first('payment_number') }}
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-row">

                                <div class="col-12">
                                    <button type="button"
                                            class="btn btn-outline-primary mb-2"
                                            style="width: 100%;" data-toggle="modal"
                                            data-target="#items_modal">{{ __('Items') }}
                                        <span
                                            class="badge @if($errors->has('items*')) badge-danger @else badge-dark @endif"
                                            id="rows">
                                            @if($errors->has('items.*'))
                                                {{ $errors->first('items.*') }}
                                            @else
                                                1
                                            @endif
                                        </span>
                                    </button>
                                    @if($errors->has('items.*'))
                                        <small class="form-text text-danger">
                                            {{ $errors->first('items.*') }}
                                        </small>
                                    @endif
                                </div>

                                <div class="modal fade" id="items_modal" tabindex="-1" role="dialog"
                                     aria-labelledby="items_modal"
                                     aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">{{ __('Items') }}</h5>
                                            </div>
                                            <div class="modal-body">

                                                <div id="items-list" class="col-12 mb-3">
                                                    <div class="form-row item">
                                                        <div class="form-group col-md-3">
                                                            <label
                                                                for="item_name_0_name">{{ __('Item Name') }}</label>
                                                            <input id="item_name_0_name" class="form-control"
                                                                   type="text"
                                                                   name="items[0][name]"
                                                                   value="{{ old('items[0][name]') }}" required/>
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <label
                                                                for="item_name_0_fee">{{ __('Item Fee') }}</label>
                                                            <input id="item_name_0_fee" class="form-control fee"
                                                                   type="text"
                                                                   name="items[0][fee]"
                                                                   value="{{ old('items[0][fee]') }}"
                                                                   onkeyup="calc(event)" required/>
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <label
                                                                for="item_name_0_quantity">{{ __('Item Quantity') }}</label>
                                                            <input id="item_name_0_quantity"
                                                                   class="form-control quantity" type="text"
                                                                   name="items[0][quantity]"
                                                                   value="{{ old('items[0][quantity]') }}"
                                                                   onkeyup="calc(event)" required/>
                                                        </div>
                                                        <div class="form-group col-md-3">
                                                            <label
                                                                for="item_name_0_total">{{ __('Item Total') }}</label>
                                                            <input id="item_name_0_total" class="form-control total"
                                                                   readonly
                                                                   type="text" name="items[0][total]"
                                                                   value="{{ old('items[0][total]') }}"/>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12">
                                                    <button type="button"
                                                            class="btn btn-lg btn-outline-primary mb-3"
                                                            onclick="addItem()"
                                                            style="width: 100%;">{{ __('Add') }}</button>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary"
                                                        data-dismiss="modal">{{ __('Ok') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="form-row">
                                <div class="col-md-6 mb-3">
                                    <label for="quantity">{{ __('Expense Quantity') }}</label>
                                    <input id="quantity" type="text"
                                           class="form-control @if($errors->has('quantity')) is-invalid @endif"
                                           name="quantity"
                                           value="{{ old('quantity') }}" readonly/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('quantity'))
                                            {{ $errors->first('quantity') }}
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="amount">{{ __('Expense Amount') }}</label>
                                    <input id="amount" type="text"
                                           class="form-control @if($errors->has('amount')) is-invalid @endif"
                                           name="amount"
                                           value="{{ old('amount') }}" readonly/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('amount'))
                                            {{ $errors->first('amount') }}
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col-md-2">
                                    <label for="notes">{{ __('Notes') }}</label>
                                </div>
                                <div class="col-md-10 mb-3">
                                        <textarea class="form-control" name="notes" id="notes"
                                                  rows="3">{{ old('notes') }}</textarea>
                                </div>
                            </div>

                            <div class="form-row justify-content-between">
                                <div class="col-md-2 mb-2">
                                    <button type="submit" class="btn btn-primary"
                                            style="width: 100%;">{{ __('Save') }}</button>
                                </div>
                                <div class="col-md-2 mb-2">
                                    <button type="reset" class="btn btn-danger"
                                            style="width: 100%;">{{ __('Clear') }}</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')

    <script type="application/javascript">
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                let forms = document.getElementsByClassName('needs-validation');
                let validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>

    <script type="application/javascript">

        function calc(e) {
            let parent = $(e.target).parents('.item');
            let fee = parent.find('.fee');
            let quantity = parent.find('.quantity');
            let total = parent.find('.total');

            total.val(fee.val() * quantity.val());
        }

        function addItem() {
            const items = document.getElementsByClassName('item');

            const itemNameLabel = document.createElement('label');
            itemNameLabel.setAttribute('for', 'item_name_' + items.length + '_name');
            itemNameLabel.textContent = "{{ __('Item Name') }}";

            const itemNameInput = document.createElement('input');
            itemNameInput.className = 'form-control';
            itemNameInput.id = 'item_name_' + items.length + '_name';
            itemNameInput.setAttribute('name', 'items[' + items.length + '][name]');
            itemNameInput.setAttribute('required', 'required');

            const itemNameDiv = document.createElement('div');
            itemNameDiv.className = 'form-group col-md-3';
            itemNameDiv.append(itemNameLabel);
            itemNameDiv.append(itemNameInput);

            const itemFeeLabel = document.createElement('label');
            itemFeeLabel.setAttribute('for', 'item_fee_' + items.length + '_fee');
            itemFeeLabel.textContent = "{{ __('Item Fee') }}";

            const itemFeeInput = document.createElement('input');
            itemFeeInput.className = 'form-control fee';
            itemFeeInput.id = 'item_fee_' + items.length + '_fee';
            itemFeeInput.setAttribute('name', 'items[' + items.length + '][fee]');
            itemFeeInput.setAttribute('required', 'required');
            itemFeeInput.addEventListener('keyup', calc);

            const itemFeeDiv = document.createElement('div');
            itemFeeDiv.className = 'form-group col-md-3';
            itemFeeDiv.append(itemFeeLabel);
            itemFeeDiv.append(itemFeeInput);

            const itemQuantityLabel = document.createElement('label');
            itemQuantityLabel.setAttribute('for', 'item_quantity_' + items.length + '_quantity');
            itemQuantityLabel.textContent = "{{ __('Item Quantity') }}";

            const itemQuantityInput = document.createElement('input');
            itemQuantityInput.className = 'form-control quantity';
            itemQuantityInput.id = 'item_quantity_' + items.length + '_quantity';
            itemQuantityInput.setAttribute('name', 'items[' + items.length + '][quantity]');
            itemQuantityInput.setAttribute('required', 'required');
            itemQuantityInput.addEventListener('keyup', calc);

            const itemQuantityDiv = document.createElement('div');
            itemQuantityDiv.className = 'form-group col-md-3';
            itemQuantityDiv.append(itemQuantityLabel);
            itemQuantityDiv.append(itemQuantityInput);

            const itemTotalLabel = document.createElement('label');
            itemTotalLabel.setAttribute('for', 'item_total_' + items.length + '_total');
            itemTotalLabel.textContent = "{{ __('Item Total') }}";

            const itemTotalInput = document.createElement('input');
            itemTotalInput.className = 'form-control total';
            itemTotalInput.id = 'item_total_' + items.length + '_total';
            itemTotalInput.setAttribute('name', 'items[' + items.length + '][total]');
            itemTotalInput.setAttribute('readonly', 'readonly');

            const itemTotalDiv = document.createElement('div');
            itemTotalDiv.className = 'form-group col-md-3';
            itemTotalDiv.append(itemTotalLabel);
            itemTotalDiv.append(itemTotalInput);

            const item = document.createElement('div');
            item.className = 'form-row item';
            item.append(itemNameDiv);
            item.append(itemFeeDiv);
            item.append(itemQuantityDiv);
            item.append(itemTotalDiv);

            const container = document.getElementById('items-list');
            container.append(item);
        }

        $(document).ready(function () {

            $('#items_modal').on('hide.bs.modal', function () {
                let sum = 0,
                    row = 0,
                    quant = 0,
                    total = $('.total'),
                    quantity = $('.quantity');

                total.each(function (index, item) {
                    sum += parseFloat($(item).val());
                    row += 1;
                });

                quantity.each(function (index, item) {
                    quant += parseFloat($(item).val());
                });

                $('input[name="amount"]').val(sum);
                $('input[name="quantity"]').val(quant);
                $('#rows').html(row);

            });

            $('#payment_type').on('change', function() {
                let value = $(this).val();
                if(value == 'cash') {
                    $('#payment_number_field').hide();
                } else {
                    $('#payment_number_field').show();
                }
            });
        });

    </script>
@endsection