@extends('layouts.app')

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

@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 col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="float-left">{{ __('New Purchase') }}</h5>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('purchase.store') }}">
                            @csrf
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="date">{{ __('Date') }}</label>
                                    <input type="date" class="form-control @if($errors->has('date')) is-invalid @endif"
                                           name="date" id="date" placeholder="Date"
                                           value="{{ old('date') }}">
                                    <div class="invalid-tooltip">
                                        @if($errors->has('date'))
                                            {{ $errors->first('date') }}
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="supplier">{{ __('Supplier') }}</label>
                                    <select class="custom-select @if($errors->has('supplier')) is-invalid @endif"
                                            id="supplier" name="supplier" placeholder="Supplier">
                                        @foreach($suppliers as $supplier)
                                            <option @if(old('supplier') == $supplier->id) selected
                                                    @endif value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-tooltip">
                                        @if($errors->has('supplier'))
                                            {{ $errors->first('supplier') }}
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col-12 form-group">
                                    <textarea class="form-control" name="note"
                                              placeholder="{{ __('Notes') }}">{{ old('note') }}</textarea>
                                </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">
                                        <label for="item_name_0_name">{{ __('Name') }}</label>
                                        <input id="item_name_0_name"
                                               class="form-control @if($errors->has('items.0.name')) is-invalid @endif"
                                               type="text"
                                               name="items[0][name]" value="{{ old('items.0.name') }}"/>
                                        <div class="invalid-tooltip">
                                            @if($errors->has('items.0.name'))
                                                {{ $errors->first('items.0.name') }}
                                            @endif
                                        </div>
                                    </div>

                                    <div class="form-group col">
                                        <label for="item_name_0_description">{{ __('Description') }}</label>
                                        <input id="item_name_0_description"
                                               class="form-control @if($errors->has('items.0.description')) is-invalid @endif"
                                               type="text"
                                               name="items[0][description]" value="{{ old('items.0.description') }}"/>
                                        <div class="invalid-tooltip">
                                            @if($errors->has('items.0.description'))
                                                {{ $errors->first('items.0.description') }}
                                            @endif
                                        </div>
                                    </div>

                                    <div class="form-group col">
                                        <label for="item_name_0_quantity">{{ __('Quantity') }}</label>
                                        <input id="item_name_0_quantity"
                                               class="form-control quantity @if($errors->has('items.0.quantity')) is-invalid @endif"
                                               type="number"
                                               name="items[0][quantity]"
                                               value="{{ old('items.0.quantity') }}"
                                               onchange="calcCost(event);calcSell(event);calcQuantity(event)"/>
                                        <div class="invalid-tooltip">
                                            @if($errors->has('items.0.quantity'))
                                                {{ $errors->first('items.0.quantity') }}
                                            @endif
                                        </div>
                                    </div>

                                    <div class="form-group col">
                                        <label for="item_name_0_cost">{{ __('Cost') }}</label>
                                        <input id="item_name_0_cost"
                                               class="form-control cost @if($errors->has('items.0.cost')) is-invalid @endif"
                                               type="text"
                                               name="items[0][cost]" value="{{ old('items.0.cost') }}"
                                               onchange="calcCost(event)"/>
                                        <div class="invalid-tooltip">
                                            @if($errors->has('items.0.cost'))
                                                {{ $errors->first('items.0.cost') }}
                                            @endif
                                        </div>
                                    </div>

                                    <div class="form-group col">
                                        <label for="item_name_0_sell">{{ __('Sell') }}</label>
                                        <input id="item_name_0_sell"
                                               class="form-control sell @if($errors->has('items.0.sell')) is-invalid @endif"
                                               type="text"
                                               name="items[0][sell]" value="{{ old('items.0.sell') }}"
                                               onchange="calcSell(event)"/>
                                        <div class="invalid-tooltip">
                                            @if($errors->has('items.0.sell'))
                                                {{ $errors->first('items.0.sell') }}
                                            @endif
                                        </div>
                                    </div>

                                    <div class="form-group col">
                                        <label for="item_name_0_total_cost">{{ __('Total Cost') }}</label>
                                        <input id="item_name_0_total_cost"
                                               class="form-control total_cost"
                                               readonly
                                               type="text" name="items[0][total_cost]"
                                               value="{{ old('items.0.total_cost') }}"/>
                                    </div>

                                    <div class="form-group col">
                                        <label for="item_name_0_total_sell">{{ __('Total Sell') }}</label>
                                        <input id="item_name_0_total_sell"
                                               class="form-control total_sell"
                                               readonly
                                               type="text" name="items[0][total_sell]"
                                               value="{{ old('items.0.total_sell') }}"/>
                                    </div>

                                    <div class="form-group col">
                                        <label for="item_name_0_alert_before">{{ __('Alert Before') }}</label>
                                        <input id="item_name_0_alert_before"
                                               class="form-control alert_before @if($errors->has('items.0.alert_before')) is-invalid @endif"
                                               type="text" name="items[0][alert_before]"
                                               value="{{ old('items.0.alert_before') }}"/>
                                        <div class="invalid-tooltip">
                                            @if($errors->has('items.0.alert_before'))
                                                {{ $errors->first('items.0.alert_before') }}
                                            @endif
                                        </div>
                                    </div>

                                    <div class="form-group col">
                                        <label for="item_name_0_warehouse">{{ __('Warehouse') }}</label>
                                        <select id="item_name_0_warehouse"
                                                class="custom-select warehouse @if($errors->has('items.0.warehouse')) is-invalid @endif"
                                                readonly
                                                type="text" name="items[0][warehouse]">
                                            @foreach($warehouses as $warehouse)
                                                <option @if(old('items.0.warehouse') == $warehouse->id) selected
                                                        @endif value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="invalid-tooltip">
                                            @if($errors->has('items.0.warehouse'))
                                                {{ $errors->first('items.0.warehouse') }}
                                            @endif
                                        </div>
                                    </div>

                                    <div class="form-group col">
                                        <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-block btn-outline-primary mb-3"
                                    onclick="addItem()">{{ __('Add') }}</button>

                            <div class="form-row">

                                <div class="col form-group">
                                    <label for="sell">{{ __('Selling') }}</label>
                                    <input type="text" id="sell"
                                           class="form-control"
                                           disabled value="0">
                                </div>
                                <div class="col form-group">
                                    <label for="quantity">{{ __('Quantity') }}</label>
                                    <input type="text" id="quantity"
                                           class="form-control"
                                           disabled value="0">
                                </div>
                                <div class="col form-group">
                                    <label for="amount">{{ __('Amount') }}</label>
                                    <input type="text" id="amount"
                                           class="form-control @if($errors->has('amount')) is-invalid @endif"
                                           readonly name="amount" value="0">
                                    <div class="invalid-tooltip">
                                        @if($errors->has('amount'))
                                            {{ $errors->first('amount') }}
                                        @endif
                                    </div>
                                </div>
                                <div class="col form-group">
                                    <label for="paid">{{ __('Paid') }}</label>
                                    <input type="number" id="paid"
                                           class="form-control @if($errors->has('paid')) is-invalid @endif"
                                           name="paid" value="{{ old('paid') }}" min="0">
                                    <div class="invalid-tooltip">
                                        @if($errors->has('paid'))
                                            {{ $errors->first('paid') }}
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-outline-primary mt-2">{{ __('Save') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function calcCost(e) {
            let sumCost = 0;
            let parent = $(e.target).parents('.item');
            let cost = parent.find('.cost');
            let quantity = parent.find('.quantity');
            let total_cost = parent.find('.total_cost');

            total_cost.val(cost.val() * quantity.val());

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

            $('#amount').val(sumCost);
        }

        function calcSell(e) {
            let sumSell = 0;
            let parent = $(e.target).parents('.item');
            let cost = parent.find('.sell');
            let quantity = parent.find('.quantity');
            let total_sell = parent.find('.total_sell');

            total_sell.val(cost.val() * quantity.val());

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

            $('#sell').val(sumSell);
        }

        function calcQuantity(e) {
            let sumQuantity = 0;
            let parent = $(e.target).parents('.item');
            let quantity = parent.find('.quantity');

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

            $('#quantity').val(sumQuantity);
        }

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

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

            // Name
            const itemNameLabel = document.createElement('label');
            itemNameLabel.setAttribute('for', 'item_name_' + items.length + '_name');
            itemNameLabel.textContent = "{{ __('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';
            itemNameDiv.append(itemNameLabel);
            itemNameDiv.append(itemNameInput);

            // Description
            const itemDescriptionLabel = document.createElement('label');
            itemDescriptionLabel.setAttribute('for', 'item_description_' + items.length + '_description');
            itemDescriptionLabel.textContent = "{{ __('Description') }}";

            const itemDescriptionInput = document.createElement('input');
            itemDescriptionInput.className = 'form-control';
            itemDescriptionInput.id = 'item_description_' + items.length + '_description';
            itemDescriptionInput.setAttribute('name', 'items[' + items.length + '][description]');

            const itemDescriptionDiv = document.createElement('div');
            itemDescriptionDiv.className = 'form-group col';
            itemDescriptionDiv.append(itemDescriptionLabel);
            itemDescriptionDiv.append(itemDescriptionInput);

            // Quantity
            const itemQuantityLabel = document.createElement('label');
            itemQuantityLabel.setAttribute('for', 'item_quantity_' + items.length + '_quantity');
            itemQuantityLabel.textContent = "{{ __('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', calcCost);
            itemQuantityInput.addEventListener('change', calcSell);
            itemQuantityInput.addEventListener('change', calcQuantity);

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

            // Cost
            const itemCostLabel = document.createElement('label');
            itemCostLabel.setAttribute('for', 'item_cost_' + items.length + '_cost');
            itemCostLabel.textContent = "{{ __('Cost') }}";

            const itemCostInput = document.createElement('input');
            itemCostInput.className = 'form-control cost';
            itemCostInput.id = 'item_cost_' + items.length + '_cost';
            itemCostInput.setAttribute('name', 'items[' + items.length + '][cost]');
            itemCostInput.addEventListener('change', calcCost);

            const itemCostDiv = document.createElement('div');
            itemCostDiv.className = 'form-group col';
            itemCostDiv.append(itemCostLabel);
            itemCostDiv.append(itemCostInput);

            // Sell
            const itemSellLabel = document.createElement('label');
            itemSellLabel.setAttribute('for', 'item_sell_' + items.length + '_sell');
            itemSellLabel.textContent = "{{ __('Sell') }}";

            const itemSellInput = document.createElement('input');
            itemSellInput.className = 'form-control sell';
            itemSellInput.id = 'item_sell_' + items.length + '_sell';
            itemSellInput.setAttribute('name', 'items[' + items.length + '][sell]');
            itemSellInput.addEventListener('change', calcSell);

            const itemSellDiv = document.createElement('div');
            itemSellDiv.className = 'form-group col';
            itemSellDiv.append(itemSellLabel);
            itemSellDiv.append(itemSellInput);

            // Total Cost
            const itemTotalCostLabel = document.createElement('label');
            itemTotalCostLabel.setAttribute('for', 'item_total_cost_' + items.length + '_total_cost');
            itemTotalCostLabel.textContent = "{{ __('Total Cost') }}";

            const itemTotalCostInput = document.createElement('input');
            itemTotalCostInput.className = 'form-control total_cost';
            itemTotalCostInput.id = 'item_total_cost_' + items.length + '_total_cost';
            itemTotalCostInput.setAttribute('name', 'items[' + items.length + '][total_cost]');
            itemTotalCostInput.setAttribute('readonly', 'readonly');

            const itemTotalCostDiv = document.createElement('div');
            itemTotalCostDiv.className = 'form-group col';
            itemTotalCostDiv.append(itemTotalCostLabel);
            itemTotalCostDiv.append(itemTotalCostInput);

            // Total Sell
            const itemTotalSellLabel = document.createElement('label');
            itemTotalSellLabel.setAttribute('for', 'item_total_sell_' + items.length + '_total_sell');
            itemTotalSellLabel.textContent = "{{ __('Total Sell') }}";

            const itemTotalSellInput = document.createElement('input');
            itemTotalSellInput.className = 'form-control total_sell';
            itemTotalSellInput.id = 'item_total_sell_' + items.length + '_total_sell';
            itemTotalSellInput.setAttribute('name', 'items[' + items.length + '][total_sell]');
            itemTotalSellInput.setAttribute('readonly', 'readonly');

            const itemTotalSellDiv = document.createElement('div');
            itemTotalSellDiv.className = 'form-group col';
            itemTotalSellDiv.append(itemTotalSellLabel);
            itemTotalSellDiv.append(itemTotalSellInput);

            // Alert Before
            const itemAlertBeforeLabel = document.createElement('label');
            itemAlertBeforeLabel.setAttribute('for', 'item_alert_before_' + items.length + '_alert_before');
            itemAlertBeforeLabel.textContent = "{{ __('Alert') }}";

            const itemAlertBeforeInput = document.createElement('input');
            itemAlertBeforeInput.className = 'form-control';
            itemAlertBeforeInput.id = 'item_alert_before_' + items.length + '_alert_before';
            itemAlertBeforeInput.setAttribute('name', 'items[' + items.length + '][alert_before]');

            const itemAlertBeforeDiv = document.createElement('div');
            itemAlertBeforeDiv.className = 'form-group col';
            itemAlertBeforeDiv.append(itemAlertBeforeLabel);
            itemAlertBeforeDiv.append(itemAlertBeforeInput);

            // Warehouse
            const itemWarehouseLabel = document.createElement('label');
            itemWarehouseLabel.setAttribute('for', 'item_warehouse_' + items.length + '_warehouse');
            itemWarehouseLabel.textContent = "{{ __('Warehouse') }}";

            const itemWarehouseSelect = document.createElement('select');
            itemWarehouseSelect.className = 'custom-select';
            itemWarehouseSelect.id = 'item_warehouse_' + items.length + '_warehouse';
            itemWarehouseSelect.setAttribute('name', 'items[' + items.length + '][warehouse]');

                @foreach($warehouses as $warehouse)
            const itemWarehouseSelectOption = document.createElement('option');
            itemWarehouseSelectOption.textContent = "{{ $warehouse->name }}";
            itemWarehouseSelectOption.value = "{{ $warehouse->id }}";

            itemWarehouseSelect.append(itemWarehouseSelectOption);
                @endforeach

            const itemWarehouseDiv = document.createElement('div');
            itemWarehouseDiv.className = 'form-group col';
            itemWarehouseDiv.append(itemWarehouseLabel);
            itemWarehouseDiv.append(itemWarehouseSelect);

            // Remove Button
            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';
            itemRemoveDiv.append(itemRemoveLabel);
            itemRemoveDiv.append(itemRemoveButton);

            // Item
            const item = document.createElement('div');
            item.className = 'form-row item';
            item.append(itemNameDiv);
            item.append(itemDescriptionDiv);
            item.append(itemQuantityDiv);
            item.append(itemCostDiv);
            item.append(itemSellDiv);
            item.append(itemTotalCostDiv);
            item.append(itemTotalSellDiv);
            item.append(itemAlertBeforeDiv);
            item.append(itemWarehouseDiv);
            item.append(itemRemoveDiv);

            // Item List
            const container = document.getElementById('items-list');
            container.append(item);
        }
    </script>
@endsection