@extends('layout.frontend_layout')

<style>
    *,
    ::after,
    ::before {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
    }

    a {
        text-decoration: none;
    }

    ul {
        list-style: none;
    }

    html {
        font-size: 62.5%;
    }

    body {
        box-sizing: border-box;
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: 1.7;
        background-color: azure;
    }

    .center-text {
        text-align: center;
    }

    .boxShadow {
        box-shadow: 10px 5px 5px #646363;
    }



    /* ----------------------------- Main Container ----------------------------- */
    .main-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 2rem;
        gap: 5rem;
        /* height: 100vh; */
    }

    /* -------------------------------------------------------------------------- */
    /* ----------------------------- Card Component ----------------------------- */
    .card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        width: 30rem;
        height: max-content;
        background-color: #fff;
        border-radius: 1rem;
        border: 2px solid #d10024;
        box-shadow: 10px 5px 5px #979797;
    }

    .card h3 {
        font-size: larger;
        padding-top: .5rem;
    }

    /* -------------------------------------------------------------------------- */

    /* --------------------------------- Card Server(<meter>) --------------------------------- */
    .card-6-inner {
        padding: 1rem;
    }

    .card-6-inner label {
        display: block;
    }

    /* -------------------------------------------------------------------------- */
</style>
@section('content')
    <!-- SECTION -->
    <!-- SECTION -->
    <div class="section">
        <!-- container -->
        <div class="container">
            <!-- row -->
            <div class="row">
                <!-- Product main img -->
                <div class="col-md-5 col-md-push-2">
                    <div id="product-main-img">

                        @foreach ($product->productImage ?? [] as $key => $item)
                            <div class="product-preview">
                                <img src="{{ asset('uploads/product/' . $item->image) }}" alt="">
                            </div>
                        @endforeach


                    </div>
                </div>
                <!-- /Product main img -->

                <!-- Product thumb imgs -->
                <div class="col-md-2  col-md-pull-5">
                    <div id="product-imgs">

                        @foreach ($product->productImage ?? [] as $key => $item)
                            <div class="product-preview">
                                <img src="{{ asset('uploads/product/' . $item->image) }}" alt="">
                            </div>
                        @endforeach

                    </div>
                </div>
                <!-- /Product thumb imgs -->

                <!-- Product details -->
                <div class="col-md-5">
                    <div class="product-details">
                        <h2 class="product-name">{{ $product->name }}</h2>

                        <div>
                            <h3 class="product-price">{{ $product->price }} <sub style="font-size: 12px">£</sub> <del
                                    class="product-old-price">{{ $product->discount ? '£' : '' }}
                                    {{ $product->discount }}</del></h3>
                            <span class="product-available">In Stock</span>
                        </div>
                        <p>{!! $product->details !!}</p>

                        {{-- {{dd($product)}} --}}
                        {{-- @if (@$product->productSize && $product->productSize->count() > 0)
                            <div class="product-options">
                                <strong> Size</strong>
                            </div>

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="hot-deal">
                                        <ul class="hot-deal-countdown">

                                            @foreach ($product->productSize ?? [] as $size)
                                                <li>
                                                    <div>
                                                        <h3>{{ $size->size }}</h3>

                                                    </div>
                                                </li>
                                            @endforeach

                                        </ul>

                                    </div>
                                </div>

                            </div>
                        @endif --}}


                        <div class="product-options">
                            @if (@$product->productSize && $product->productSize->count() > 0)
                                <label>
                                    Size
                                    <div class="qty-label">
                                        <select class="input-select" id="product_size_id">
                                            @foreach ($product->productSize ?? [] as $size)
                                                <option value="{{ $size->id }}">{{ $size->size }}</option>
                                            @endforeach


                                        </select>
                                    </div>
                                </label>
                            @endif

                            {{-- <label>
                                <div class="qty-label">
                                    Qty
                                    <div class="input-number">
                                        <input id="current_qty" type="number" min="1" value="1">
                                        <span onclick="upQty(this)" class="qty-up">+</span>
                                        <span onclick="downQty(this)" class="qty-down">-</span>
                                    </div>
                                </div>
                            </label> --}}
                        </div>

                        <div class="add-to-cart text-center">

                            <button
                                onclick="addToCart({{ $product->id }},{{ $product->price }},{{ \Auth::user() ? 'true' : 'false' }})"
                                class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>

                        </div>


                        <ul class="product-links">
                            <li>Category:</li>
                            <li><a href="#">{{ $product->category->name }}</a></li>

                        </ul>

                        @if ($product->video)
                            <div>
                                <video controls height="300px" width="300px"
                                    poster="{{ asset('/uploads/thumbnail/' . $product->thumbnail) }}">
                                    <source src="{{ asset('uploads/video/' . $product->video) }}" type="video/mp4">

                                    Sorry, your browser doesn't support embedded videos.
                                </video>
                            </div>
                        @endif

                    </div>
                </div>
                <!-- /Product details -->

                <!-- Product tab -->
                <div class="col-md-12">
                    <div id="product-tab">
                        <ul class="tab-nav">
                            @php
                                $count = 0;
                                // dd($categoryProduct);
                            @endphp
                            @foreach ($categoryProduct->groupby('brand.name') as $brand => $item)
                                @php
                                    $slug_is = generate_slug($brand);

                                @endphp
                                {{-- <li class="tab-style {{ ++$count == 1 ? 'active' : '' }}"><a data-toggle="tab"
                                        href="#{{ $slug_is . $count }}">{{ $brand }}</a></li> --}}

                                <li class="tab-style {{ $comming_slug == $slug_is ? 'active' : '' }}"><a data-toggle="tab"
                                        href="#{{ $slug_is . ++$count }}">{{ $brand }}</a></li>
                            @endforeach
                            {{-- <li class="active"><a data-toggle="tab" href="#tab1">Description</a></li>
                            <li><a data-toggle="tab" href="#tab2">Details</a></li>
                            <li><a data-toggle="tab" href="#tab3">Reviews (3)</a></li> --}}
                        </ul>

                        <div class="tab-content">
                            @php
                                $count_is = 0;

                            @endphp
                            @foreach ($categoryProduct->groupby('brand.name') as $brand_is => $item_is)
                                @php
                                    $slug_is = generate_slug($brand_is);

                                @endphp

                                <div id="{{ $slug_is . ++$count_is }}" {{-- class="tab-pane fade in {{ $count_is == 1 ? 'active' : '' }}"> --}}
                                    class="tab-pane fade in {{ $comming_slug == $slug_is ? 'active' : '' }}">
                                    <div class="row">
                                        @foreach ($item_is as $key => $item)
                                            <div class="col-md-4">
                                                <div class="product">
                                                    <a href="{{ route('admin.product.details', $item->slug) }}">
                                                        <div class="product-img">
                                                            <img src="{{ asset('/uploads/thumbnail/' . $item->thumbnail) }}"
                                                                alt="">
                                                            <div class="product-label">

                                                                <span class="new">NEW</span>
                                                            </div>
                                                        </div>
                                                        <div class="product-body">
                                                            <p class="product-category">{{ $item->category?->name }}</p>
                                                            <h3 class="product-name"><a
                                                                    href="#">{{ $item->name }}</a></h3>
                                                            <h4 class="product-price">£{{ $item->price }} <del
                                                                    class="product-old-price">£{{ $item->discount }}</del>
                                                            </h4>

                                                            <div class="product-btns">
                                                                <button class="add-to-wishlist"><i
                                                                        class="fa fa-heart-o"></i><span class="tooltipp">add
                                                                        to wishlist</span></button>
                                                                <button class="add-to-compare"><i
                                                                        class="fa fa-exchange"></i><span
                                                                        class="tooltipp">add to compare</span></button>
                                                                <a href="{{ route('admin.product.details', $item->slug) }}"
                                                                    title="quick-view"><i class="fa fa-eye"></i><span
                                                                        class="tooltipp"></span></a>
                                                            </div>
                                                        </div>
                                                        <div class="add-to-cart">
                                                            <button class="add-to-cart-btn"><i
                                                                    class="fa fa-shopping-cart"></i> add to cart</button>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>

                                        @endforeach
                                    </div>
                                </div>
                            @endforeach

                            <div class="col-md-12">
                                <div id="product-tab">
                                    <!-- product tab nav -->
                                    <ul class="tab-nav">
                                        <li class="active"><a data-toggle="tab" href="#tab1">Description</a></li>
                                        <li><a data-toggle="tab" href="#tab2">Lavels</a></li>

                                        @if (@$product->insurance)
                                        <li><a data-toggle="tab" href="#tab3">Insurance</a></li>
                                        @endif


                                    </ul>
                                    <!-- /product tab nav -->

                                    <!-- product tab content -->
                                    <div class="tab-content">

                                        <div id="tab1" class="tab-pane fade in active">
                                            <div class="row">

                                                <p>{!! $product->details !!}</p>
                                            </div>
                                        </div>

                                        <div id="tab2" class="tab-pane fade in">
                                            <div class="row">
                                                <div class="main-container">
                                                     @if (count( $product->productLavel) > 0)
                                                     <div class="card-6 card">
                                                        <h3 style="color: #d10024">Lavel</h3>
                                                        <div class="card-6-inner">
                                                            @foreach ( $product->productLavel?? [] as $key=> $item_is )
                                                            <label for="progress-bar-1">{{$item_is->name}}</label>
                                                            <progress id="progress-bar-1" value="{{$item_is->percentage}}"
                                                                max="100">{{$item_is->percentage}} %</progress>
                                                            <output id="progress-output-1">{{$item_is->percentage}}%</output>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                     @endif

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

                                        <div id="tab3" class="tab-pane fade in">
                                            <div class="row">
                                                <div class="main-container" >
                                                     @if (@$product->insurance)
                                                     <div class="card-6 card" style="padding: 5px">
                                                        <strong style="">Insurance Price :</strong> <span> {{@$product->insurance?->insurance_amount}} </span>
                                                        <strong style="">Insurance Year : </strong> <span> {{@$product->insurance?->year}}  </span>
                                                        <strong style="">Description :  </strong> <span>{{@$product->insurance?->description}}</span>

                                                    </div>
                                                     @endif

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


                                    </div>

                                </div>
                            </div>


                        </div>
                        <!-- /product tab content  -->
                    </div>
                </div>
                <!-- /product tab -->
            </div>
            <!-- /row -->
        </div>
        <!-- /container -->




    </div>
    <!-- /SECTION -->

    <!-- /SECTION -->

    <!-- NEWSLETTER -->

    <!-- /NEWSLETTER -->
@endsection
<script>

    //  $.ajax({
    //         url: {{ route('product.review') }},
    //         _method: 'POST',
    //         data: {
    //         'name': 'delete',
    //         'email': 'delete',
    //         'rating': 'delete',
    //         'product_id': 'delete',
    //         },
    //         success: function(response) {
    //         console.log('dddd',response)
    //         Swal.fire({
    //             title: response.data.status,
    //             text: response.data.status_text,
    //             icon: response.data.status_icon,
    //             confirmButtonColor: "#3085d6",
    //             confirmButtonText: "Ok"
    //         }).then((confirm)=>{
    //             window.location.reload();
    //         })
    //         },

    //         });
</script>