@extends('Website.Includes.header', ['meta_Details' => $meta_details])
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

@section('content')
    <!-- Section 1 -->
    <section class="about-sec1">
        <img src="{{ asset('WebsiteAssets/assets/img/counter-bg-1.jpg') }}" alt="Background Image" class="bg-image" />
        <div class="container text-center">
            <h2>Cart</h2>
            <p><span>Sydney Quality Meats :</span> Cart</p>
        </div>
    </section>
    <!-- Section 1 End -->

    <!-- Section 2 -->
    <section>
        <div class="container BC_Sec2">
            <div class="row">
                <!-- Cart Table -->
                <div class="col-lg-8">
                    <div class="table-responsive">
                        <table class="table" id="cart-table">
                            <thead>
                                <tr class="table_heading">
                                    <th class="text-uppercase">ITEM</th>
                                    <th class="text-uppercase">Weight (KG)</th>
                                    <th class="text-uppercase">PRICE</th>
                                    <th class="text-uppercase">Custom Weight (KG)</th>
                                    <th class="text-center text-uppercase">SUBTOTAL</th>
                                    <th class="text-center text-uppercase">REMOVE</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($cartData) > 0)
                                    @foreach ($cartData as $item)
                                        <tr data-pid="{{ $item['pId'] }}">
                                            <td class="table_row-pad" style="width: 200px;">
                                                <div class="d-flex align-items-center">
                                                    <img src="{{ $item['featuredImage'] ?? 'https://via.placeholder.com/50' }}"
                                                        width="50" class="me-3" alt="{{ $item['title'] }}" />
                                                    <span class="Cart_Title_Break">{{ $item['title'] }}</span>
                                                </div>
                                            </td>

                                            <td class="table_row-pad">
                                                {{ $item['original_weight'] }}
                                            </td>
                                            <td class="table_row-pad">
                                                ${{ number_format($item['original_ammount'],2) }}
                                            </td>
                                            <!-- Editable Weight Field -->
                                            <td class="table_row-pad">
                                                <input type="text" 
                                                       class="weight-input form-control text-center mx-1"
                                                       style="width: 100px; border: 2px solid black;"
                                                       data-pid="{{ $item['pId'] }}"
                                                       value="{{ $item['weight'] }}"
                                                       step="0.001"
                                                       min="0.001">
                                            </td>
                                            <td class="table_row-pad item-subtotal">
                                                ${{ number_format($item['amount'] * $item['quantity'], 2) }}
                                            </td>
                                            <td class="text-start table_row-pad">
                                                <button class="btnRemove btn btn-link text-decoration-none text-dark p-0"
                                                    data-pid="{{ $item['pId'] }}">
                                                    <i class="fa-regular fa-trash-can"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="6" class="text-center py-4">
                                            <p class="mb-0">Your cart is empty</p>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <!-- Optional: Coupon row, etc. -->
                    <div class="row mt-4">
                        <!--
                        <div class="col-md-6">
                            <div class="input-group">
                                <input type="text" class="form-control Coupon_Code_Input" placeholder="Coupon code" />
                            </div>
                        </div>
                        -->
                        <div class="col-12 text-end BC_Table_Sec2_Buttons">
                            <!--
                            <button class="btn btn-danger BC_Table_Sec2_Button1" type="button">
                                APPLY COUPON
                            </button>
                            -->
                            <button class="btn btn-danger btnClearCart BC_Table_Sec2_Button2 ms-xl-4" type="button">
                                CLEAR CART
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Cart Totals -->
                @php
                    $subTotal = session('subTotal');
                    $totalGst = session('totalGst');
                    $totalAmount = session('totalAmount');
                @endphp
                <div class="col-lg-4 BC_Sec2_Part2">
                    <div class="card card_border">
                        <div class="card-header bg-white">
                            <h5 class="mb-0">CART TOTALS</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <span>SUBTOTAL</span>
                                <span class="cart-subtotal">${{ number_format($subTotal, 2) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-4">
                                <span>TOTAL</span>
                                <span class="cart-total">${{ number_format($subTotal, 2) }}</span>
                            </div>
                            <span style="font-size: 12px; color: #A42125;" class="text-capitalize">
                                * Charges may vary at check out
                            </span>
                            <a href="/checkout">
                                <button class="btn checkout-btn w-100">CHECKOUT</button>
                            </a>
                        </div>
                    </div>
                </div>

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

    <!-- Confirmation Modal -->
    <div class="modal fade" id="confirmClearCartModal" tabindex="-1" aria-labelledby="confirmClearCartModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmClearCartModalLabel">Clear Cart</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to clear your cart?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary Cancel_Cart_Btn_color" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-danger Clear_Cart_Btn_color" id="confirmClearCart">
                        Yes, Clear Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Section 2 End -->

@endsection

<script>
    $(document).ready(function () {

        // Ensure we have our CSRF token set:
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        });

        /**
         * Helper function: Check if cart is empty and show a message if so.
         */
        function checkCartEmpty() {
            if ($('#cart-table tbody tr').length === 0) {
                $('#cart-table tbody').html(
                    '<tr><td colspan="6" class="text-center py-4"><p class="mb-0">Your cart is empty</p></td></tr>'
                );
            }
        }

        /**
         * Restrict keypress input to digits & at most one decimal point.
         */
        $(document).on('keypress', '.weight-input', function (e) {
            // If user types '.' but there's already one '.', block it
            if (e.which === 46 && $(this).val().indexOf('.') !== -1) {
                return false;
            }
            // Allowed: digits (48-57), backspace (8), '.' (46)
            if (
                e.which !== 8 &&
                e.which !== 0 &&
                e.which !== 46 &&
                (e.which < 48 || e.which > 57)
            ) {
                return false;
            }
        });

        /**
         * On input: Clean out bad characters but do NOT force 0 if empty.
         */
        $(document).on('input', '.weight-input', function () {
            let $input = $(this);
            let rawVal = $input.val();

            // Remove anything that's not a digit or decimal
            rawVal = rawVal.replace(/[^0-9.]/g, '');

            // If multiple decimals, keep only the first
            let parts = rawVal.split('.');
            if (parts.length > 2) {
                rawVal = parts[0] + '.' + parts.slice(1).join('');
            }

            // Update the input with the cleaned value
            $input.val(rawVal);

            // Try to parse as float
            let newWeight = parseFloat(rawVal);

            // If valid, recalc row subtotal
            if (!isNaN(newWeight) && newWeight >= 0) {
                let $row = $input.closest('tr');
                let currentPrice = parseFloat(
                    $row.find('td:nth-child(3)').text().replace('$', '').replace(',', '')
                );
                let originalWeight = parseFloat(
                    $row.find('td:nth-child(2)').text().replace(',', '')
                );

                let pricePerKg = currentPrice / originalWeight;
                let newSubtotal = pricePerKg * newWeight;

                $row.find('.item-subtotal').text('$' + newSubtotal.toFixed(2));
                updateCartTotals();

                // (Optional) Live server update:
                // updateWeightOnServer($input.data('pid'), newWeight);
            } else {
                // If user has typed nothing or an invalid string so far:
                // Optionally show $0.00 as the subtotal
                let $row = $input.closest('tr');
                $row.find('.item-subtotal').text('$0.00');
                updateCartTotals();
            }
        });

        /**
         * On blur: If empty or invalid, force it to "0". Then update server.
         */
        $(document).on('blur', '.weight-input', function() {
            let $input = $(this);
            let rawVal = $input.val().trim();
            let newWeight = parseFloat(rawVal);

            // If empty or invalid => clamp to 0
            if (rawVal === '' || isNaN(newWeight) || newWeight < 0) {
                newWeight = 0;
                $input.val('0');
            }

            // Now do final row calculation & update server
            let $row = $input.closest('tr');
            let currentPrice = parseFloat(
                $row.find('td:nth-child(3)').text().replace('$', '').replace(',', '')
            );
            let originalWeight = parseFloat(
                $row.find('td:nth-child(2)').text().replace(',', '')
            );
            let pricePerKg = currentPrice / originalWeight;
            let newSubtotal = pricePerKg * newWeight;

            $row.find('.item-subtotal').text('$' + newSubtotal.toFixed(2));
            updateCartTotals();

            // Call the server to store new weight
            updateWeightOnServer($input.data('pid'), newWeight);
        });

        /**
         * Helper: Send AJAX to update weight in the backend.
         */
        function updateWeightOnServer(productId, weightValue) {
            $.ajax({
                url: '{{ url('update-weight') }}',
                method: 'POST',
                data: {
                    pId: productId,
                    weight: weightValue
                },
                success: function (response) {
                    if (response.status === true) {
                        // Update the overall cart totals from server response
                        $('.cart-subtotal').text('$' + parseFloat(response.subTotal).toFixed(2));
                        $('.cart-total').text('$' + parseFloat(response.subTotal).toFixed(2));
                    } else {
                        alert(response.message || 'Could not update weight.');
                    }
                },
                error: function () {
                    console.error('Error calling update-weight');
                }
            });
        }

        /**
         * Function to update overall cart totals on the page
         */
        function updateCartTotals() {
            let subtotal = 0;
            $('#cart-table tbody tr').each(function () {
                let itemSubtotal = parseFloat(
                    $(this).find('.item-subtotal').text().replace('$', '').replace(',', '')
                );
                if (!isNaN(itemSubtotal)) {
                    subtotal += itemSubtotal;
                }
            });
            $('.cart-subtotal').text('$' + subtotal.toFixed(2));
            $('.cart-total').text('$' + subtotal.toFixed(2));
        }

        /**
         * Clear Cart - show confirmation modal, then clear
         */
        $(document).on('click', '.btnClearCart', function (e) {
            e.preventDefault();
            // Show the Bootstrap modal
            $('#confirmClearCartModal').modal('show');
        });

        // When user confirms "Yes, Clear Cart"
        $(document).on('click', '#confirmClearCart', function () {
            $('#confirmClearCartModal').modal('hide');
            $.ajax({
                url: '{{ url('clear-cart') }}',
                type: 'POST',
                dataType: 'json',
                success: function (response) {
                    if (response.status) {
                        // Remove all rows & reset totals
                        $('#cart-table tbody').empty();
                        $('.cart-subtotal').text('$0.00');
                        $('.cart-total').text('$0.00');
                        $('.cart-badge').text(response.totalProducts);
                        checkCartEmpty();
                    } else {
                        alert(response.message || 'Error clearing cart.');
                    }
                },
                error: function (err) {
                    console.error(err);
                    alert('Error clearing cart.');
                }
            });
        });

        /**
         * Remove individual item from cart
         */
        $('.btnRemove').on('click', function (e) {
            e.preventDefault();
            let pId = $(this).data('pid');
            $.ajax({
                url: '{{ url('remove-from-cart') }}',
                method: 'POST',
                data: { pIdToRemove: pId },
                success: function (response) {
                    if (response.status === true) {
                        // Remove that row
                        $('tr[data-pid="' + pId + '"]').remove();
                        // Update displayed totals
                        $('.cart-subtotal').text('$' + parseFloat(response.subTotal).toFixed(2));
                        $('.cart-total').text('$' + parseFloat(response.totalAmount).toFixed(2));
                        // Update navbar cart count
                        $('.cart-badge').text(response.totalProducts);
                        checkCartEmpty();
                    } else {
                        alert(response.message || 'Could not remove item.');
                    }
                },
                error: function () {
                    alert('Error removing item.');
                }
            });
        });

    });
</script>