@extends('frontend.layouts.app')
@section('title-suffix')
    {{ __('cart.title') }}
@endsection

@push('styles')
    <style>
        .badge-success {
            background-color: #9b2387;
            color: #fff;
            font-size: 0.6rem;
            padding: 3px;
            border-radius: 10px;
        }
    </style>
@endpush

@section('main-content')

    <section class="breadcrumb breadcrumb_bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="breadcrumb_iner">
                        <div class="breadcrumb_iner_item">
                            <h2>{{ __('cart.title') }}</h2>
                            <p>{{ __('cart.breadcrumb-1') }}<span>></span>{{ __('cart.breadcrumb-2') }}</p>
                        </div>
                    </div>
                </div>
            </div>
    </section>


    <section class="cart_area padding_top">
        <div class="container">
            <div class="cart_inner mb-4">
                @if (!$products)
                    <div class="text-center">
                        <p>{{ __('cart.empty-1') }}<br>
                            {{ __('cart.empty-2') }}
                        </p>

                        <a class="btn_1 checkout-btns mt-10"
                            href="{{ route('welcome') }}">{{ __('cart.fill-btn') }}</a>
                    </div>
                @else
                    <div class="card shadow">
                        <div class="card-block pad-all">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">{{ __('cart.thead-product') }}</th>
                                            <th scope="col">{{ __('cart.thead-price') }}</th>
                                            <th scope="col">{{ __('cart.thead-quantity') }}</th>
                                            <th scope="col">{{ __('Total') }}</th>
                                            <th scope="col"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($products as $key => $product)
                                            <tr>
                                                <td>
                                                    <div class="media">
                                                        <div class="d-flex img-fluid-container">
                                                            <img src="{{ asset($product['image']) }}"
                                                                alt="{{ $product['name'] }}" class="img-fluid" />
                                                        </div>
                                                        <div class="media-body">
                                                            <p><a
                                                                    href="{{ route('single-product.slug', ['product_slug' => $product['slug']]) }}">{{ $product['name'] }}</a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <h5>{{ $product['price'] }}&nbsp;FCFA&nbsp;@if ($product['discount'])<sup class="badge badge-success">-{{ $product['discount'] }}&nbsp;%</sup>@endif
                                                    </h5>
                                                </td>
                                                <td>
                                                    <div class="product_count">
                                                        <span class="input-number-decrement"> <i
                                                                class="ti-angle-down"></i></span>
                                                        <input class="input-number" type="text"
                                                            value="{{ $product['quantity'] }}" min="1" max="100"
                                                            data-id="{{ $key }}"
                                                            data-product="{{ json_encode(['code' => $key, 'attributes' => $product]) }}">
                                                        <span class="input-number-increment"> <i
                                                                class="ti-angle-up"></i></span>
                                                    </div>
                                                </td>
                                                <td>
                                                    <h5>{{ $product['total'] }}&nbsp;FCFA</h5>
                                                </td>
                                                <td>
                                                    <a href="{{ route('cart.remove', ['code' => $key]) }}"
                                                        class="btn cart-delete-btn"><i class="fa-solid fa-trash-can"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        <tr class="bottom_button">
                                            <td colspan="5" style="width: 100%" class="text-right">
                                                <a class="btn_1" id="update-quantity" href="#">{{ __('cart.update-btn') }}</a>

                                                <form action="" method="POST" enctype="multipart/form-data"
                                                    class="d-none" id="update-cart-form">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="cart_update_hidden" id="cart_update_hidden">
                                                </form>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td>
                                                <h5>{{ __('cart.subtotal-btn') }}</h5>
                                            </td>
                                            <td>
                                                @php
                                                    $subTotal = 0.0;
                                                @endphp

                                                @if ($products)
                                                    @foreach ($products as $key => $product)
                                                        @php
                                                            $subTotal += doubleval($product['total']);
                                                        @endphp
                                                    @endforeach
                                                @endif

                                                <h5>{{ $subTotal }}&nbsp;FCFA</h5>
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="checkout_btn_inner float-right">
                                    <a class="btn_1 checkout-btns" href="{{ route('welcome') }}">{{ __('cart.continue-btn') }}</a>
                                    <a class="btn_1 checkout-btns checkout-btn-special"
                                        href="{{ route('user.checkout') }}">{{ __('cart.checkout-btn') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
    </section>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#update-quantity').on('click', function() {
                event.preventDefault();
                updateCartForm = $('#update-cart-form');
                hiddenUpdateInput = updateCartForm.find('input[name=cart_update_hidden]');
                hiddenUpdateInput.val('');
                products = {};

                quantitiesInputs = $('.input-number');
                $(quantitiesInputs).each(function() {
                    product = $(this).data('product');
                    var productQuantity = parseInt($(this).val());
                    productQuantity = productQuantity < 1 ? 1 : productQuantity;
                    productQuantity = productQuantity > 100 ? 100 : productQuantity;
                    var productCode = product.code;
                    var productPrice = product.attributes.price;
                    var productTotal = productQuantity * parseInt(productPrice);

                    products[productCode] = {
                        code: productCode,
                        price: productPrice,
                        quantity: productQuantity,
                        total: productTotal
                    };
                });

                hiddenUpdateInput.val(JSON.stringify(products));

                updateCartForm.attr('action', "{{ route('cart.update', $cart_id) }}");

                updateCartForm.submit();

                // location.reload();
                console.log(JSON.stringify(products));
            });
        });
    </script>
@endpush