@section('title', 'POS')
@section('description', 'POS')
@extends('layout.app')

@section('content')
    <div class="container-fluid mt-4">
        <div class="row">
            <!-- Cart Section -->
            <div class="col-md-6">

                <fieldset class="cart-section shadow">
                    <legend class="text-center">Cart</legend>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Item</th>
                                <th>Price</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="cartBody"></tbody>
                    </table>

                    <div class="card p-3 shadow-sm">
                        <div>
                            <label class="form-label">Payment Date</label>
                            <input type="date" class="form-control" id="paymentDate" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Payment Amount</label>
                            <input type="number" class="form-control" id="paymentAmount" readonly>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Payment Choice</label>
                            <select class="form-select" id="paymentChoice" required>
                                <option>Choose Payment Option</option>
                                <option value="Cash">Cash</option>
                                <option value="Credit Card">Credit Card</option>
                                <option value="Bank Transfer">Bank Transfer</option>
                            </select>
                        </div>

                        <div class="row mt-2">
                            <div class="col-6">
                                <div>
                                    <label for="ChannelType">Channel Type</label>
                                    <select name="channel_type" class="form-select" id="ChannelType" required>
                                        <option>Choose Channel Type</option>
                                        <option value="Email">Email</option>
                                        <option value="Phone">Phone</option>
                                        <option value="Telegram">Telegram</option>
                                        <option value="Other_Contact">Other Contact</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-6">
                                <!-- Second Dropdown (Initially Hidden via container) -->
                                <div id="dropdown2-container" style="display: none;">
                                    <label for="customerName">User info</label>
                                    <select id="customerName" name="description">
                                        <option value="">Select an option</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <h5 class="mt-3">Grand Total: $<span id="grandTotal">0</span></h5>
                        <button class="btn btn-primary w-100 mt-3" id="orderNow">Order Now</button>
                    </div>
                </fieldset>
            </div>

            <!-- Products Section -->
            @if (count($products) > 0)
                <div class="col-md-6 mt-30">
                    <div class="row " id="productList">
                        @foreach ($products as $product)
                            <div class="col-md-4 mb-4">
                                

                                <div class="card product-card p-3 add-to-cart" data-id="{{ $product->id }}"
                                    data-name="{{ $product->product_name }}" data-price="{{ $product->product_cost ?? 0 }}"
                                    data-image="{{ $product->accountProfile->logo ?? '' }}">
                                    <img src="{{ asset($product->accountProfile?->logo) ?? 'storage/account_profile/default.jpg' }}"
                                        alt="Product" class="product-img mx-auto d-block">
                                    <h6 class="product-name text-center">{{ $product->product_name }}</h6>
                                    <p class="text-center">({{ $product->account_holder }})</p>

                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            @else
                <div class="col-md-6">
                    <div class="card product-card p-3 add-to-cart" style="height:100%">
                        <h4 class="product-name text-center">No Product Available</h4>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

