@extends('layouts.app')

@section('title', __('Project'))

@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>{{ __('New Project') }} <span class="badge badge-pill badge-secondary"
                                                          id="contractTotal">0</span></h5>
                    </div>

                    <div class="card-body">
                        <form method="post" action="{{ route('project.store') }}">
                            @csrf
                            <input class="totalSum" type="hidden" name="total" value="0">
                            <div class="form-row mb-3">
                                <div class="form-group col-md-6">
                                    <label for="number">{{ __('Name/Number') }}</label>
                                    <input id="number"
                                           class="form-control @if($errors->has('number')) is-invalid @endif"
                                           type="text" name="number" value="{{ old('number') }}"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('number'))
                                            {{ $errors->first('number') }}
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="customer">{{ __('Customer') }}</label>
                                    <select class="custom-select @if($errors->has('customer')) is-invalid @endif"
                                            id="customer" name="customer">
                                    </select>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('customer'))
                                            {{ $errors->first('customer') }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="form-row mb-3">
                                <div class="form-group col-md-3">
                                    <label for="start_date">{{ __('Start Date') }}</label>
                                    <input id="start_date"
                                           class="form-control @if($errors->has('start_date')) is-invalid @endif"
                                           type="date" name="start_date"
                                           value="{{ old('start_date') }}"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('start_date'))
                                            {{ $errors->first('start_date') }}
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="end_date">{{ __('End Date') }}</label>
                                    <input id="end_date"
                                           class="form-control @if($errors->has('end_date')) is-invalid @endif"
                                           type="date" name="end_date"
                                           value="{{ old('end_date') }}"/>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('end_date'))
                                            {{ $errors->first('end_date') }}
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group col-md-3">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="c_check" class="custom-control-input"
                                               id="closeDateCheckBox" @if(old('c_check')) checked @endif />
                                        <label for="closeDateCheckBox"
                                               class="custom-control-label">{{ __('Close Date') }}</label>
                                        <input id="close_date"
                                               class="form-control mt-2 @if($errors->has('close_date')) is-invalid @endif"
                                               type="date" name="close_date"
                                               value="{{ old('close_date') }}" @unless(old('c_check')) disabled
                                               @endunless
                                               style="margin-left: -1.5rem;width: calc(100% + 1.5rem)"/>
                                        <div class="invalid-tooltip" style="margin-left: -1.5rem">
                                            @if($errors->has('close_date'))
                                                {{ $errors->first('close_date') }}
                                            @endif
                                        </div>
                                        <small class="form-text text-muted"
                                               style="margin-left: -1.5rem;width: calc(100% + 1.5rem)">
                                            {{ __('Close Date') }}
                                        </small>
                                    </div>
                                </div>

                                <div class="form-group col-md-3">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="p_check" class="custom-control-input"
                                               id="invoiceCheckBox" @if(old('p_check')) checked @endif/>
                                        <label for="invoiceCheckBox"
                                               class="custom-control-label">{{ __('Invoice') }}</label>
                                        <input id="payment"
                                               class="form-control mt-2 @if($errors->has('payment')) is-invalid @endif"
                                               type="number" name="payment" min="0"
                                               value="{{ old('payment') == 0 ? 0 : old('payment') }}"
                                               placeholder="{{ __('Month/s') }}" @unless(old('p_check')) disabled
                                               @endunless
                                               style="margin-left: -1.5rem;width: calc(100% + 1.5rem)"/>
                                        <small class="form-text text-muted"
                                               style="margin-left: -1.5rem;width: calc(100% + 1.5rem)">
                                            {{ __('Invoice auto generated every') }}
                                        </small>
                                        <div class="invalid-tooltip" style="margin-left: -1.5rem">
                                            @if($errors->has('payment'))
                                                {{ $errors->first('payment') }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="hr-text" data-content="{{ __('Items') }}"/>

                            <div id="items-list" class="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]') }}"/>
                                    </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]') }}"
                                               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="{{ old('items[0][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="{{ old('items[0][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>
                            </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-primary">{{ __('Save') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            $('#customer').select2({
                ajax: {
                    url: '{{ route('customersListJson') }}',
                    dataType: 'json',
                    processResults: function (data) {
                        return {
                            results: $.map(data,
                                function (item) {
                                    return {
                                        text: item.name,
                                        id: item.id
                                    }
                                })
                        };
                    },
                    cache: true
                },
                placeholder: '{{ __('Select Customer') }}'
            });
            $('#invoiceCheckBox').on('change', function (e) {
                let checked = e.target.checked;
                if (checked) {
                    document.getElementById('payment').removeAttribute('disabled');
                } else {
                    document.getElementById('payment').setAttribute('disabled', 'disabled');
                }
            });
            $('#closeDateCheckBox').on('change', function (e) {
                let checked = e.target.checked;
                if (checked) {
                    document.getElementById('close_date').removeAttribute('disabled');
                } else {
                    document.getElementById('close_date').setAttribute('disabled', 'disabled');
                }
            });

        });

        function calc(e) {
            let sum = 0;

            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').html(sum);
            $('.totalSum').val(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;
            }
            parent.remove();
        }

    </script>
@endsection