@extends('front.layout.app')
@section('content')

    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{assert('images/innerbnr1.png')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <h2>Product Detail</h2>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="product-detail-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <figure class="img-detail">
                        <img src="{{$product->getFirstMediaUrl('product_image')}}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="product-text-detail">
                        <h3 class="heading">{{$product->name ?? ''}}</h3>
                        <h4 class="price" id="priceAmount">{{$product->price ?? ''}}</h4>
                        <span class="small">{{$product->categories->pluck('name')->implode(', ')}}</span>
                        <p>Estimated to ship in <span>8-10</span> business days</p>
                        {{--                        <p><span>COLOR</span> – Black</p>--}}
                        {{--                        <ul class="color-option">--}}
                        {{--                            <li>--}}
                        {{--                                <label class="choose-color">--}}
                        {{--                                    <input type="radio" name="color" checked hidden>--}}
                        {{--                                    <span class="color-box" style="--color:#CC6546"></span>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label class="choose-color">--}}
                        {{--                                    <input type="radio" name="color" hidden>--}}
                        {{--                                    <span class="color-box" style="--color:#344256"></span>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label class="choose-color">--}}
                        {{--                                    <input type="radio" name="color" hidden>--}}
                        {{--                                    <span class="color-box" style="--color:#95D2CB"></span>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label class="choose-color">--}}
                        {{--                                    <input type="radio" name="color" hidden>--}}
                        {{--                                    <span class="color-box" style="--color:#C2C6CC"></span>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label class="choose-color">--}}
                        {{--                                    <input type="radio" name="color" hidden>--}}
                        {{--                                    <span class="color-box" style="--color:#3B3B3D"></span>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label class="choose-color">--}}
                        {{--                                    <input type="radio" name="color" hidden>--}}
                        {{--                                    <span class="color-box" style="--color:#7B7B7B"></span>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label class="choose-color">--}}
                        {{--                                    <input type="radio" name="color" hidden>--}}
                        {{--                                    <span class="color-box" style="--color:#D42A36"></span>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label class="choose-color">--}}
                        {{--                                    <input type="radio" name="color" hidden>--}}
                        {{--                                    <span class="color-box" style="--color:#8588A0"></span>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                        </ul>--}}
                    </div>
                    @foreach($variations as $key => $variation)
                        <div>
                            <label>
                                {{ ucfirst($key) }}
                            </label>
                            <select class="form-control sel_variations" name="sel_variations[]" required>
                                <option value="" selected disabled>Select a option</option>
                                @foreach($variation as $item)
                                    <option value="{{$item->id}}"
                                            data-price="{{$item->pivot->price}}">{{$item->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                    <div class="product-detail-card">
                        <h4>Additional Customization? (optional)</h4>
                        <textarea class="form-control" rows="10"></textarea>
                        {{--                        <h4>NEW! Easy Monograms</h4>--}}
                        {{--                        <p>Choose Your Style</p>--}}
                        {{--                        <ul class="styleOptions">--}}
                        {{--                            <li>--}}
                        {{--                                <label>--}}
                        {{--                                    <input type="radio" name="sytlechoose" checked hidden>--}}
                        {{--                                    <div>--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="{{asset('images/icons/styleOptions1.png')}}" class="img-fluid"--}}
                        {{--                                                 alt="">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <span>Regal</span>--}}
                        {{--                                    </div>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label>--}}
                        {{--                                    <input type="radio" name="sytlechoose" hidden>--}}
                        {{--                                    <div>--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="{{asset('images/icons/styleOptions2.png')}}" class="img-fluid"--}}
                        {{--                                                 alt="">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <span>Courier</span>--}}
                        {{--                                    </div>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label>--}}
                        {{--                                    <input type="radio" name="sytlechoose" hidden>--}}
                        {{--                                    <div>--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="{{asset('images/icons/styleOptions3.png')}}" class="img-fluid"--}}
                        {{--                                                 alt="">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <span>Bar</span>--}}
                        {{--                                    </div>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label>--}}
                        {{--                                    <input type="radio" name="sytlechoose" hidden>--}}
                        {{--                                    <div>--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="{{asset('images/icons/styleOptions4.png')}}" class="img-fluid"--}}
                        {{--                                                 alt="">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <span>Copper</span>--}}
                        {{--                                    </div>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label>--}}
                        {{--                                    <input type="radio" name="sytlechoose" hidden>--}}
                        {{--                                    <div>--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="{{asset('images/icons/styleOptions5.png')}}" class="img-fluid"--}}
                        {{--                                                 alt="">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <span>Initial</span>--}}
                        {{--                                    </div>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                            <li>--}}
                        {{--                                <label>--}}
                        {{--                                    <input type="radio" name="sytlechoose" hidden>--}}
                        {{--                                    <div>--}}
                        {{--                                        <figure>--}}
                        {{--                                            <img src="{{asset('images/icons/styleOptions6.png')}}" class="img-fluid"--}}
                        {{--                                                 alt="">--}}
                        {{--                                        </figure>--}}
                        {{--                                        <span>Name</span>--}}
                        {{--                                    </div>--}}
                        {{--                                </label>--}}
                        {{--                            </li>--}}
                        {{--                        </ul>--}}
                        {{--                        <div class="more">--}}
                        {{--                            <h4>Need More Customization Options?</h4>--}}
                        {{--                            <p>Use our design tool to upload photos, add and position text, and browse our extensive art--}}
                        {{--                                library.</p>--}}
                        {{--                        </div>--}}
                        {{--                        <button class="btn themeBtn blackBtn borderbtn">USE OUR DESIGN TOOL</button>--}}
                        <div class="controlBox">
                            <div class="qtybox">
                                <button class="subbtn"><i class="fas fa-minus"></i></button>
                                <input type="text" class="textbox" value="1" readonly>
                                <button class="addbtn"><i class="fas fa-plus"></i></button>
                            </div>

                            <a class="btn themeBtn blackBtn">ADD TO CART</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="bottelsSection">
        <div class="container">
            <h2 class="heading mb-5 text-center">You May Also Like</h2>
            <div class="row align-items-center">
                <div class="col-md-3">
                    <a href="" class="bottelwrap">
                        <figure>
                            <img src="{{asset('images/bottel1.png')}}" class="img-flud" alt="">
                        </figure>
                        <div class="bottelcntnt">
                            <h3>YETI</h3>
                            <h2>Rambler | 20 oz Tumbler</h2>
                            <ul class="star">
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                            </ul>
                            <h4>$39.00</h4>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="" class="bottelwrap">
                        <figure class="purple">
                            <img src="{{asset('images/bottel2.png')}}" class="img-flud" alt="">
                        </figure>
                        <div class="bottelcntnt">
                            <h3>owala</h3>
                            <h2>Freesip | 24 oz</h2>
                            <ul class="star">
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                            </ul>
                            <h4>$39.00</h4>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="" class="bottelwrap">
                        <figure class="pink">
                            <img src="{{asset('images/bottel3.png')}}" class="img-flud" alt="">
                        </figure>
                        <div class="bottelcntnt">
                            <h3>RTIC</h3>
                            <h2>Tumbler | 30 oz</h2>
                            <ul class="star">
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                            </ul>
                            <h4>$39.00</h4>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="" class="bottelwrap">
                        <figure class="black">
                            <img src="{{asset('images/bottel4.png')}}" class="img-flud" alt="">
                        </figure>
                        <div class="bottelcntnt">
                            <h3>BLENDERBOTTLE</h3>
                            <h2>Strada | 24 oz Protein Shaker Bottle</h2>
                            <ul class="star">
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                                <li><i class="fa fa-star"></i></li>
                            </ul>
                            <h4>$39.00</h4>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

@endsection

@push('page-scripts')
    <script>
        $(function () {
            const base_price = parseFloat("{{$product->price ?? 0}}")

            const totalPrice = () => {
                let totalPrice = 0
                $('.sel_variations').each(function () {
                    // Get the selected option of the current select box
                    let selectedOption = $(this).find('option:selected');

                    // Retrieve the 'data-price' attribute of the selected option
                    let price = parseFloat(selectedOption.data('price'));

                    // Check if price is a number and add it to the total price
                    if (!isNaN(price)) {
                        totalPrice += price;
                    }
                });
                return totalPrice
            }

            $(document).on('change', '.sel_variations', function (e) {
                $('#priceAmount').text((base_price + totalPrice()).toFixed(2))
            })
        })
    </script>
@endpush