@extends('front.layouts.app')
@push('css')
    <style>
        .gallery-page--carousel {
            padding-bottom: 20px !important;
        }

        .gallery-page {
            position: relative;
            display: block;
            padding: 20px 0 90px;
        }

        .color-circle-wrapper {
            position: relative;
            width: 40px;
            height: 40px;
        }

        .color-circle {
            display: inline-block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid #ddd;
            transition: border 0.3s;
        }

        input[type="radio"]:checked + .color-circle {
            border: 2px solid #000; /* Highlight selected color */
        }
    </style>
@endpush
@section('content')

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg" style="background-image: url(assets/images/backgrounds/page-header-bg.jpg)">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route('arabiaMobiles.home')}}">Home</a></li>
                    <li><span>/</span></li>
                    <li class="active">Shop</li>
                </ul>
                <h2>Product Details</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->

    <!--Product Details Start-->
    <section class="product-details">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-xl-6">
                    <div class="product-details__img">
                        <div class="p-one__carousel owl-theme owl-carousel carousel--have-shadow carousel-dot-style-1">
                            <div class="item">
                                <img src="{{asset($product->product_photo)}}" alt=""/>
                            </div>

                            @if($product->product_photos)
                                @foreach(json_decode($product->product_photos) as $ph)
                                    <div class="item">
                                        <img src="{{asset($ph)}}" alt=""/>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-6">
                    <div class="product-details__top">
                        <h3 class="product-details__title">{{$product->product_name}} <span>${{$product->price}}</span>
                        </h3>
                    </div>
                    <div class="product-details__content">
                        <div class="product-details__content-text1">
                            {!! $product->description !!}
                        </div>
                        {{--                        <p class="product-details__content-text2">--}}
                        {{--                            <b>REF.</b> 4231/{{$product->id}} <br>--}}
                        {{--                            <b>Availability.</b> Available in store</p>--}}
                    </div>

                                        @if($product->colors && sizeof(json_decode($product->colors))>0)
                        <div class="product-details__quantity">
                            <h3 class="product-details__quantity-title">Select Color</h3>
                            <div class="d-flex flex-wrap" id="color-options">
                                @foreach(json_decode($product->colors, true) as $key=>$color)
                                    @if($key==0)
                                                                                @endif

                                    <div class="color-circle-wrapper mr-3 mb-3">
                                        <input type="radio" name="selected_color" value="{{ $color['name'] }}"
                                               id="color_{{ $loop->index }}" hidden>
                                        <label for="color_{{ $loop->index }}" class="color-circle"
                                               data-color="{{json_encode($color)}}"
                                               style="background-color: {{ $color['color'] }};"></label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                    <div class="product-details__quantity">
                        <h3 class="product-details__quantity-title">Quantity</h3>
                        <div class="quantity-box">
                            <button type="button" class="sub"><i class="fa fa-minus"></i></button>
                            <input type="number" id="qqt" value="1"/>
                            <button type="button" class="add"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>


                    <div class="product-details__buttons">


                        <div class="product-details__buttons-2">
                            <a
                                href="#"
                                onclick="var qqt = $('#qqt').val();addToCart('{{$product->id}}','{{$product->product_name}}','{{asset($product->product_photo)}}','{{$product->price}}',qqt);"
                                class="thm-btn">Add to cart</a>
                        </div>
                    </div>
                    <div class="product-details__social">
                        <div class="title">
                            <h3>Share with friends</h3>
                        </div>
                        <div class="product-details__social-link">
                            <a href="https://www.facebook.com/arabiamobilesofficial"><span class="fab fa-facebook"></span></a>
                            <a href="https://www.linkedin.com/company/arabia-mobiles/"><span class="fab fa-linkedin"></span></a>
                            <a href="https://www.instagram.com/arabia.mobiles"><span class="fab fa-instagram"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Product Details End-->
    <section class="product-description">
        <div class="container">
            <h3 class="product-description__title">Related Products</h3>
            <section class="gallery-page gallery-page--carousel">
                <div class="container">
                    <div class="thm-owl__carousel owl-theme owl-carousel carousel--have-shadow carousel-dot-style-1"
                         data-owl-options='{
					"loop": true,
					"autoplay": true,
					"margin": 0,
					"items": 1,
					"nav": false,
					"dots": true,
					"smartSpeed": 500,
					"autoplayTimeout": 10000,
					"navText": ["<span class=\"fa fa-angle-left\"></span>","<span class=\"fa fa-angle-right\"></span>"],
					"responsive": {
						"0": {
							"items": 1
						},
						"768": {
							"items": 2,
							"margin": 30
						},
						"992": {
							"items": 3,
							"margin": 30
						}
					}
				}'>
                        @foreach(\App\Models\Product::where('brand_id',$product->brand_id )->
where('id','<>',$product->id)->orderBy('id','desc')->skip(0)->take(8)->get() as $p)

                            <div class="item">
                                <!--Gallery Page Single-->
                                <div class="gallery-page__single">
                                    <div class="gallery-page__img">
                                        <a
                                            href="{{route('arabiaMobiles.product-details',['id'=>$p->id])}}">
                                            <img src="{{asset($p->product_photo)}}" alt="">
                                            <div class="gallery-page__icon">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach

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

@endsection

@push('p_js')
    <script>
        var selected_color = '{{$selected_color}}'.replaceAll('&quot;', '"');
        $(document).ready(function () {
            // Highlight selected color when clicked
            $('.color-circle').on('click', function () {
                $('.color-circle').css('border', '3px solid #ddd'); // Reset all borders
                $(this).css('border', '3px solid #000'); // Highlight selected border
                selected_color = $(this).attr('data-color').replaceAll('&quot;', '"');
            });
        });
    </script>
@endpush