@extends('front/app/layout')
@section('content')
    <!-- //wrapper -->
    <div class="wrapper" id="wrapper">
        <div class="product_row" style="background-image:url('{{ asset('assets/images/product_detiles.png') }}');">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="back_arrow">
                            <a href="{{ route('index') }}"> <i class="fa-solid fa-arrow-left-long me-2"></i> Back</a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-5 col-md-6 col-sm-12 col-12">
                        <div class="img_big">
                            @php
                                $images = explode(',', $product->images);
                            @endphp
                            @foreach ($images as $image)
                                <div class="item">
                                    <img src="{{ asset('storage/product-images/' . $image) }}">
                                </div>
                            @endforeach

                        </div>
                        <div class="img_small">
                            @foreach ($images as $image)
                                <div class="item">
                                    <img src="{{ asset('storage/product-images/' . $image) }}">
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-6 col-sm-12 col-12">
                        <div class="brack_thu">
                            <span><a href="{{ route('index') }}">Products<i
                                        class="fa-solid fa-chevron-right ms-2 me-2"></i></a>{{ $product->product_name }}</span>
                        </div>
                        <div class="product_detiles_inner">
                            <h4>{{ $product->product_name }}</h4>
                            {{-- <span><span>SKU :</span> {{ $product->sku_code }} </span> --}}
                            <p>{{ $product->short_description }}</p>
                            <h5><img src="{{ asset('assets/images/coin.png') }}"> {{ $product->product_prize }}</h5>
                        </div>
                        <div class="product_size">
                            @php
                                $sizes = explode(',', $product->sizes);
                                $size_ids = explode(',', $product->size_ids);
                            @endphp
                            @if ($sizes[0] != '')
                                <p>Size</p>
                                <div class="custom_radio">

                                    @foreach ($sizes as $index => $size)
                                        <label>
                                            <input type="radio" id="size" name="size"
                                                value="{{ $size_ids[$index] }}">
                                            <span>{{ $size }}</span>
                                        </label>
                                    @endforeach

                                </div>
                            @endif

                            <span id="size-error"></span>

                        </div>
                        <div class="product_quantity">
                            <div class="left">
                                <p>Quantity</p>
                                <div class="que">
                                    <span id="minus"><i class="fa-solid fa-minus"></i></span>
                                    <input id="quantity" name="quantity" type="text" value="1">
                                    <span id="plus"><i class="fa-solid fa-plus"></i></span>
                                </div>
                                <span id="quantity-error"></span>
                            </div>
                            <input type="hidden" id="product_id" name="product_id"
                                value="{{ Crypt::encrypt($product->id) }}">
                            <div class="right">
                                <button id="addToCart" class="btn btn-primary"> <img
                                        src="{{ asset('assets/images/cart-white.png') }}" class="me-2" width="16px">
                                    ADD TO Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="pro_des">
                            <h4>Product details</h4>
                            <p>{{ $product->long_description ?? '-' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!--  wrapper end  -->
    <!-- //wrapper-end -->
@endsection
@section('js')
    <script>
        document.getElementById('minus').addEventListener('click', function() {
            var input = document.getElementById('quantity');
            var value = parseInt(input.value);
            if (value > 1) { // value should not be less than 1
                input.value = value - 1;
            }
        });

        document.getElementById('plus').addEventListener('click', function() {
            var input = document.getElementById('quantity');
            var value = parseInt(input.value);
            if (value < 20) { // value should not be less than 1
                input.value = value + 1;
            }
        });
    </script>
    <script>
        function updateFormFields(order) {
            $('#quantity').val(order.product_quantity);
            @if ($sizes[0] != '')
                $('input[name="size"][value="' + order.product_size + '"]').prop('checked', true);
            @endif
        }
        $(document).ready(function() {

            var orders = JSON.parse(localStorage.getItem('orders')) || [];
            orders.forEach(function(order, index) {
                var promise = $.ajax({
                    url: '/get-product-details',
                    method: 'POST',
                    data: {
                        product_id: order.product_id,
                        product_size: order.product_size,
                        '_token': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.error) {
                            orders = orders.filter(function(o) {
                                return !(o.product_id == order.product_id && o.product_size == order.product_size);
                            });
                            localStorage.setItem('orders', JSON.stringify(orders));
                            return;
                        }
                    },
                    error: function(xhr, status, error) {
                        orders = orders.filter(function(o) {
                            return !(o.product_id == order.product_id && o
                                .product_size == order.product_size);
                        });
                        localStorage.setItem('orders', JSON.stringify(orders));
                    }
                });
            });




            @if (Auth::user())
                var carts = @json($carts);
                var orders = carts.map(function(cart) {
                    return {
                        product_id: cart.product_id,
                        product_quantity: cart.quantity,
                        product_size: cart.size
                    };
                });
                localStorage.setItem('orders', JSON.stringify(orders));

                var totalOrders = orders.length;
                $('#cart_items').html(totalOrders);
            @endif


            // var storedOrders = localStorage.getItem('orders');
            // if (storedOrders) {

            //     var orders = JSON.parse(storedOrders);

            //     var currentProductId = '{{ $product->id }}';

            //     var matchingOrders = orders.filter(function(order) {
            //         return order.product_id === currentProductId;
            //     });

            //     if (matchingOrders.length > 0) {
            //         var orderToUpdate = matchingOrders[0];
            //         updateFormFields(orderToUpdate);
            //     }
            // }

            $('#addToCart').on('click', function() {

                var product_quantity = $('#quantity').val();
                @if ($sizes[0] != '')

                    var product_size = $('input[name="size"]:checked').val();
                @else
                    var product_size = 'noSize';
                @endif
                var product_id = '{{ $product->id }}';

                $('#quantity-error').html('');
                $('#size-error').html('');

                if (!product_quantity || product_quantity == '0') {
                    $('#quantity-error').html('This field is required.');
                    return;
                }

                @if ($sizes[0] != '')

                    if (!product_size) {
                        $('#size-error').html('This field is required.');
                        return;
                    }
                @else
                    if (product_size != 'noSize') {
                        $('#size-error').html('This field is required.');
                        return;
                    }
                @endif
                console.log(product_size);

                var orders = JSON.parse(localStorage.getItem('orders')) || [];

                var existingOrderIndex = orders.findIndex(function(order) {
                    return product_id == order.product_id && product_size == order.product_size;
                });

                if (existingOrderIndex !== -1) {
                    // Update existing order
                    orders[existingOrderIndex].product_quantity = product_quantity;
                } else {
                    // Add new order
                    var newOrder = {
                        product_id: product_id,
                        product_quantity: product_quantity,
                        product_size: product_size
                    };
                    orders.push(newOrder);

                    updateFormFields(newOrder);

                }

                // Save updated orders back to localStorage
                localStorage.setItem('orders', JSON.stringify(orders));



                @if (Auth::user())
                    $.ajax({
                        url: '{{ route('updateCart') }}',
                        method: 'POST',
                        data: {
                            '_token': "{{ csrf_token() }}",
                            'orders': JSON.stringify(orders)
                        },
                        success: function(response) {},
                        error: function(xhr, status, error) {}
                    });
                @endif




                // Display number of orders in the cart

                $.notify('Order has been updated in the cart!', "success");

                var numOrders = orders.length;
                $('#cart_items').html(numOrders);


            });



        });
    </script>
@endsection