@extends('Shop.layout.layout', [
    'title' => __('Panier'),
])

@section('content')
    @if ($basket)
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <div class="row mb-3">
                    <div class="col-4">
                        <h1>Panier</h1>
                    </div>
                    <div class="col-8">
                        {!! $header ?? '' !!}
                    </div>
                </div>
                @foreach ($basket as $nature => $items)
                    <div class="row ml-1 mb-3 p-2 bg-green-light border rounded-lg">
                        <div class="col-12">
                            <h2 style="font-size: 1.6em;" class="text-uppercase">{{ $nature }}</h2>
                            @foreach ($items as $item)
                                @include('Shop.Baskets.partials.article')
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="col-lg-4 col-md-12">
                <x-card class='shadow'>
                    @include('Shop.Baskets.partials.basketTotal')
                    <div class="row m-3">
                        <div class="col-12 text-center">
                            <a href="{{ route('Shop.Orders.order') }}" class="btn btn-green-dark">COMMANDER</a>
                        </div>
                    </div>
                </x-card>
            </div>
        </div>
    @else
        <div class="row">
            <div class="col-8">
                <h1>Panier</h1>
                Votre panier est vide
            </div>
        </div>
    @endif
@endsection

@push('js')
    <script>
        function handleBasket() {
            calculateTotal();

            $('.basket-quantity').change(function() {
                var offer_id = $(this).data('id');
                var quantity = $(this).val();
                var $row = $(this).closest('.row');
                updateBasket(offer_id, quantity, function() {
                    calculatePrice($row);
                    calculateTotal();
                });
            });

            $('.basket-delete').click(function() {
                var offer_id = $(this).data('id');
                updateBasket(offer_id, 0, function() {
                    $('#basket_offer-' + offer_id).remove();
                    calculateTotal();
                });
            });
        }

        function updateBasket(offer_id, quantity, callback) {
            var data = {
                offer_id: offer_id,
                quantity: quantity,
                update: true
            };
            $.post("{{ route('Shop.Basket.addBasket') }}", data, callback);
        }

        function calculatePrice($that) {
            var quantity = $that.find('.basket-quantity').val();
            var price = $that.find('.basket-price').text();
            var total_price = fixNumber(quantity * price);
            $that.find('.basket-total-row').html(total_price);
            calculateTotal();
            return total_price;
        }

        function calculateTotal() {
            countBasket();
            var total = 0;
            $('.basket-total-row').each(function() {
                total += parseFloat($(this).text());
            });
            $('#basket-total').html(fixNumber(total));
            calculateTotalShipped();
            refreshBasketTop();
            return total;
        }

        function countBasket() {
            var count = 0;
            $('.basket-quantity').each(function() {
                count += parseInt($(this).val());
            });
            $('#basket-count').html(count);
            return count;
        }

        function calculateTotalShipped() {
            var total_shipped = parseFloat($('#basket-total').html());
            $('#basket-total-shipped').html(fixNumber(total_shipped));
        }

        function fixNumber(value) {
            return parseFloat(value).toFixed(2);
        }

        handleBasket();
    </script>
@endpush