@extends('layouts.master')

@section('title', "Panier - Boutique s'Architecturer")

@section('meta_description', "Panier de la boutique s'Architecturer. Laissez-vous inspirer par nos articles faits à la main en Suisse.")

@section('content')

    <!-- section start -->
    <section class="layout-pt-xl layout-pb-xs border-bottom-dark">
        <!-- container start -->
        <div class="container">

            <!-- row start -->
            <div class="row">
                <div class="col-xl-7 col-lg-9">
                    <div class="sectionHeading -lg">
                        <h2 class="sectionHeading__title">
                            Panier
                        </h2>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
    </section>

    @if ($cartIsEmpty !== true)
        <!-- section start -->
        <section class="layout-pt-xs layout-pb-xs">
            <!-- container start -->
            <div class="container">
                <!-- row start -->
                <div class="row no-gutters justify-content-between">
                    <div class="col-lg-9">
                        <!-- row start -->
                        <div class="row no-gutters mb-8 layout-pt-md sm:d-none">
                            <div class="col-lg-1 col-md-1">
                                <p class="title-xs fw-600 text-black">

                                </p>
                            </div>
                            <div class="col-lg-1 offset-lg-1 col-md-2 offset-md-1">
                                <p class="title-xs fw-600 text-black">
                                    Image
                                </p>
                            </div>

                            <div class="col-lg-2 offset-lg-1 col-md-2 offset-md-1">
                                <p class="title-xs fw-600 text-black">
                                    Article
                                </p>
                            </div>

                            <div class="col-lg-1 offset-lg-1 col-md-2 offset-md-1">
                                <p class="title-xs fw-600 text-black">
                                    Quantité
                                </p>
                            </div>

                            <div class="col-lg-2 offset-lg-1 col-md-2 offset-md-1">
                                <p class="title-xs fw-600 text-black">
                                    Prix
                                </p>
                            </div>
                        </div>
                        <!-- row end -->

                        <div class="section-border-bottom-dark sm:mt-32">
                            @foreach ($productsDetails as $cartItem)
                                <!-- row start -->
                                <div id="product-{{ $cartItem->id_product }}"
                                    class="row no-gutters border-bottom-dark py-20">
                                    <div class="col-lg-1 col-md-1">
                                        <form action="{{ route('remove-to-cart') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $cartItem->id_product }}">
                                            <button type="submit">
                                                <i class="icon size-xs str-width-md ml-4" data-feather="trash"></i>
                                            </button>
                                        </form>

                                        </a>
                                    </div>

                                    <div class="col-lg-1 offset-lg-1 col-md-2 offset-md-1">
                                        <p class="text-lg">
                                            <img style="width: 100px" src="{{ asset('img/shop/' . $cartItem->link) }}"
                                                alt="">
                                        </p>
                                    </div>

                                    <div class="col-lg-2 offset-lg-1 col-md-2 offset-md-1">
                                        <p class="text-lg">
                                            {{ $cartItem->product_name }}
                                        </p>
                                    </div>
                                    <div class="col-lg-1 offset-lg-1 col-md-2 offset-md-1">
                                        <form action="{{ route('add-to-cart') }}" method="POST" class="quantity-form" id="updateForm">
                                            @csrf
                                            <input type="hidden" name="product_id" value="{{ $cartItem->id_product }}">
                                            <select name="quantity" class="quantity-select">
                                                @for ($i = 1; $i <= 10; $i++)
                                                    <option value="{{ $i }}"
                                                        @if ($cartItem->quantity == $i) selected @endif>
                                                        {{ $i }}</option>
                                                @endfor
                                            </select>
                                        </form>
                                    </div>


                                    <div class="col-lg-2 offset-lg-1 col-md-2 offset-md-1">
                                        <p class="text-lg">
                                            {{ $cartItem->subTotal }} CHF
                                        </p>
                                    </div>
                                </div>
                                <!-- row end -->
                            @endforeach
                        </div>
                    </div>
                    <div class="col-lg-3 layout-pt-md">
                        <aside class="blogSidebar widget_area">
                            <p class="text-sm uppercase tracking-lg text-black mb-20">
                                Total du panier
                            </p>

                            <p class="text-xl sm:text-5xl xs:text-4xl leading-sm fw-700 text-black">
                                {{ $priceTotal }} CHF
                            </p>

                            <a href="{{ route('checkout-form') }}" class="button -md -outline-black text-black mt-56 lg:mt-48 md:mt-322">
                                Vers la caisse
                            </a>
                        </aside>
                    </div>
                </div>
                <!-- container end -->
        </section>
        <!-- section end -->
    @endif

    <!-- section start -->
    <section class="layout-pt-sm layout-pb-sm">
        <!-- container start -->
        <div class="container">

            <!-- row start -->
            <div class="row justify-content-between align-items-end">
                <div class="col-md-6">
                    <div class="sectionHeading -md">
                        <p class="sectionHeading__subtitle">
                            @if ($cartIsEmpty === true)
                                Votre panier est vide
                            @elseif ($cartIsFull === true)
                                Concevoir pour partager.
                            @else
                                N'oubliez rien
                            @endif
                        </p>
                        <h2 class="sectionHeading__title">
                            @if ($cartIsEmpty === true)
                                Laissez-vous inspirer.
                            @elseif ($cartIsFull === true)
                                Prêt à illuminer ton intérieur.
                            @else
                                L'avez-vous déjà ?
                            @endif
                        </h2>
                    </div>
                </div>
            </div>
            <!-- row end -->

            @if ($cartIsFull === false)
                <!-- row start -->
                <div class="row x-gap-48 y-gap-40 layout-pt-sm">
                    @foreach ($otherProducts as $otherProduct)
                        <div class="col-lg-4 col-md-6">
                            <div class="blogCard -type-1 -hover">
                                <div class="blogCard__img">
                                    <div>
                                        <div class="ratio ratio-4:3 bg-image js-lazy"
                                            data-bg="{{ asset('img/shop/' . $otherProduct->link) }}"></div>
                                    </div>
                                </div>

                                <div class="blogCard__content mt-24">
                                    <div class="blogCard__info text-dark leading-md text-sm">
                                        <a class="fw-400 mr-4" href="" id="">En
                                            savoir plus…</a>
                                    </div>

                                    <div>
                                        <h4 class="blogCard__title text-2xl leading-lg fw-500 mt-12">
                                            <a href="">
                                                {{ $otherProduct->product_name }}
                                            </a>
                                        </h4>
                                    </div>

                                    <div class="mt-12">
                                        <p class="d-inline-block ml-4">{{ $otherProduct->product_price }} CHF</p>
                                    </div>

                                    <div class="mt-12">
                                        <form action="{{ route('add-to-cart') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="product_id"
                                                value="{{ $otherProduct->id_product }}">
                                            <button type="submit" class="button -md -outline-black text-black mt-32">
                                                Ajouter au panier
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- row end -->
            @endif
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- Deuxième fenêtre modale -->
    <div id="modal1" class="modal">
        <div class="modal_content" id="modalContentContainer1">
            <!-- Le contenu de la deuxième fenêtre modale sera chargé ici -->
        </div>
        <a href="#" class="modal_close" id="closeModal1">&times;</a>
    </div>

    <!-- troisième fenêtre modale -->
    <div id="modal2" class="modal">
        <div class="modal_content" id="modalContentContainer2">
            <!-- Le contenu de la deuxième fenêtre modale sera chargé ici -->
        </div>
        <a href="#" class="modal_close" id="closeModal2">&times;</a>
    </div>

@endsection