@extends('layouts.customer')

@section('title', 'Cart')

@section('content')
<div class="py-5"></div>
<div class="py-3 mb-3 mt-2 shadow-sm backgroundofroutes border-top">
    <div class="container">
        <h6 class="mb-0">
            <a href="{{ url('/') }}">Home</a>/
            <a href="{{ url('cart') }}">Cart</a>
        </h6>
    </div>
</div>


<div class="container my-2">
    @php
        $total = 0;
    @endphp
@if (!empty($cartItemBySeller))
    SELECT ALL <input type="checkbox" class="form-check-input checkAllItems" id="checkAllItems" name="checkAllItems"></input>
@endif

    @foreach ($cartItemBySeller as $sellerData)
    @php
        $sellerTotal = 0;
    @endphp

    <div class="card shadow mycartitems">
        <div class="card-body">
        <h4><a href="{{ route('user.items', $sellerData['seller']->id) }}">{{ $sellerData['seller']->shop->shop_name ?? 'N/A' }}</a></h4>
            <input type="hidden" class="shopId" value="{{ $sellerData['seller']->id }}">

       <div class="form-check">
    <input type="checkbox" class="form-check-input selectAllItems" name="selectAllItems" data-seller-id="{{ $sellerData['seller']->id }}" @if(collect($sellerData['cartItems'])->where('status', 0)->isEmpty()) checked @endif>
    <label class="form-check-label" for="selectAllItems">Select All Items</label>
</div>

@foreach ($sellerData['cartItems'] as $item)
    @php
        $sellerTotal += $item->status == 1 
            ? optional($item->products->product_prices->where('is_active', 1)->sortByDesc('created_at')->first())->price * $item->prod_qty 
            : 0;
    @endphp

    <div class="row product_data border-bottom border-light my-4 d-flex justify-content-around align-items-center">
        <div class="col-md-1">
            <input type="checkbox" class="form-check-input cartItemCheckbox" data-prod-id="{{ $item->prod_id }}" data-seller-id="{{ $sellerData['seller']->id }}" data-owner-id="{{ $item->products->user_id }}" @if ($item->status == 1) checked @endif>
        </div>
        <div class="col-md-2">
            @if ($item->products !== null && $item->products->product_images->isNotEmpty())
                <img src="{{ asset('upload/product/'.$item->products->product_images->first()->image) }}" height="190px" width="180px" alt="Image Here">
            @endif
        </div>
                        <div class="col-md-3 text-center">
                            @if ($item->products !== null)
                                <h5><a href="{{ url('view-product/'.$item->products->id) }}">{{ $item->products->name }}</a></h5>
                                <button class="btn btn-outline-danger deleteCartItem"><i class="fa fa-trash"></i></button>
                            @endif
                        </div>
                        <div class="col-md-2 text-center">
    @if ($item->products !== null)
        @php
            $activePrice = $item->products->product_prices
                ->where('is_active', 1)
                ->sortByDesc('created_at')
                ->first();
        @endphp

        @if ($activePrice)
            <h5>₱ {{ number_format($activePrice->price, 2, '.', ',') }}</h5>
        @endif
    @endif
</div>




   <div class="col-md-2">
    @if ($item->products !== null)
        <label for="quantity">Quantity</label>
        <div class="input-group text-center mb-3" style="width: 8.125rem">
            <button class="input-group-text changeQuantity decrement-btn" data-prod-id="{{ $item->prod_id }}">-</button>
            <span class="form-control bg-light quantity_input text-center">{{ $item->prod_qty }}</span>
            @if ($item->products->qty > $item->prod_qty)
                <button class="input-group-text changeQuantity increment-btn" data-prod-id="{{ $item->prod_id }}">+</button>
            @else
                <button class="input-group-text increment-btn" disabled>+</button>
                <span class="text-danger">Quantity exceeds available stock</span>
            @endif
        </div>
    @endif


                        </div>
                    </div>
                @endforeach

                    <div class="card-footer d-flex flex-column">
                        <div class="d-flex align-items-center justify-content-end text-center">
                            <h6 class="float-end">Subtotal: ₱ {{ number_format($sellerTotal, 2, '.', ',') }}</h6>
                        </div>
                    </div>

                @php
                    $total += $sellerTotal;
                @endphp
            </div>
        </div>
    @endforeach
    <br><br>
    <br><br>
    <br><br>

    @if (empty($cartItemBySeller))
        <div class="card-body d-flex align-items-center justify-content-center flex-column">
            <h2 class="p-2 m-1">Your <i class="fa fa-shopping-cart"></i> Cart is Empty</h2>
            <a href="{{ url('category') }}" class="btn p-2 m-1 btn-outline-primary float-end">Continue Shopping</a>
        </div>
    @endif