<!-- jQuery (Required for Selectize) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Selectize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>
<script>
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    let timeout;

    //================== Add to cart========================
    function renderCart() {
        let cartHtml = '';
        let total = 0;

        if (cart.length === 0) {
            cartHtml = `<tr><td colspan="4" class="text-center">No products in the cart</td></tr>`;
        } else {
            cart.forEach((item, index) => {
                const imageUrl = item.image ? item.image : '/storage/account_profile/default.jpg';
                total += item.price;
                cartHtml += `<tr>
                        <td><img src="${imageUrl}" class="cart-item"></td>
                        <td>${item.name}</td>
                        <td><input type="number" class="form-control price-input" data-index="${index}" value="${item.price}"></td>
                        <td><button class="btn btn-danger btn-sm" onclick="removeFromCart(${index})">X</button></td>
                    </tr>`;
            });
        }

        document.getElementById("cartBody").innerHTML = cartHtml;
        document.getElementById("grandTotal").textContent = total.toFixed(2);
        document.getElementById("paymentAmount").value = total.toFixed(2);
        localStorage.setItem("cart", JSON.stringify(cart));
    }

    //================== Remove from cart========================
    function removeFromCart(index) {
        cart.splice(index, 1);
        renderCart();
    }


    //==========When admin will select account type the name field will be show========
    document.addEventListener("DOMContentLoaded", function() {
        //==================For sweetalert initialization========================
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            },
            customClass: {
                popup: 'my-swal-popup', // You can add a custom class if needed
            }
        })


        //===========Handle the add-to-cart button click===========================
        renderCart();
        const addToCartButtons = document.querySelectorAll('.add-to-cart');
        addToCartButtons.forEach(button => {
            button.addEventListener('click', function() {

                let product = {
                    id: this.closest('.product-card').dataset.id,
                    image: this.closest('.product-card').dataset.image,
                    name: this.closest('.product-card').dataset.name,
                    price: Number(0),
                };

                let existingProduct = cart.find(item => item.id === product.id);

                if (!existingProduct) {
                    cart.push(product);
                    renderCart();
                } else {
                    Toast.fire({
                        icon: 'error',
                        title: 'This product is already in the cart.'
                    })
                }
            });
        });

        //============Handle the price input change===============================
        document.addEventListener('input', function(event) {
            if (event.target && event.target.classList.contains('price-input')) {
                clearTimeout(timeout); // Clear any previous timeout
                let index = event.target.dataset.index;
                let newPrice = parseFloat(event.target.value) || 0;
                cart[index].price = newPrice;

                // Set a timeout to trigger renderCart after 2000ms of inactivity
                timeout = setTimeout(function() {
                    renderCart(); // Only update after the user stops typing for 2000ms
                }, 1000);
            }
        });



        //========== Order place=================================================
        document.getElementById("orderNow").addEventListener("click", function() {
            if (cart.length === 0) {
                Swal.fire("Error!", "Your cart is empty.", "error");
                return;
            }
            // Define variable for reuse
            let paymentChoice = document.getElementById("paymentChoice").value;
            let ChannelType = document.getElementById("ChannelType").value;
            let customerName = document.getElementById("customerName").value;
            let orderData = {
                payment_date: document.getElementById("paymentDate").value,
                payment_amount: document.getElementById("paymentAmount").value,
                payment_choice: paymentChoice,
                channel_type: ChannelType,
                description: customerName,
                cart_items: cart,
            };

            // Validation for payment method
            if (paymentChoice === "" || paymentChoice === "Choose Payment Option") {
                Toast.fire({
                    icon: 'error',
                    title: 'Please choose a payment option.'
                })
                return;
            }

            // Validation for account type
            if (ChannelType === "" || ChannelType === "Choose Channel Type") {
                Toast.fire({
                    icon: 'error',
                    title: 'Please choose an channel type.'
                })
                return;
            }

            // Validation for name
            if (customerName === "") {
                Toast.fire({
                    icon: 'error',
                    title: 'Enter name'
                })
                return;
            }

            fetch("pos/order", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
                            .getAttribute("content"),
                    },
                    body: JSON.stringify(orderData),
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Toast.fire({
                            icon: 'success',
                            title: 'Order placed successfully!'
                        })
                        localStorage.removeItem("cart");
                        cart = [];
                        renderCart();
                        window.location.reload();
                    } else {
                        Toast.fire({
                            icon: 'error',
                            title: data.message
                        })
                        // window.location.reload();
                    }

                })
                .catch(error => {
                    Toast.fire({
                        icon: 'error',
                        title: 'Failed to place the order. Try again.'
                    })
                    // window.location.reload();
                });
        });


    });
    //============Selectize =====================

    $(document).ready(function() {
        // 1) Initialize Selectize on the FIRST dropdown
        var dropdown1 = $('#ChannelType').selectize({
            create: false,
            sortField: 'text',
            onChange: function(value) {
                // If a value is selected, show the container for the second dropdown
                if (value) {
                    $('#dropdown2-container').show();
                    populateSecondDropdown(value);
                } else {
                    // If no value, hide the second dropdown container again
                    $('#dropdown2-container').hide();
                }
            }
        });

        // 2) Initialize Selectize on the SECOND dropdown
        var dropdown2 = $('#customerName').selectize({
            create: true,
            sortField: 'text'
        });

        // Function to populate the second dropdown based on the first dropdown's value
        function populateSecondDropdown(selectedValue) {
            console.log(selectedValue);

            // Call API to get options based on the selected value
            fetch(`/pos/user?selectedValue=${selectedValue}`)
                .then(response => response.json())
                .then(data => {
                    var dropdown2Selectize = $('#customerName')[0].selectize;

                    // Clear old options
                    dropdown2Selectize.clearOptions();

                    // Add new options received from API
                    data.forEach(option => {
                        dropdown2Selectize.addOption({
                            value: option.id,
                            text: option.description
                        });
                    });

                    // Refresh dropdown
                    dropdown2Selectize.refreshOptions();
                })
                .catch(error => {
                    console.error("Error fetching options:", error);
                });
        }
    });
</script>

<style>
    .card {
        cursor: pointer;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out;
    }

    .card:hover {
        transform: scale(1.05);
    }

    .cart-item img {
        width: 50px;
        height: 50px;
    }

    .product-card img {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }

    .product-name {
        font-size: 16px;
        font-weight: bold;
    }

    .product-price {
        font-size: 14px;
        color: gray;
    }

    .cart-section {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
    }

    .cart-section legend {
        font-size: 18px;
        font-weight: bold;
    }

    .cart-item {
        max-width: 60px;
        max-height: 60px;
        object-fit: cover;
    }

    .table th,
    .table td {
        vertical-align: middle;
    }

    .product-img {
        width: 100px;
        height: 100px;
    }

    .form-label {
        font-weight: bold;
    }

    .btn {
        border-radius: 5px;
    }

    #orderNow {
        font-size: 16px;
    }

    .mt-30 {
        margin-top: 30px;
    }

    /* Adjust SweetAlert positioning if needed */
    .my-swal-popup {
        top: 12% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
</style>