@extends('sales.layout.guest-layout')
@section('main')
    <section class="mt-4 mb-4">
        <form id="add-to-cart-form" method="POST" action="{{ route('sales.add_to_cart') }}">
            @csrf
            <input type="hidden" name="customer_id" value="{{ session('selectedCustomerID') }}">
            <div id="products-container"></div>
        </form>


        <div class="container-xxl">
            <div class="row">
                <div class="table-card position-relative">
                    <div class="pt-4 pe-3">

                        <div class="row">
                            <div class="col-lg-3 ps-3 col-md-4 my-auto">
                                <h4>Select Product</h4>
                            </div>
                            <div class="col-lg-8 col-md-6 text-end my-auto ms-auto">
                                <div class="row">
                                    <div class="col-xxl-9 col-xl-8 col-lg-7 col-md-6 my-auto">
                                        <h5>Please select category</h5>
                                    </div>
                                    <div class="col-xxl-3 col-xl-4 col-lg-5 col-md-6 product-padding-correction">
                                        <form action="" id="categoryForm" method="GET">
                                            <input type="hidden" value="{{ session('selectedCustomerID') }}"
                                                name="customer_id">
                                            <select name="category_id" id="category"
                                                class="form-select select category_id selected_categoryId"
                                                style="height: 50px; border-radius:10px; border:1px solid #323232; margin:0"
                                                onchange="document.getElementById('categoryForm').submit();">
                                                @foreach ($top_categories as $category)
                                                    <option value="{{ $category->id }}"
                                                        {{ $category->id == $selectedCategoryId ? 'selected' : '' }}>
                                                        {{ $category->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-1 col-2"></div>
                        </div>
                    </div>

                    <div class="table-responsive table-scroll mt-4" id="ProductTable">
                        <div class="tableDiv">
                            <table class="table table-hover product-tables">
                                <thead class="text-center ">
                                    <tr>
                                        <th><input type="checkbox" class="allCheck" value=""></th>
                                        <th>S.No</th>
                                        <th>Image</th>
                                        <th>Product</th>
                                        <th>Quantity on Hand</th>
                                        <th>Order Quantity</th>
                                        <th>Unit Price</th>
                                        <th>Selling Price</th>
                                    </tr>
                                </thead>

                                <tbody class="text-center">
                                    @forelse ($products as $product)
                                        <tr>
                                            <td>
                                                <input type="checkbox" class="individual_check selectProduct"
                                                    id="product_id-{{ $product->id }}" name="product_id[]"
                                                    data-value='@json(['id' => $product->id, 'price' => $product->price])' data-id="{{ $product->id }}">

                                            </td>

                                            <td>{{ $loop->iteration }}</td>
                                            <td><img src="{{ $product->images->first()->image_url ?? 'placeholder.jpg' }}"
                                                    alt="Product Image" width="50"></td>
                                            <td>{{ $product->name }}</td>
                                            <td>{{ $product->quantity_on_hand }}</td>
                                            <td>
                                                <div class="counter">
                                                    <input class="counter__input" id="quantity-{{ $product->id }}"
                                                        readonly="" type="text"
                                                        value="{{ old('quantity.' . $product->id, 1) }}"
                                                        name="quantity[{{ $product->id }}]" size="5">
                                                    <a class="counter__increment" data-id="{{ $product->id }}"
                                                        href="javascript:void(0)" contenteditable="false"
                                                        style="cursor: pointer;">+</a>
                                                    <a class="counter__decrement" data-id="{{ $product->id }}"
                                                        href="javascript:void(0)" contenteditable="false"
                                                        style="cursor: pointer;">–</a>
                                                </div>
                                            </td>
                                            <td>${{ $product->price }}</td>
                                            <td>
                                                $<input type="text" name="selling_price[{{ $product->id }}]"
                                                    class="form-control float-right" style="width: 40%; margin: auto;"
                                                    id="selling-price-{{ $product->id }}" value="{{ $product->price }}">
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8">No products available for this category.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div>
                        <button class="btn float-right add_to_cart add__cart" id="btnAddToCart" type="button"
                            style="color:#fff;background-color:green;">Add To Cart</button>

                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end mt-3">
            {{ $products->links() }}
        </div>

        <style>
            .counter__incrementt,
            .counter__decrementt {
                transition: all 0.4s ease-in-out;
            }

            .counter {
                position: relative;
                width: 6.5rem;
                height: 1.875rem;
                border-radius: 3px;
                text-align: center;
                overflow: hidden;
                margin: auto;
            }

            .counter__input {
                border: none;
                height: 100%;
                margin: 0 auto;
                text-align: center;
                color: #2f3640;
                font-size: 14px;
                background-color: transparent;
                border: 1px solid #57B05B;
                outline: none;
            }

            .counter__incrementt,
            .counter__decrementt {
                position: absolute;
                top: 0;
                font-size: 16px;
                line-height: 30px;
                height: 30px;
                width: 30px;
                font-weight: normal;
                color: #fff;
                text-decoration: none;
                background-color: #57B05B;
            }

            .counter__incrementt:hover,
            .counter__incrementt:active,
            .counter__incrementt:focus,
            .counter__decrementt:hover,
            .counter__decrementt:active,
            .counter__decrementt:focus {
                color: #ffffff;
                text-decoration: none;
                background-color: #57B05B;
            }

            .counter__incrementt {
                right: 0;
                border-left: 1px solid #2f3640;
            }

            .counter__decrementt {
                left: 0;
                top: 0;
                border-right: 1px solid #2f3640;
                line-height: 1.6875rem;
            }

            .product_image img {
                width: 100px !important;
                height: 50px !important;
                object-fit: cover;
                object-position: center center;
            }

            tr .elseImage:hover {
                background: #fff !important;
            }

            .search-btn-1 {
                margin-top: -60px;
                margin-left: 85%;
            }

            button {
                border: none !important;
            }
        </style>

        <script>
            $(document).on("click", "tbody tr", function(e) {
                if ($(e.target).is('input, a')) return;
                var checkbox = $(this).find('input[type="checkbox"]');
                checkbox.prop('checked', !checkbox.prop('checked'));
                let data = $(this).find('input[type="checkbox"]').data('value');
                if (!data || !data.id) return;

                let product = {
                    id: data.id,
                    qty: getQuantity(data.id),
                    price: data.price || getSellingPrice(data.id)
                };

                console.log("Product data:", product);
                let isChecked = checkbox.prop('checked');

                if (isChecked) {
                    console.log("Adding product to list:", product);
                    updateProducts(product);
                } else {
                    console.log("Removing product from list:", product);
                    products = products.filter(p => p.id !== product.id);
                    addToLocalStorage();
                }
            });


            $('#btnAddToCart').on('click', function() {
                const selectedProducts = getProductsFromLocalStorage();

                if (selectedProducts.length === 0) {
                    alert('No products selected!');
                    return;
                }

                $.ajax({
                    url: '{{ route('sales.add_to_cart') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        products: selectedProducts,
                        customer_id: '{{ Session::get('selectedCustomerID') }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            showMessage(response.message);

                            const checkboxes = document.querySelectorAll('.individual_check');
                            checkboxes.forEach(checkbox => {
                                checkbox.checked = false;
                            });

                            localStorage.removeItem('products');
                            console.log("Cleared products from local storage.");
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log("AJAX Error:", error);
                        alert('An error occurred. Please try again.');
                    }
                });
            });



            $(document).ready(function() {
                restoreProducts();
            });

            function showMessage(message) {
                const messageElement = $('<div class="alert alert-success"></div>').text(message);

                $('header').after(messageElement);

                setTimeout(function() {
                    messageElement.fadeOut();
                }, 3000);
            }
        </script>

    </section>
@endsection