@extends('layouts.app')

@section('title', $project->number)

@section('content')
    <div class="container-fluid">
        @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="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header">
                        <h5>{{ $project->number }}</h5>
                    </div>

                    <div class="card-body">
                        <form method="post" action="{{ route('project.update', $project) }}">
                            @csrf
                            @method('PUT')
                            <div class="form-row mb-3">
                                <div class="form-group col-md-6">
                                    <label for="name">{{ __('Project') }}</label>
                                    <input id="name" type="text" disabled class="form-control"
                                           value="{{ $project->number }}"/>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="type">{{ __('Customer') }}</label>
                                    <input id="type" type="text" disabled class="form-control"
                                           value="{{ $project->customer->name }}"/>
                                </div>
                            </div>

                            <div class="form-row mb-3">
                                <div class="form-group col-md-3">
                                    <label for="start_date">{{ __('Project Creation Date') }}</label>
                                    <input id="start_date" name="start_date" type="text" readonly class="form-control"
                                           value="{{ $project->start_date }}"/>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="end_date">{{ __('Project End Date') }}</label>
                                    <input id="end_date" type="date" name="end_date" class="form-control"
                                           value="{{ $project->end_date }}"/>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="close_date">{{ __('Project Close Date') }}</label>
                                    <input id="close_date" type="date" name="close_date" class="form-control"
                                           value="{{ $project->close_date }}"/>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="payment">{{ __('Invoice/s') }}</label>
                                    <input id="payment" name="payment" type="number" min="0" class="form-control"
                                           value="{{ $project->payment }}"/>
                                </div>
                            </div>

                            <hr class="hr-text" id="contractTotal"
                                data-content="{{ __('Total') }} {{ $items->sum('total') }}"/>

                            <div id="items-list" class="mb-3">
                                @foreach($items as $item)
                                    <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="{{ $item->name }}"/>
                                        </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="{{ $item->fee }}"
                                                   onchange="calc(event)"/>
                                        </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="number"
                                                   name="items[0][quantity]"
                                                   value="{{ $item->quantity }}" onchange="calc(event)"/>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <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="{{ $item->total }}"/>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>{{ __('Remove') }}</label>
                                            <button type="button" class="btn btn-danger form-control" onclick="removeRow(event)">
                                                <i class="fas fa-minus-circle"></i>
                                            </button>
                                        </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>
        let sum = 0;

        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());
            total.each(function (index, item) {
                sum += parseFloat($(item).val());
            });
            $('#contractTotal').data('content', sum);
        }

        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]');

            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.addEventListener('change', 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('type', 'number');
            itemQuantityInput.addEventListener('change', 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-2';
            itemTotalDiv.append(itemTotalLabel);
            itemTotalDiv.append(itemTotalInput);

            const itemRemoveLabel = document.createElement('label');
            itemRemoveLabel.textContent = "{{ __('Remove') }}";

            const itemRemoveButton = document.createElement('button');
            itemRemoveButton.className = 'btn btn-danger form-control';
            itemRemoveButton.setAttribute('type', 'button');
            itemRemoveButton.innerHTML = '<i class="fas fa-minus-circle"></i>';
            itemRemoveButton.addEventListener('click', removeRow);

            const itemRemoveDiv = document.createElement('div');
            itemRemoveDiv.className = 'form-group col-md-1';
            itemRemoveDiv.append(itemRemoveLabel);
            itemRemoveDiv.append(itemRemoveButton);

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

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

        function removeRow(e) {
            let target = e.target,
                parent = $(target).parents('.item'),
                count = $(target).parents('#items-list').find('.item').length;
            if(count == 1) {
                return;
            }
            console.log(count);
            parent.remove();
        }
    </script>
@endsection