@extends('layout.frontend.master')

@section('meta-title', 'Custom Products - LEREVE')

@push('asset-top')
<link rel="stylesheet" href="/css/main.css">
@endpush

@section('content')

    <section class="page-content inner-block customized-cont">

        <div class="customized-banner">
            <div class="banner-img"><img src="/assets/customized-banner.jpg" alt=""></div>

            <div class="banner-cont">
                <div class="container-fluid">
                    <h3>Create Your OWN BoX</h3>
                    <p>Grooming feels better with
                        customization </p>
                </div>
            </div>
        </div>


        <div class="customized-wrap">
            <div class="container-fluid">


                <div class="stepwizard">
                    <div class="stepwizard-row">
                        <div class="stepwizard-step step-1">
                            <div class="step-img"><img src="/assets/step-1.jpg" alt=""></div>
                            <p>STEP 1 </p>
                            <h3>Cart</h3>

                        </div>
                        <div class="stepwizard-step step-2">
                            <div class="step-img"><img src="/assets/step-2.jpg" alt=""></div>
                            <p>STEP 2</p>
                            <h3>Select Products</h3>
                        </div>
                        <div class="stepwizard-step step-3">
                            <div class="step-img"><img src="/assets/step-3.jpg" alt=""></div>
                            <p>STEP 3</p>
                            <h3>Add Card</h3>
                        </div>
                    </div>

                </div>

                <div class="step-bottom">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tempor felis, nec malesuada sem
                        mattis at. Duis sit amet erat in nunc facilisis tincidunt. Aenean placerat blandit quam, eget auctor
                        neque accumsan non. Morbi sapien ligula, maximus non magna </p>
                </div>

                <div class="custom-items ">
                    <article class="create-top ar-create-top">
                        <h4>Select BoX</h4>
                        <ul class="form-controls create-list">
                            @foreach($box as $box)
                            <li>
                                <input type="radio" class="box" id="box{{$box->id}}" name="box" checked value="{{$box->id}}" />
                                <label for="box{{$box->id}}"><span></span>
                                    <div class="gift-img"><img src="/{{$box->image}}" alt="{{$box->weight}}" style="width: 100px"></div>
                                    <div class="flower-right">
                                        <h3>{{$box->weight}}</h3>
                                        <p>{{$box->name}}</p>

                                    </div>
                                </label>
                            </li>
                            @endforeach

                    
                        </ul>
                    </article>
                    {{-- {{dd($customProductDetails)}} --}}

                    <div class="own-product">
                        <h4> Select Product</h4>

                        <div class="product-items">

                            <div class="row">
                                @foreach($customProductDetails as $product)

                               
                                <div class="col-lg-2 col-6 col-sm-3 ">
                                    <div class="own-product-list">
                                        <a href="#customized-product-{{$loop->index}}" data-bs-toggle="modal" role="button">
                                            <div class="own-img">
                                               
                                                <img src="/gallery/products/images/{{$product['product']->thumbnail}}" alt="">

                                            </div>
                                            <div class="own-content">
                                                <div class="pluse-btn"></div>
                                                <h3>{{(app()->getLocale() == 'en') ?$product['product']->name_en : $product['product']->name_ar}}</h3>
                                                <div class="price">
                                                    {{$product['price']}} KWD/ Kg
                                                </div>
                                            </div>
                                        </a>
                                        <div class="modal fade customized-popup" id="customized-product-{{$loop->index}}" tabindex="-1"
                                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">

                                                    <div class="modal-body">
                                                        <button type="button" class="btn-close custom-close"
                                                            data-bs-dismiss="modal" aria-label="Close"></button>

                                                        <div class="own-product-details">
                                                            <div class="own-product-left">
                                                                <img src="/gallery/products/images/{{$product['product']->thumbnail}}" alt="">

                                                            </div>

                                                            <div class="own-right">
                                                                <h3>{{(app()->getLocale() == 'en') ?$product['product']->name_en : $product['product']->name_ar}}</h3>
                                                                <div class="details-price">{{$product['price']}} KWD</div>
                                                                <p>{!! (app()->getLocale() == 'en') ?$product['product']->description_en : $product['product']->description_ar !!}</p>

                                                                <div class="cta-part">
                                                                    <div class=" qty-btn-area">

                                                                        <div class="qty-count">
                                                                            <span class="input-group-btn">
                                                                                <button type="button"
                                                                                    class="btn-number  minus"
                                                                                    disabled="disabled" data-type="minus"
                                                                                    data-field="quant[1]">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                                        width="16" height="16"
                                                                                        fill="currentColor"
                                                                                        class="bi bi-dash-lg"
                                                                                        viewBox="0 0 16 16">
                                                                                        <path fill-rule="evenodd"
                                                                                            d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z" />
                                                                                    </svg>
                                                                                </button>
                                                                            </span>
                                                                            <input type="text" name="quant[1]"
                                                                                class="input-number" value="1"
                                                                                min="1" max="10">
                                                                            <span class="input-group-btn">
                                                                                <button type="button"
                                                                                    class="btn-number plus"
                                                                                    data-type="plus"
                                                                                    data-field="quant[1]">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                                        width="16" height="16"
                                                                                        fill="currentColor"
                                                                                        class="bi bi-plus"
                                                                                        viewBox="0 0 16 16">
                                                                                        <path
                                                                                            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                                                                                    </svg>
                                                                                </button>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="product-details-btn">
                                                                        <a href="#" data-bs-toggle="modal"
                                                                            data-bs-target="#extra-special"
                                                                            class="btn cart-btn primery-btn bdr-radius">
                                                                            <i class="bi bi-cart3"></i>Add to Cart
                                                                        </a>
                                                                    </div>




                                                                </div>

                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                </div>
                                @endforeach

                                
                            </div>
                        </div>
                    </div>

                    <article class="create-top ar-create-top ">
                        <h4>Select Your Card</h4>
                        <ul class="form-controls create-list card-list">
                            <li>
                                <input type="radio" class="box" id="card-1" name="card" checked />
                                <label for="card-1"><span></span>
                                    <div class="gift-img"><img src="/assets/card.png" alt="1 KG"></div>
                                    <div class="flower-right">
                                        <h3>Ramadan card</h3>


                                    </div>
                                </label>
                            </li>

                            <li>
                                <input type="radio" class="box" id="card-2" name="card" />
                                <label for="card-2"><span></span>
                                    <div class="gift-img"><img src="/assets/card.png" alt="1 KG"></div>
                                    <div class="flower-right">
                                        <h3>New year card</h3>

                                    </div>
                                </label>
                            </li>
                            <li>
                                <input type="radio" class="box" id="card-3" name="card" />
                                <label for="card-3"><span></span>
                                    <div class="gift-img"><img src="/assets/card.png" alt="1 KG"></div>
                                    <div class="flower-right">
                                        <h3>Mothers day card</h3>

                                    </div>
                                </label>
                            </li>
                            <li>
                                <input type="radio" class="box" id="card-4" name="card" />
                                <label for="card-4"><span></span>
                                    <div class="gift-img"><img src="/assets/card.png" alt="1 KG"></div>
                                    <div class="flower-right">
                                        <h3>Birthday Card</h3>

                                    </div>
                                </label>
                            </li>

                        </ul>
                    </article>

                    <article class="create-top ar-create-top ">
                        <h4>Type Your Message</h4>
                        <div class="card-text-area">

                            <div class="form-group">
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Type your message"></textarea>
                            </div>
                        </div>

                    </article>

                </div>
            </div>
        </div>

        <div class="fixed-cart">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8">
                        <h3>Selected Products</h3>
                        <ul class="selected-list">
                            <li>
                                <div class="close"> <a href="#"></a></div>
                                <div class="selt-img">
                                    <img src="/assets/customized/1.jpg" alt="">
                                </div>
                                <p>Enchante Caramel...</p>
                            </li>
                            <li>
                                <div class="close"> <a href="#"></a></div>
                                <div class="selt-img">
                                    <img src="/assets/customized/1.jpg" alt="">
                                </div>
                                <p>Enchante Caramel...</p>
                            </li>
                            <li>
                                <div class="close"> <a href="#"></a></div>
                                <div class="selt-img">
                                    <img src="/assets/customized/1.jpg" alt="">
                                </div>
                                <p>Enchante Caramel...</p>
                            </li>
                            <li>
                                <div class="close"> <a href="#"></a></div>
                                <div class="selt-img">
                                    <img src="/assets/customized/1.jpg" alt="">
                                </div>
                                <p>Enchante Caramel...</p>
                            </li>
                            <li>
                                <div class="close"> <a href="#"></a></div>
                                <div class="selt-img">
                                    <img src="/assets/customized/1.jpg" alt="">
                                </div>
                                <p>Enchante Caramel...</p>
                            </li>
                            <li>
                                <div class="close"> <a href="#"></a></div>
                                <div class="selt-img">
                                    <img src="/assets/customized/1.jpg" alt="">
                                </div>
                                <p>Enchante Caramel...</p>
                            </li>
                            <li>
                                <div class="close"> <a href="#"></a></div>
                                <div class="selt-img">
                                    <img src="/assets/customized/1.jpg" alt="">
                                </div>
                                <p>Enchante Caramel...</p>
                            </li>
                            <li>
                                <div class="close"> <a href="#"></a></div>
                                <div class="selt-img">
                                    <img src="/assets/customized/1.jpg" alt="">
                                </div>
                                <p>Enchante Caramel...</p>
                            </li>

                        </ul>
                    </div>
                    <div class="col-lg-4 col-md-12 p-0">
                        <div class="cart-right mt-0 p-0">

                            <div class="card  ">
                                <div class="card-body p-0">
                                    <ul class="list-group list-group-sm list-group-flush-y list-group-flush-x">

                                        <li class="list-group-item d-flex">


                                            <div class="cta-part">
                                                <div class="product-details-btn">
                                                    QTY
                                                </div>

                                                <div class=" qty-btn-area">

                                                    <div class="qty-count">
                                                        <span class="input-group-btn">
                                                            <button type="button" class="btn-number  minus"
                                                                disabled="disabled" data-type="minus"
                                                                data-field="quant[1]">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                    height="16" fill="currentColor"
                                                                    class="bi bi-dash-lg" viewBox="0 0 16 16">
                                                                    <path fill-rule="evenodd"
                                                                        d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z" />
                                                                </svg>
                                                            </button>
                                                        </span>
                                                        <input type="text" name="quant[1]" class="input-number"
                                                            value="1" min="1" max="10">
                                                        <span class="input-group-btn">
                                                            <button type="button" class="btn-number plus"
                                                                data-type="plus" data-field="quant[1]">
                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                    height="16" fill="currentColor" class="bi bi-plus"
                                                                    viewBox="0 0 16 16">
                                                                    <path
                                                                        d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                                                                </svg>
                                                            </button>
                                                        </span>
                                                    </div>
                                                </div>




                                            </div>
                                        </li>

                                        <li class="list-group-item d-flex subtotal">
                                            <span>Total</span> <span class="ml-auto font-size-sm price">71 KWD</span>
                                        </li>

                                    </ul>
                                </div>
                            </div>



                            <div class=" cart-btm pt-0">
                                <a class="btn primery-btn w-100 float-right" href="checkout.html">Add To cart</a>

                            </div>
                            <div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@push('asset-bottom')
<script src="/js/main.js"></script>
@endpush