@extends('admin.layouts.master')

@section('content')
    <div class="container-fluid">
        <form id="inventoryForm" method="POST" action="{{ route('admin.inventory.store') }}">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <div class="card mt-2 card-outline card-primary">
                        <div class="card-header">
                            Update Stock
                            <div class="card-tools">
                                <a id="add-product-btn" onclick="addProductRow()"
                                    class="btn btn-primary btn-sm text-white"><i class="bi bi-plus"></i> Add
                                    Product</a>
                            </div>
                        </div>

                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-md-4">
                                    <input required type="text" class="form-control form-control-sm"
                                        placeholder="Enter Date & Time" onfocus="(this.type='datetime-local')"
                                        onblur="if(this.value===''){this.type='text'}" name="entry_date_time"
                                        value="{{ old('entry_date_time') }}" />
                                </div>
                                <div class="col-md-4">
                                    <select required name="action" class="form-control form-control-sm">
                                        <option selected disabled>Select Action</option>
                                        @foreach ($actions as $action)
                                            <option value="{{ $action }}"
                                                {{ $action == old('action') ? 'selected' : '' }}>
                                                {{ ucfirst(str_replace('_', ' ', $action)) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <input required type="text" class="form-control form-control-sm"
                                        placeholder="Enter Title" name="title" value="{{ old('title') }}">
                                </div>
                            </div>

                            <hr style="background-color: black; height: 2px; margin: 2rem 0;">

                            <table class="table table-sm" id="myTable">
                                <thead>
                                    <tr class="text-left">
                                        <th style="width: 4%;">{{ __('#') }}</th>
                                        <th style="width: 60%;">{{ __('Product') }}</th>
                                        <th style="width: 15%;">{{ __('Stock') }}</th>
                                        <th style="width: 15%;">{{ __('Quantity') }}</th>
                                        <th style="width: 5%;" class="text-center">{{ __('Action') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="newlink">
                                    @php
                                        $productIds = old('product_id', []);
                                        $productQuantities = old('product_quantity', []);
                                        $productStocks = old('product_stock', []);
                                        $rowCount = count($productIds) > 0 ? count($productIds) : 1;
                                    @endphp
                                    @for ($i = 0; $i < $rowCount; $i++)
                                        <tr class="product">
                                            <th scope="row" class="product-id">{{ $i + 1 }}</th>
                                            <td class="text-start">
                                                <select style="width: 100%;" name="product_id[]" class="products select2">
                                                    <option selected disabled>Select Product</option>
                                                    @foreach ($products as $product)
                                                        <option value="{{ $product->id }}"
                                                            {{ isset($productIds[$i]) && $productIds[$i] == $product->id ? 'selected' : '' }}>
                                                            {{ $product->name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number"
                                                    class="form-control-sm form-control product-stock border-1"
                                                    name="product_stock[]"
                                                    value="{{ isset($productStocks[$i]) ? $productStocks[$i] : '' }}"
                                                    step="0.01" placeholder="0.00" readonly>
                                            </td>
                                            <td>
                                                <input type="number"
                                                    class="form-control-sm form-control product-quantity border-1"
                                                    name="product_quantity[]"
                                                    value="{{ isset($productQuantities[$i]) ? $productQuantities[$i] : '' }}"
                                                    placeholder="0.00" required min="1">
                                                <div class="invalid-feedback">Please enter a quantity</div>
                                            </td>
                                            <td class="text-center">
                                                @if ($i == 0)
                                                    <button disabled class="btn btn-sm btn-danger"><i
                                                            class="bi bi-x-circle text-white"></i></button>
                                                @else
                                                    <a class="btn btn-sm btn-danger" onclick="removeProductRow(this)"><i
                                                            class="bi bi-x-circle text-white"></i></a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endfor
                                </tbody>
                            </table>

                            <hr style="background-color: black; height: 2px; margin: 2rem 0;">

                            <div class="row">
                                <div class="col-12">
                                    <textarea name="note" id="note" rows="3" class="form-control" placeholder="Enter Note... (optional)">{{ old('note') }}</textarea>
                                </div>
                                <div class="col-12 mt-2">
                                    <button class="btn btn-sm btn-primary float-right"><i class="fas fa-plus"></i> Update
                                        Stock</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>
        </form>
    </div>
@endsection

@section('js')
    <script>
        $('.select2-selection__rendered').css('line-height', '1.5');
        $('.select2-selection').css('height', 'calc(1.5em + .5rem + 2px)');

        let products = @json($products);

        function addProductRow() {
            const tableBody = document.getElementById('newlink');
            const index = tableBody.children.length + 1;
            const newRow = document.createElement('tr');
            newRow.classList.add('product');

            let optionsHtml = '<option value="">Select Product</option>';
            products.forEach(product => {
                optionsHtml +=
                    `<option value="${product.id}" data-stock="${product.quantity}">${product.name}</option>`;
            });

            newRow.innerHTML = `
        <th scope="row" class="product-id">${index}</th>
        <td class="text-start">
            <div class="input-light">
                <select style="width:100%;" class="form-control form-control-sm bg-light border-0 products" name="product_id[]" id="choices-product-${index}" required>
                    ${optionsHtml}
                </select>
            </div>
        </td>
        <td>
            <input type="number" class="form-control-sm form-control product-stock border-1" name="product_stock[]" id="productStock-${index}" step="0.01" placeholder="0.00" readonly />
        </td>
        <td>
            <input type="number" class="form-control-sm form-control product-quantity border-1" name="product_quantity[]" id="productQuantity-${index}" placeholder="0.00" required min="1" />
            <div class="invalid-feedback">Please enter a quantity</div>
        </td>
        <td class="text-center">
            <a class="btn btn-sm btn-danger" onclick="removeProductRow(this)"><i class="bi bi-x-circle text-white"></i></a>
        </td>
    `;

            tableBody.appendChild(newRow);

            // Initialize Select2 for the new select element
            $('#choices-product-' + index).select2();
        }

        function removeProductRow(button) {
            const row = button.closest('tr');
            row.parentNode.removeChild(row);
            const rows = document.querySelectorAll('#newlink .product');
            rows.forEach((row, index) => {
                row.querySelector('.product-id').textContent = index + 1;
            });
        }

        $(document).delegate('.products', 'change', function() {
            const product_id = $(this).val();
            const productStock = $(this).closest('tr').find('.product-stock');
            const productQuantity = $(this).closest('tr').find('.product-quantity');

            let product = products.find(product => product.id == product_id);
            if (product) {
                productStock.val(product.quantity);
                let maxQuantity = product.quantity;

            }
        });
    </script>
@endsection