@extends('layouts.public.app')

@section('title', 'Cart | Chemical Wholesale')

@section('content')
    <div class="greybg pb-4">
        <div class="search-keywords">
            <div class="container-fluid">
                <p class="search-keywords-text"> Shopping Cart</p>
                <p class="small text-secondary">Home > Cart</p>
            </div>
        </div>

        <div class="mt-4">
            <div class="container-fluid">
                <form action="{{ route('public.checkout_session') }}" id="checkoutForm" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-xl-8 col-lg-8">
                            {{--
                            <div class="card mb-3 d-none">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h6 class="fw-bold mb-0">Filter</h6>
                                        <a href="" class="cart-filterbtn"><i class="bi bi-sliders me-1"></i> Add
                                            Filter</a>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="card">
                                <div class="card-header">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h6 class="fw-bold mb-0">Products added in your cart</h6>
                                        <div class="form-check">
                                            <input class="form-check-input check" id="check-all" type="checkbox"
                                                value="">
                                            <label class="form-check-label">
                                                <span id="select-check-text">Deselect All</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body p-0">
                                    @if (count($cart) > 0)
                                        @php
                                            $groupedCart = $cart->groupBy(
                                                fn($cartItem) => $cartItem->getProduct->getBusiness['id'],
                                            );
                                        @endphp
                                        @foreach ($groupedCart as $businessName => $cartItems)
                                            @php
                                                $firstCartItem = $cartItems->first();
                                                $business = $firstCartItem->getProduct->getBusiness;
                                                $businessId = $business['id'];
                                                $businessName = $business['company'];
                                            @endphp
                                            <div class="cart-seller-strip">
                                                <h6 class="mb-0">Showing products from
                                                    <a href="{{ route('public.supplier.profile', $business['slug']) }}"
                                                        class="text-white text-decoration-underline">
                                                        {{ $businessName }} </a>
                                                </h6>
                                            </div>
                                            @foreach ($cartItems as $cartitem)
                                                @php
                                                    $images = @$cartitem->getproduct->getimages
                                                        ? @$cartitem->getproduct->getimages->groupby('section')
                                                        : '';
                                                @endphp
                                                <div
                                                    class="cart-item {{ @$cartitem->getproduct->getpackage ? '' : 'disabled' }}">
                                                    <div class="cart-select">
                                                        <div class="form-check">
                                                            @if ($cartitem->getpackage)
                                                                <input class="form-check-input product_checkout"
                                                                    type="checkbox"
                                                                    data-supplier_id="{{ $cartitem->getProduct->getBusiness->id }}"
                                                                    value="{{ @$cartitem['getProduct']['uuid'] }}" checked
                                                                    name="product_id[]"
                                                                    oninvalid="setCustomValidity('Please select at least 1 product to continue.')"
                                                                    onchange="try{setCustomValidity('')}catch(e){}">

                                                                <input id="package_id" name="package_id[]"
                                                                    value="{{ @$cartitem->package_id }}" type="text"
                                                                    hidden>
                                                            @else
                                                                <input class="form-check-input" type="checkbox" disabled>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="cart-product-image">
                                                        <a
                                                            href="{{ route('public.product', ['seller' => trim(preg_replace('/[^a-z0-9]+/', '-', strtolower($cartitem['getProduct']['getBusiness']['company'] ?: 'product'))), 'id' => @$cartitem['getProduct']['slug']]) }}">
                                                            <img src="{{ !empty($images['mainimage']) ? @$images['mainimage']->first()->path : '' }}"
                                                                alt="img" onerror="src='/assets/img/noimg.jpg'">
                                                        </a>
                                                    </div>
                                                    <div class="cart-product-details">
                                                        <div class="cart-p-header">
                                                            <a href="{{ route('public.product', ['seller' => trim(preg_replace('/[^a-z0-9]+/', '-', strtolower($cartitem['getProduct']['getBusiness']['company'] ?: 'product'))), 'id' => @$cartitem['getProduct']['slug']]) }}"
                                                                class="text-dark">
                                                                <h5 class="mb-0 cart-p-title">
                                                                    {{ @$cartitem['getProduct']['name'] }}
                                                                </h5>
                                                            </a>
                                                            <a href="{{ route('public.cart.remove', @$cartitem['id']) }}">
                                                                <div class="cart-p-delete-i">
                                                                    <i class="bi bi-trash3-fill"></i>
                                                                </div>
                                                            </a>
                                                        </div>
                                                        <div class="cart-p-body">
                                                            @if ($cartitem->getproduct->getpackage)
                                                                <table class="product-info-table" style="width:100%">
                                                                    <tr>
                                                                        <td class="td-mw-150">Product SKU:</td>
                                                                        <td>{{ @$cartitem->getProduct->product_sku }}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="td-mw-150">Supplier:</td>
                                                                        <td><a href="{{ route('public.supplier.profile', $cartitem->getProduct->getBusiness->slug) }}"
                                                                                target="_blank">{{ @$cartitem->getProduct->getBusiness->company }}</a>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="td-mw-150">Packaging:</td>
                                                                        <td>
                                                                            {{ ucfirst(@$cartitem->getpackage->packaging_type) }}
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="td-mw-150">MOQ:</td>
                                                                        <td>{{ @$cartitem->quantity ?: 'N.A' }}
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="td-mw-150">Price:</td>
                                                                        <td>${{ number_format(@$cartitem->getpackage->price, 2) }}
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="td-mw-150">Quantity:</td>
                                                                        <td>
                                                                            <div class="input-group">
                                                                                <span class="input-group-btn">
                                                                                    <button class="btn btn-minus fw-bold"
                                                                                        type="button"
                                                                                        data-product-id="{{ $cartitem->getproduct['id'] }}"
                                                                                        data-product-price="{{ @$cartitem->getpackage->price ?: 0 }}">-</button>
                                                                                </span>
                                                                                <input type="number"
                                                                                    class="cartqty text-center" id="ppq{{ $cartitem->getpackage->id }}"
                                                                                    maxlength="3" onclick="getQuantity('{{ $cartitem->getproduct->uuid }}',{{ $cartitem->getpackage->id }}, this.value)"
                                                                                    value="{{ $cartitem['quantity'] }}"
                                                                                    min="1" name="product_qty[]" readonly>
                                                                                <span class="input-group-btn">
                                                                                    <button class="btn btn-plus fw-bold"
                                                                                        type="button"
                                                                                        data-product-id="{{ $cartitem->getproduct['id'] }}"
                                                                                        data-product-price="{{ @$cartitem->getpackage->price ?: 0 }}">+</button>
                                                                                </span>
                                                                            </div>

                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            @else
                                                                <div class="text-danger">
                                                                    This product is not available
                                                                    for checkout!
                                                                </div>
                                                            @endif
                                                        </div>

                                                        <div class="cart-p-footer">
                                                            <p>View more products from
                                                                <a
                                                                    href="{{ route('public.supplier.products', @$cartitem->getProduct->getBusiness->slug) }}">
                                                                    {{ @$cartitem->getProduct->getBusiness->company }}
                                                                </a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endforeach
                                    @else
                                        <div class="d-flex justify-content-center p-4">
                                            <div class="text-center">
                                                <i class="bi bi-bag-dash" style="font-size: 60px"></i>
                                                <h5 class="fw-bold py-3"> No products in your cart</h5>
                                                <a href="{{ route('public.search_keyword', 'all') }}"
                                                    class="btn-viewall btn-sm">
                                                    <i class="bi bi-search me-3"></i> Search products
                                                </a>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4">
                            @if (count($cart) != 0)
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="fw-bold mb-1" style="font-size: 18px">Order Summary</h6>
                                        <div class="py-1 mb-3 small text-secondary">
                                            <p class="mb-0">
                                                <span class="cart-items-selected"></span> items selected.
                                            </p>
                                            <p class="mb-0">
                                                Selected items in your cart will generate
                                                <span class="cart-order-count"></span> different orders.
                                            </p>
                                        </div>
                                        <div class="row py-1">
                                            <div class="col-6 text-secondary">Subtotal:</div>
                                            <div class="col-6 fw-bold text-end" id="subtotal"
                                                data-price="{{ $subtotal ?: '0.0' }}">
                                                ${{ number_format(@$subtotal, 2) ?: '0.0' }}
                                            </div>
                                        </div>
                                        <div class="row py-1 d-none">
                                            <div class="col-6 text-secondary">Discount:</div>
                                            <div class="col-6 fw-bold text-end" id="discount" data-price="0.0">$0.00
                                            </div>
                                        </div>
                                        <div class="row py-1 d-none">
                                            <div class="col-6 text-secondary">Tax (20%):</div>
                                            <div class="col-6 fw-bold text-end" id="tax" data-price="0.0">$0.00
                                            </div>
                                        </div>
                                        <div class="row py-1 mb-3">
                                            <div class="col-6 text-secondary">Shipping:</div>
                                            <div class="col-6 fw-bold text-end" id="shipping_price" data-price="{{ $shipping_price ?: '0.0' }}">
                                                ${{ number_format(@$shipping_price, 2) ?: '0.0' }}
                                            </div>
                                        </div>
                                        <div class="row mb-4 pt-3" style="border-top: 1px solid #eee">
                                            <div class="col-6 text-secondary">Total:</div>
                                            <div class="col-6 fw-bold text-end" id="total">
                                                ${{ number_format(@$subtotal + @$shipping_price, 2) ?: '0.0' }}
                                            </div>
                                        </div>
                                        <div class="">
                                            @if (count($cart) > 1)
                                                @php
                                                    $groupedCart = $cart->groupBy(
                                                        fn($cartItem) => $cartItem->getProduct->getBusiness['id'],
                                                    );
                                                @endphp
                                                <div class="form-floating mb-2 cw-form">
                                                    <select class="form-select cw-input supplier-checkoutselect">
                                                        <option value="all" selected>Select Supplier
                                                        </option>
                                                        @foreach ($groupedCart as $businessName => $cartItems)
                                                            @php
                                                                $firstCartItem = $cartItems->first();
                                                                $business = $firstCartItem->getProduct->getBusiness;
                                                            @endphp
                                                            <option value="{{ $business['id'] }}">
                                                                {{ $business['company'] }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <label>Checkout products from a supplier</label>
                                                </div>
                                            @endif
                                            <button type="submit" class="btn-viewall w-100">
                                                Continue to Checkout
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <style>
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type=number] {
            -moz-appearance: textfield;
        }

        .cart-order-count,
        .cart-items-selected {
            color: #000;
            font-weight: 600;
        }
    </style>
@endpush
@push('js')
    <script>
        function updateSubtotal() {
            var subtotal = 0;

            $(".product_checkout:checked").each(function() {
                var price = parseFloat($(this).closest(".cart-item").find(".btn-plus").attr(
                    "data-product-price")) || 0;
                var quantity = parseInt($(this).closest(".cart-item").find(".cartqty").val()) || 1;
                subtotal += price * quantity;
            });

            $("#subtotal").html("$" + (Math.round(subtotal * 100) / 100).toFixed(2));
            $("#subtotal").attr("data-price", (Math.round(subtotal * 100) / 100).toFixed(2));

            getTotal();
        }

        $(".product_checkout").change(function() {
            updateSubtotal();
        });

        $(".btn-minus").on("click", function() {
            var input = $(this).parent().siblings("input");
            var quantity = parseInt(input.val());

            if (quantity > 1) {
                input.val(quantity - 1);
                updateSubtotal();
                input.trigger('click');
            }
        });

        $(".btn-plus").on("click", function() {
            var input = $(this).parent().siblings("input");
            var quantity = parseInt(input.val());
            input.val(quantity + 1);
            updateSubtotal();
            input.trigger('click');
        });

        function getTotal() {
            var total =
                parseFloat($("#subtotal").attr("data-price")) +
                parseFloat($("#discount").attr("data-price")) +
                parseFloat($("#tax").attr("data-price")) +
                parseFloat($("#shipping_price").attr("data-price"));

            $("#total").html("$" + (Math.round(total * 100) / 100).toFixed(2));
        }
    </script>
    <script>
        $(document).ready(function() {
            $('#check-all').on('change', function() {
                var isChecked = $(this).is(':checked');
                $('.product_checkout').each(function() {
                    $(this).prop('checked', !isChecked);
                    updateCounts();
                    updateSubtotal();
                });
            });
        })
    </script>
    <script>
        function updateCounts() {
            const checkboxes = document.querySelectorAll('.product_checkout:checked');
            const supplierIds = new Set();

            checkboxes.forEach(checkbox => {
                supplierIds.add(checkbox.getAttribute('data-supplier_id'));
            });

            const countCheckedProducts = checkboxes.length;
            const countUniqueSuppliers = supplierIds.size;

            $('.cart-items-selected').text(countCheckedProducts);
            $('.cart-order-count').text(countUniqueSuppliers);
        }

        document.querySelectorAll('.product_checkout').forEach(checkbox => {
            checkbox.addEventListener('change', updateCounts);
        });

        updateCounts();
    </script>
    <script>
        $(document).ready(function() {
            $(".supplier-checkoutselect").change(function() {
                var selectedSupplierId = $(this).val();

                $(".product_checkout").prop("checked", false);
                $(".product_checkout").each(function() {
                    if ($(this).data("supplier_id") == selectedSupplierId) {
                        $(this).prop("checked", true);
                    }
                });
                updateSubtotal();
            });

            $(".product_checkout").change(function() {
                var checkedSupplierId = $(this).attr('data-supplier_id');
                var checkedSuppliercheckoutId = $('.supplier-checkoutselect').val();
                if (checkedSupplierId != checkedSuppliercheckoutId) {
                    var firstOptionValue = $(".supplier-checkoutselect option:first").val();

                    if (checkedSuppliercheckoutId != 'all') {
                        $(".supplier-checkoutselect").val(firstOptionValue);
                    }
                }

            });
        });
    </script>

    <script>
        function getQuantity(productId, package_id, qty) {
            $.ajax({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                url: '{{ route('public.product_quantity') }}',
                type: 'POST',
                data: {
                    id: productId,
                    package_id: package_id,
                    qty: qty,
                },
                beforeSend: function() {
                    $('body').append(
                        '<div class="blockUI" style="z-index: 10000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.6; cursor: wait; position: fixed;"></div>'
                        );
                },
                success: function(response) {
                    console.log(response);
                    if(response.message == 'success') {
                        $("#ppq" + package_id).val(response.updatedQty);
                        updateCounts();
                        updateSubtotal();
                    } else {
                        alertify.error(response.message);
                        $("#ppq" + package_id).val(response.updatedQty);
                        updateCounts();
                        updateSubtotal();
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", status, error);
                    alert("An error occurred: " + error);
                },
                complete: function () {
                    $('.blockUI').remove();
                }
            });
        }
    </script>
    
    @if ($cart_message)
        <script>
            // Display the logout message using AlertifyJS
            alertify.error('{{ $cart_message }}');
        </script>
    @endif
@endpush