@extends('layouts.app')

@section('title', $asset->name)

@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>{{ __('Asset') . ' ' . $asset->name }}</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('asset.update', $asset) }}" class="needs-validation"
                              novalidate>
                            @csrf
                            @method('put')

                            <div class="form-row">
                                <label for="name"
                                       class="col-md-3 col-form-label">{{ __('Name') }}</label>
                                <div class="col-md-3">
                                    <input id="name" name="name" type="text" class="form-control mb-2"
                                           value="{{ $asset->name }}"/>
                                </div>
                                <label for="description"
                                       class="col-md-3 col-form-label">{{ __('Description') }}</label>
                                <div class="col-md-3">
                                    <input id="description" name="description" type="text" class="form-control mb-2"
                                           value="{{ $asset->description }}"/>
                                </div>
                            </div>

                            <div class="form-row">
                                <label for="quantity"
                                       class="col-md-3 col-form-label">{{ __('Quantity') }}</label>
                                <div class="col-md-3">
                                    <input id="quantity" name="quantity" type="text" class="form-control mb-2"
                                           value="{{ $asset->quantity }}" readonly/>
                                </div>
                                <label for="total"
                                       class="col-md-3 col-form-label">{{ __('Total') }}</label>
                                <div class="col-md-3">
                                    <input id="total" name="total" type="text" class="form-control mb-2"
                                           value="{{ $asset->total }}" readonly/>
                                </div>
                            </div>

                            <hr/>

                            <div id="items-list" class="mb-3">
                                @foreach($asset->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"
                                                   value="{{ $item->quantity * $item->fee }}"/>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <button type="button" class="btn btn-lg btn-outline-primary mb-3" onclick="addItem()"
                                    style="width: 100%;">{{ __('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="total"]').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);
        }

    </script>
@endsection