@extends('frontend.layout.applayout')
@section('title', 'Order Details')

@section('main-content')
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                @include('components.customer-profile')
            </div>
            <div class="col-lg-8">
                <div class="add_box">
                    <form id="order-form">
                        @csrf
                        <table class="table" id="order-items-table">
                            <thead>
                                <tr>
                                    <th scope="col">Sl</th>
                                    <th scope="col">Images</th>
                                    <th scope="col">Product Name</th>
                                    <th scope="col">SKU</th>
                                    <th scope="col">Quantity</th>
                                    <th scope="col">Price</th>
                                    <th scope="col">Total Amount</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($order->items as $key => $item)
                                    <tr id="row-{{ $item->id }}">
                                        <input type="hidden" name="product_id[]" value="{{ $item->product?->id }}">
                                        <td>{{ $key + 1 }}</td>
                                        <td>
                                            <img src="{{ asset($item->product->images->first()->image_url ?? 'frontend/assets/images/cash-carry.png') }}"
                                                width="70px" height="70px">
                                        </td>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ $item->sku }}</td>
                                        <td>
                                            <div class="input-group">
                                                <button type="button"
                                                    class="btn btn-outline-secondary decrease-quantity">-</button>
                                                <input type="number" name="quantities[]" value="{{ $item->quantity }}"
                                                    class="form-control quantity-input" min="1"
                                                    data-price="{{ $item->price }}" data-id="{{ $item->id }}">
                                                <button type="button"
                                                    class="btn btn-outline-secondary increase-quantity">+</button>
                                            </div>
                                        </td>
                                        <td>${{ number_format($item->price, 2) }}</td>
                                        <td>
                                            <span class="total-amount" id="total-amount-{{ $item->id }}">
                                                ${{ number_format($item->total_amount, 2) }}
                                            </span>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger delete-row"
                                                data-id="{{ $item->id }}">Delete</button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="mt-3">
                            <h5>Add New Item:</h5>
                            <div class="d-flex align-items-start">
                                <div class="me-3 flex-grow-1">
                                    <select id="product-select" class="form-control mb-2">
                                        <option value="">Select Product</option>
                                        @foreach ($products as $product)
                                            <option value="{{ $product->id }}" data-price="{{ $product->price }}"
                                                data-image="{{ asset($product->images->first()->image_url ?? 'frontend/assets/images/cash-carry.png') }}"
                                                data-sku="{{ $product->sku }}">{{ $product->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="me-3">
                                    <input type="number" name="quantity" id="new-quantity" placeholder="Quantity"
                                        class="form-control mb-2" min="1">
                                </div>
                                <div>
                                    <button type="button" id="add-item-button" class="btn btn-success" style="white-space: nowrap;">Add Item</button>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="existing_order_id" value="{{ $order->id }}">
                        <button type="submit" class="btn btn-primary mt-3" style="white-space: nowrap;">Order Again</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <style>
        td {
            padding: 7px 10px !important;
            font-size: 14px !important;
        }

        .input-group {
            display: flex;
            width: 120px;
        }

        .quantity-input {
            text-align: center;
        }
    </style>

    @push('scripts')
        <script>
            function updateTotalAmount(input) {
                const quantity = parseInt(input.value);
                const price = parseFloat(input.dataset.price);
                const itemId = input.dataset.id;
                const totalAmount = (quantity * price).toFixed(2);
                document.getElementById('total-amount-' + itemId).textContent = '$' + totalAmount;
            }

            document.querySelectorAll('.quantity-input').forEach(input => {
                input.addEventListener('input', function() {
                    updateTotalAmount(this);
                });
            });

            document.querySelectorAll('.decrease-quantity').forEach(button => {
                button.addEventListener('click', function() {
                    const input = this.nextElementSibling;
                    let quantity = parseInt(input.value);
                    if (quantity > 1) {
                        quantity--;
                        input.value = quantity;
                        input.dispatchEvent(new Event('input'));
                    }
                });
            });

            document.querySelectorAll('.increase-quantity').forEach(button => {
                button.addEventListener('click', function() {
                    const input = this.previousElementSibling;
                    let quantity = parseInt(input.value);
                    quantity++;
                    input.value = quantity;
                    input.dispatchEvent(new Event('input'));
                });
            });

            document.querySelectorAll('.delete-row').forEach(button => {
                button.addEventListener('click', function() {
                    const itemId = this.dataset.id;
                    document.getElementById('row-' + itemId).remove();
                    updateSerialNumbers();
                });
            });

            document.getElementById('add-item-button').addEventListener('click', function() {
                const productSelect = document.getElementById('product-select');
                const selectedOption = productSelect.options[productSelect.selectedIndex];
                const productId = selectedOption.value; 
                const productName = selectedOption.text;
                const productPrice = parseFloat(selectedOption.dataset.price);
                const productImage = selectedOption.dataset.image;
                const productSKU = selectedOption.dataset.sku;
                const quantityInput = document.getElementById('new-quantity');
                const quantity = parseInt(quantityInput.value);

                if (productId && quantity > 0) {
                    const existingRow = [...document.querySelectorAll('#order-items-table tbody tr')].find(row => {
                        const hiddenInput = row.querySelector('input[name="product_id[]"]');
                        return hiddenInput && hiddenInput.value === productId;
                    });

                    if (existingRow) {
                        const quantityInput = existingRow.querySelector('.quantity-input');
                        let existingQuantity = parseInt(quantityInput.value);
                        existingQuantity += quantity; 
                        quantityInput.value = existingQuantity; 
                        quantityInput.dispatchEvent(new Event('input')); t
                    } else {
                        const totalAmount = (quantity * productPrice).toFixed(2);
                        const newRowIndex = document.querySelectorAll('#order-items-table tbody tr').length +
                            1; 
                        const newRow = `
                <tr id="row-${productId}">
                    <input type="hidden" name="product_id[]" value="${productId}">
                    <td>${newRowIndex}</td> <!-- Set the serial number here -->
                    <td><img src="${productImage}" width="70px" height="70px" class="img-fluid product-thumb"></td>
                    <td>${productName}</td>
                    <td>${productSKU}</td>
                    <td>
                        <div class="input-group">
                            <button type="button" class="btn btn-outline-secondary decrease-quantity">-</button>
                            <input type="number" name="quantities[]" value="${quantity}" class="form-control quantity-input" min="1" data-price="${productPrice}" data-id="${productId}">
                            <button type="button" class="btn btn-outline-secondary increase-quantity">+</button>
                        </div>
                    </td>
                    <td>$${productPrice}</td>
                    <td><span class="total-amount" id="total-amount-${productId}">$${totalAmount}</span></td>
                    <td><button type="button" class="btn btn-danger delete-row" data-id="${productId}">Delete</button></td>
                </tr>`;

                        const tbody = document.querySelector('#order-items-table tbody');
                        tbody.insertAdjacentHTML('beforeend', newRow); 

                        attachRowEvents(productId);

                        updateSerialNumbers();

                        quantityInput.value = '';
                    }
                }
            });


            function attachRowEvents(productId) {
                const newQuantityInput = document.querySelector(`#row-${productId} .quantity-input`);
                newQuantityInput.addEventListener('input', function() {
                    updateTotalAmount(this);
                });

                const newDecreaseButton = document.querySelector(`#row-${productId} .decrease-quantity`);
                newDecreaseButton.addEventListener('click', function() {
                    const input = this.nextElementSibling;
                    let quantity = parseInt(input.value);
                    if (quantity > 1) {
                        quantity--;
                        input.value = quantity;
                        input.dispatchEvent(new Event('input'));
                    }
                });

                const newIncreaseButton = document.querySelector(`#row-${productId} .increase-quantity`);
                newIncreaseButton.addEventListener('click', function() {
                    const input = this.previousElementSibling;
                    let quantity = parseInt(input.value);
                    quantity++;
                    input.value = quantity;
                    input.dispatchEvent(new Event('input'));
                });

                const newDeleteButton = document.querySelector(`#row-${productId} .delete-row`);
                newDeleteButton.addEventListener('click', function() {
                    const itemId = this.dataset.id;
                    document.getElementById('row-' + itemId).remove();
                    updateSerialNumbers();
                });
            }

            function updateSerialNumbers() {
                const rows = document.querySelectorAll('#order-items-table tbody tr');
                rows.forEach((row, index) => {
                    const serialCell = row.querySelector('td:first-child');
                    if (serialCell) {
                        serialCell.textContent = index + 1; // Update serial number to current index
                    }
                });
            }

            document.getElementById('order-form').addEventListener('submit', function(event) {
                event.preventDefault();
                const formData = new FormData(this);
                fetch('{{ route('order.create') }}', {
                        method: 'POST',
                        body: formData,
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            window.location.href = '{{ route('order.success') }}';
                        } else {
                            alert(data.message || 'Error occurred while creating the order.');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An unexpected error occurred.');
                    });
            });
        </script>
    @endpush
@endsection