@extends('layouts.app')

@section('title', $expense->date)

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-10">
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif
                <div class="card">
                    <div class="card-header">
                        <h5>{{ __('Expense') }}</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('expense.update', $expense) }}" class="needs-validation"
                              novalidate>
                            @csrf
                            @method('put')

                            <div class="form-row">
                                <div class="col-md-4 mb-3">
                                    <label for="number">{{ __('Expense Number') }}</label>
                                    <input id="number" type="text"
                                           disabled
                                           class="form-control"
                                           value="{{ env('expenses_shortcut') .  $expense->id }}"/>
                                </div>

                                <div class="col-md-4 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="{{ $expense->date  }}"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('date'))
                                            {{ $errors->first('date') }}
                                        @endif
                                    </div>
                                </div>

                                <div class="col-md-4 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="{{ $expense->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="{{ $expense->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" @if($expense->payment_type == 'cash') selected @endif>{{ __('cash') }}</option>
                                        <option value="visa" @if($expense->payment_type == 'visa') selected @endif>{{ __('visa') }}</option>
                                        <option value="cheque" @if($expense->payment_type == 'cheque') selected @endif>{{ __('cheque') }}</option>
                                        <option value="transfer" @if($expense->payment_type == 'transfer') selected @endif>{{ __('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" @if($expense->payment_type == 'cash') style="display: none;" @endif>
                                    <label for="payment_number">{{ __('Payment Number') }}</label>
                                    <input id="payment_number" name="payment_number" value="{{ $expense->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-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">{{ $expense->notes }}</textarea>
                                </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="{{ $expense->items->count() }}" 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="{{ $expense->amount }}" readonly/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('amount'))
                                            {{ $errors->first('amount') }}
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <hr/>

                            <div id="items-list" class="mb-3">
                                @foreach($expense->items as $item)
                                    <div class="form-row item">
                                        <div class="form-group col-md-3">
                                            <label>{{ __('Item Name') }}</label>
                                            <input name="items[{{ $loop->index }}][name]" type="text" class="form-control"
                                                   value="{{ $item->name }}"/>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>{{ __('Item Fee') }}</label>
                                            <input type="text" name="items[{{ $loop->index }}][fee]" onkeyup="calc(event)" class="form-control fee"
                                                   value="{{ $item->fee }}"/>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>{{ __('Item Quantity') }}</label>
                                            <input onkeyup="calc(event)" name="items[{{ $loop->index }}][quantity]" type="text" class="form-control quantity"
                                                   value="{{ $item->quantity }}"/>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>{{ __('Item Total') }}</label>
                                            <input type="text" readonly class="form-control total" name="items[{{ $loop->index }}][total]"
                                                   value="{{ $item->quantity * $item->fee }}"/>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <button type="button" class="btn btn-lg btn-outline-primary btn-block mb-3" onclick="addItem()"
                                    >{{ __('Add') }}</button>
                            <button type="submit" class="btn btn-outline-success">{{ __('Update') }}</button>
                        </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'),
                sum = 0,
                row = 0,
                quant = 0,
                total = $('.total'),
                quantity = $('.quantity');

            parent.find('.total').val(parent.find('.fee').val() * parent.find('.quantity').val());

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

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

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

    </script>
@endsection