</div>

    @auth
        <div class="fixed-checkout-button d-flex justify-content-center">
            <div class="checkout-card">
                <div class="d-flex flex-column align-items-center">
                    <h6>Total Amount:₱{{ number_format($total, 2, '.', ',') }}</h6>
                    <a href="{{ url('checkout') }}" class="btn btn-primary mt-2">Checkout</a>
                </div>
            </div>
        </div>
    @else
        <script>window.location = "{{ route('login') }}";</script>
    @endauth




<style>
.fixed-checkout-button {
    position: fixed;
    bottom: 92px; /* Adjust the distance from the bottom as needed */
    left: 89%;
    transform: translateX(-50%);
}</style>

<br>
<br><br>
<br><br>
@endsection




<style>
    .fixed-checkout-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }

    .checkout-card {
    background-color: #C0C0C0;
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* Fill the whole page horizontally */
}


    .fixed-checkout-button a {
        display: block;
        width: 150px;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        background-color: #28a745;
        border: 1px solid #28a745;
        border-radius: 5px;
        transition: background-color 0.3s ease-in-out;
    }

    .fixed-checkout-button a:hover {
        background-color: #218838;
        border-color: #218838;
    }
</style>



@section('scripts')
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function () {
        // Handle click event for "Select All Items" checkboxes
        $('.selectAllItems').click(function () {
            var shopId = $(this).data('seller-id');
            var isChecked = $(this).prop('checked');

            // Toggle status for all items with the same seller ID
            $('input[type="checkbox"][data-seller-id="' + shopId + '"]').prop('checked', isChecked);

            // Get an array of product IDs for all checkboxes with the same seller ID
            var prodIds = $('input[type="checkbox"][data-seller-id="' + shopId + '"]').map(function () {
                return $(this).closest('.product_data').find('.cartItemCheckbox').data('prod-id');
            }).get();

            // Update cart item status via AJAX
            updateCartItemStatus(prodIds, isChecked);
        });

        // Handle click event for individual item checkboxes
        $('.cartItemCheckbox').click(function () {
            var shopId = $(this).data('seller-id');
            var prodId = $(this).data('prod-id');
            var isChecked = $(this).prop('checked');

            // Update cart item status via AJAX
            updateCartItemStatus([prodId], isChecked);
        });

        // Function to update cart item status via AJAX
        function updateCartItemStatus(prodIds, isChecked) {
    $.ajax({
        url: '/update-cart-item-status',
        method: 'POST',
        data: {
            prod_ids: prodIds,
            status: isChecked ? 1 : 0
        },
        success: function (response) {
            console.log(response); // Handle success response
            location.reload(); // Reload the page
        },
        error: function (xhr, status, error) {
            console.error(xhr.responseText); // Handle error response
        }
    });
}
    });
</script>


<script>



