@extends("layouts.app")
<style>
    .vspacer {
    margin-top: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;

}
</style>
@section("content")
    <div class="p-4">
        <div class="container card m-auto">
            @php
                $payment = App\Models\Payment::where('status','enabled')->first();
                $route  = isset($payment->payment_method) ? route($payment->payment_method.'.order-payment') : '/payment-error';
            @endphp
            <form action="{{$route}}" method="POST" id="checkout-form">
                @csrf
                <h3 class="mt-2">Cart</h3>
                
                @session('success')
                    <p class="alert alert-success" id="success-message" role="alert">
                        {{session('success')}}
                    </p>
                @endsession
                @session('error')
                    <p class="alert alert-danger" role="alert">
                        {{session('error')}}
                    </p>
                @endsession

                @error('quantity.*')
                <span class="help-block text-danger">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror

                <!-- Cart Message (Displayed when the cart is empty) -->
                <div id="cart-message" class="text-center" style="display: none;">
                    <p>Your cart is empty.</p>
                    <div class="vspacer">+++ On the bank statement NO reference to TastySlips appears. The recipient of the money is "TS Marketplace" +++ In the next step you can easily choose one of the popular payment methods +++ No registration necessary +++</div>
                </div>

                <!-- Cart Table -->
                <div class="table-responsive">
                    <table class="table cart-table" id="cart-table" style="display: none;">
                        <thead>
                            <tr>
                                <th>Sr.No</th>
                                <th>Product</th>
                                <th>Product Title</th>
                                <th>Description</th>
                                <th>Days Worn</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <hr>

                <div id="checkout-form" class="checkout-form-content">
                    <h4>Shipping Information</h4>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label>First Name: </label><input type="text" name="first_name" required class="form-control">
                            
                            @error('first_name')
                            <span class="help-block text-danger">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-6 form-group">
                            <label>Last Name: </label><input type="text" name="last_name" required class="form-control">
                            
                            @error('last_name')
                            <span class="help-block text-danger">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-6 form-group">
                            <label>Email: </label><input type="text" name="email" required class="form-control">
                            
                            @error('email')
                            <span class="help-block text-danger">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-6 form-group">
                            <label>Phone Number: (Optional)</label><input type="text" name="phone_number" class="form-control">
                            
                            @error('phone_number')
                            <span class="help-block text-danger">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-6 form-group">
                            <label>Address: </label><input type="text" name="address" required class="form-control">
                            
                            @error('address')
                            <span class="help-block text-danger">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-6 form-group">
                            <label>City: </label> <input type="text" name="city" required class="form-control">
                            
                            @error('city')
                            <span class="help-block text-danger">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-6 form-group">
                            <label>Post Code: </label> <input type="text" name="postcode" class="form-control">
                            
                            @error('postcode')
                            <span class="help-block text-danger">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="col-md-12 form-group">
                            <button type="submit" id="checkout-btn" class="ps-btn" disabled>Proceed to Checkout</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        const cartTableBody = document.querySelector("#cart-table tbody");
        const cartMessage = document.getElementById("cart-message");
        const cartTable = document.getElementById("cart-table");
        const checkoutFormContent = document.querySelector(".checkout-form-content");

        // Function to render cart items from localStorage
        function renderCart() {
            const cart = JSON.parse(localStorage.getItem("cart")) || [];
            console.log('cart.length',cart.length);

            if (cart.length === 0) {
                // Show cart message if cart is empty
                cartMessage.style.display = "block";
                cartTable.style.display = "none";
                checkoutFormContent.style.display = "none";
            } else {
                // Show the cart table if there are items in the cart
                cartMessage.style.display = "none";
                cartTable.style.display = "table";

                cartTableBody.innerHTML = ""; // Clear table
                let i = 1;
                cart.forEach((item, index) => {
                    const row = document.createElement("tr");
                    const media = item.type === 'image' 
                        ? `<img src="storage/ads/${item.image}" alt="${item.name}" width="100">` 
                        : `<div class="image">
                            <video width="100" height="100">
                                <source src="storage/${item.image}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>`;

                    row.innerHTML = `
                        <td>${i++}<input type="hidden" name="ids[]" value="${item.id}"></td>
                        <td><a href="${'product-details/' + item.id}">
                            ${media}
                            <input type="hidden" name="name[]" value="${item.name}"></a>
                        </td>
                        <td>${item.name}</td>
                        <td>${item.description ? item.description : ''}</td>
                        <td>${item.days ? item.days : ''}</td>
                        <td>€ ${item.price}<input type="hidden" name="price[]" value="${item.price}"></td>
                        <td><input type="number" name="quantity[]" value="${item.quantity}" class="form-control"></td>
                        <td><button type="button" class="remove-btn ps-btn" data-index="${index}">Remove</button></td>
                    `;
                    cartTableBody.appendChild(row);
                });

                // Enable/disable checkout button based on cart length
                if (cart.length === 0) {
                    document.getElementById('checkout-btn').disabled = true;
                } else {
                    document.getElementById('checkout-btn').disabled = false;
                }
            }
        }

        // Remove item from cart
        cartTableBody.addEventListener("click", (e) => {
            if (e.target.classList.contains("remove-btn")) {
                const index = e.target.dataset.index;
                let cart = JSON.parse(localStorage.getItem("cart")) || [];
                cart.splice(index, 1);
                localStorage.setItem("cart", JSON.stringify(cart));
                renderCart();  // Re-render cart after removal
                const showItemsCart = document.querySelector('.show-itmes-cart');
                if (showItemsCart) {
                    let currentCount = parseInt(showItemsCart.textContent) || 0;
                    showItemsCart.textContent = Math.max(0, currentCount - 1); // Prevent going below 0
                }


            }
        });

        // Initial render cart data
        renderCart();


        window.addEventListener('DOMContentLoaded', () => {
            const successMessage = document.getElementById('success-message');
            const showItemsCart = document.querySelector('.show-itmes-cart');

            if (successMessage) {
                localStorage.removeItem("cart");
                if (showItemsCart) {
                    showItemsCart.textContent = '0';
                }
                renderCart(); // Refresh cart UI after clearing
            }
        });


    </script>

@endsection