@extends('layouts.app')
@section('contents')

    <!-- Hero Start -->
    <div class="container-fluid nhsblue hero-header mb-5">
        <div class="container text-center">
            <h1 class="display-4 text-white mb-3 animated slideInDown">Products</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-0 animated slideInDown">
                    <li class="breadcrumb-item"><a class="text-white" href="{{route('home.index')}}">Home</a></li>
                    <li class="breadcrumb-item text-white active" aria-current="page">Products</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Hero End -->

        <!-- Product Start -->
        <div class="container-fluid py-5 border-bottom border-primary border-1">
            <div class="container">
                <div class="mx-auto text-center wow fadeIn" data-wow-delay="0.1s" style="max-width: 600px;">
                    <h1 class="nhsblue-text mb-3"><span class="fw-light text-dark">Maria Mattress</span> 3 Sizes</h1>
                    <p class="mb-5">Choose Maria Mattress for reliable, high-quality mattress protection that you can trust.</p>
                </div>
                <div class="row g-4">
                    <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.1s">
                        <div class="product-item text-center border h-100 p-4">
                            <img class="img-fluid mb-4" src="{{ asset('assets/img/mariamatress-product1.png') }}" alt="mariamatress-product 1">
                            <a href="" class="h6 d-inline-block mb-2">SINGLE : 90 x 190+25 cm</a>
                            <h5 class="text-primary mb-3" id="singleprice">£54.99</h5>
                            <cite title="Source Title">*Quantity can be change in the cart</cite>
                            {{-- <a href="{{ route('home.cart') }}" class="btn btn-product px-3 mt-3">Add To Cart</a> --}}
                        {{-- <a href="{{ route('home.cart', Crypt::encrypt('single','56.99')) }}" class="btn btn-product px-3 mt-3">Add To Cart</a> --}}
                            {{-- <a href="#" class="btn btn-product px-3 mt-3" data-toggle="modal" data-target="#exampleModalCenter">Add To Cart</a> --}}


                            <a href="#" class="btn btn-product px-3 mt-3" data-bs-toggle="modal" data-bs-target="#exampleModal">Add To Cart</a>


                       <!-- Modal -->
                       <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Maria Mattress - Message</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>

                            <div class="modal-body text-start">
                              <p>New item added to the cart</p>
                            </div>



                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary nhsblue" data-bs-dismiss="modal">Shop more</button>
                              <a href="{{ route('home.cart', ['type' => Crypt::encrypt('single')]) }}" class="btn btn-product">Checkout</a>

                            </div>
                          </div>
                        </div>
                      </div>
                       <!--modal end-->

                        </div>
                    </div>


                    <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.3s">
                        <div class="product-item text-center border h-100 p-4">
                            <img class="img-fluid mb-4" src="{{ asset('assets/img/mariamatress-product1.png') }}" alt="mariamatress-product 2">
                            <a href="" class="h6 d-inline-block mb-2">DOUBLE : 140 x 190+25cm</a>
                            <h5 class="text-primary mb-3">£60.99</h5>
                            <cite title="Source Title">*Quantity can be change in the cart</cite>
                            <a href="#" class="btn btn-product px-3 mt-3" data-bs-toggle="modal" data-bs-target="#exampleModal2">Add To Cart</a>


                            <!-- Modal -->
                            <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
                             <div class="modal-dialog">
                               <div class="modal-content">
                                 <div class="modal-header">
                                   <h5 class="modal-title" id="exampleModalLabel2">Maria Mattress2 - Message</h5>
                                   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                 </div>

                                 <div class="modal-body text-start">
                                   <p>New item added to the cart</p>
                                 </div>



                                 <div class="modal-footer">
                                   <button type="button" class="btn btn-secondary nhsblue" data-bs-dismiss="modal">Shop more</button>
                                   <a href="{{ route('home.cart', ['type' => Crypt::encrypt('double')]) }}" class="btn btn-product">Checkout</a>

                                 </div>
                               </div>
                             </div>
                           </div>
                            <!--modal end-->                        </div>
                    </div>



                    <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.3s">
                        <div class="product-item text-center border h-100 p-4">
                            <img class="img-fluid mb-4" src="{{ asset('assets/img/mariamatress-product1.png') }}" alt="mariamatress-product 3">
                            <a href="" class="h6 d-inline-block mb-2">KING : 150 x 200 x 25cm</a>
                            <h5 class="text-primary mb-3">£69.99</h5>
                            <cite title="Source Title">*Quantity can be change in the cart</cite>
                            <a href="#" class="btn btn-product px-3 mt-3" data-bs-toggle="modal" data-bs-target="#exampleModal3" onclick="createSessionVariable('cart')">Add To Cart</a>

                            <script>
                                function createSessionVariable(cart) {
                                    fetch('/create-session', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        },
                                        body: JSON.stringify({ cart: cart})
                                    });
                                }
                            </script>


                            <!-- Modal -->
                            <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel3" aria-hidden="true">
                             <div class="modal-dialog">
                               <div class="modal-content">
                                 <div class="modal-header">
                                   <h5 class="modal-title" id="exampleModalLabel3">Maria Mattress3 - Message</h5>
                                   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                 </div>

                                 <div class="modal-body text-start">
                                   <p>New item added to the cart</p>
                                 </div>



                                 <div class="modal-footer">
                                   <button type="button" class="btn btn-secondary nhsblue" data-bs-dismiss="modal">Shop more</button>
                                   <a href="{{ route('home.cart', ['type' => Crypt::encrypt('king')]) }}" class="btn btn-product">Checkout</a>

                                 </div>
                               </div>
                             </div>
                           </div>
                            <!--modal end-->
                        </div>
                    </div>




                </div>
            </div>
        </div>
        <!-- Product End -->

@endsection