$(document).ready(function () {
    $('.increment-btn').click(function (e) {
        e.preventDefault();
        var prod_id = $(this).data('prod-id');

        // Get the current quantity value and increment it
        var quantityInput = $(this).closest('.product_data').find('.quantity_input');
        var value = parseInt(quantityInput.text(), 10);
        value = isNaN(value) ? 0 : value;
        if (value < 10) {
            value++;
            quantityInput.text(value);
            
            // Update the cart quantity via AJAX
            updateCartQuantity(prod_id, value);
        }
    });

    $('.decrement-btn').click(function (e) {
        e.preventDefault();
        var prod_id = $(this).data('prod-id');

        // Get the current quantity value and decrement it
        var quantityInput = $(this).closest('.product_data').find('.quantity_input');
        var value = parseInt(quantityInput.text(), 10);
        value = isNaN(value) ? 0 : value;
        if (value > 1) {
            value--;
            quantityInput.text(value);
            
            // Update the cart quantity via AJAX
            updateCartQuantity(prod_id, value);
        }
    });

    // Function to update the cart quantity via AJAX
    function updateCartQuantity(prod_id, prod_qty) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            method: "POST",
            url: "update-cart",
            data: {
                'prod_id': prod_id,
                'prod_qty': prod_qty
            },
            success: function (response) {
                // Do something on success if needed
            },
            error: function (xhr, status, error) {
                // Handle any errors here
                console.error(error);
            }
        });
    }
    $(document).ready(function () {
    // Use event delegation to handle the click event on the delete button
    $(document).on('click', '.deleteCartItem', function (e) {
        e.preventDefault();
        var prod_id = $(this).closest('.product_data').find('.cartItemCheckbox').data('prod-id');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            method: "POST",
            url: "delete-cart-item",
            data: {
                'prod_id': prod_id,
            },
            success: function (response) {
                // Refresh the cart items after successful deletion
                $('.mycartitems').load(location.href + " .mycartitems");
                swal("Done!", `${response.status}`, "success");
            },
            error: function (xhr, status, error) {
                // Handle any errors here
                console.error(error);
            }
        });
    });
});


    $('.changeQuantity').click(function (e) {
        e.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var prod_id = $(this).closest('.product_data').find('.prod_id').val();
        var prod_qty = $(this).closest('.product_data').find('.quantity_input').val();

        $.ajax({
            method: "POST",
            url: "update-cart",
            data: {
                'prod_id': prod_id,
                'prod_qty': prod_qty
            },
            success: function (response) {
                window.location.reload();
            }
        });
    });


});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var checkAllItems = document.getElementById('checkAllItems');
    var cartItemCheckboxes = document.querySelectorAll('.cartItemCheckbox');

    // Check if all items are checked and update the "Check All" checkbox accordingly
    var allItemsChecked = Array.from(cartItemCheckboxes).every(function (checkbox) {
        return checkbox.checked;
    });
    checkAllItems.checked = allItemsChecked;

    checkAllItems.addEventListener('change', function () {
        var isChecked = checkAllItems.checked;

        // Get an array of product IDs for all checkboxes
        var prodIds = Array.from(cartItemCheckboxes).map(function (checkbox) {
            checkbox.checked = isChecked;
            return checkbox.dataset.prodId;
        });

        updateCartItemStatus(prodIds, isChecked);
    });

  cartItemCheckboxes.forEach(function (checkbox) {
    checkbox.addEventListener('change', function () {
        // Get the product ID of the changed checkbox
        var prodId = checkbox.dataset.prodId;

        // Toggle the status between 0 and 1
        var isChecked = checkbox.checked;
        updateCartItemStatus([prodId], isChecked ? 1 : 0);
    });
});

    function updateCartItemStatus(prodIds, isChecked) {
        var status = isChecked ? 1 : 0;

        // Send an AJAX request to update the status in the database
        fetch('/update-cart-item-status', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                prod_ids: prodIds,
                status: status
            })
        })
        .then(response => response.json())
        .then(data => {
            // Reload the page after updating the cart item status
            location.reload();
        })
        .catch(error => console.error(error));
    }

    // Separate function for handling "Select All Items" checkbox
    function handleSelectAllItemsCheckbox() {
        $('.selectAllItems').click(function () {
            var shopId = $(this).data('seller-id');
            var isChecked = $(this).prop('checked');
            var prodIds = [];

            // Get an array of product IDs for all checkboxes with the same seller ID
            $('input[type="checkbox"][data-seller-id="' + shopId + '"]').each(function () {
                prodIds.push($(this).data('prod-id'));
            });

            // Update cart item status via AJAX
            updateCartItemStatus(prodIds, isChecked);
        });
    }

    handleSelectAllItemsCheckbox(); // Call the function to initialize the event listener
});
</script>

@endsection