@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>{{$customProducts[0]->description}}</p>
                </div>

                <div class="custom-items ">
                    <article class="create-top ar-create-top">
                        <h4>Select BoX</h4>
                        <ul class="form-controls create-list" id="boxes">
                            @foreach($box as $box)
                            <li>
                                <input type="radio" class="box" id="box{{$box->id}}" name="box"  value="{{$box->weight}}" data-price="{{$box->price}}"/>
                                <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 class="weight">{{$box->weight}}</h3>
                                        <p>{{$box->name}}</p>

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

                    
                        </ul>
                    </article>


                    <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" data-id="{{$product['product']->id}}" >
                                            <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" style="display: none">
                                                                            <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="hidden" 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="javascript:void(0);" 
                                                                        {{-- 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 Box
                                                                        </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">
                            @foreach($card as $card)
                            <li>
                                <input type="radio" class="box" id="card-{{$card->id}}" name="card" />
                                <label for="card-{{$card->id}}"><span></span>
                                    <div class="gift-img"><img src="{{$card->card_image}}" alt="{{$card->card_name}}"></div>
                                    <div class="flower-right">
                                        <h3>{{$card->card_name}}</h3>
                                        <p>{{$card->card_price}} KWD</p>


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

                        </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 cart_list_storage">
                            

                        </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">0.00 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> -->
                                <form method="post" action="{{route('add.to.cart')}}">
                                    <input type="submit" class="btn primery-btn w-100 float-right" value="Add To cart">
                                </form>

                            </div>
                            <div>

                            </div>

                        </div>

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


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