@php
    $section = get_tab_slider_section();
@endphp
@if($section)
<section>
    <div class="container">
        <div class="row">

            <div class="sec5-heading-main d-xxl-block d-xl-block d-lg-block d-md-none d-sm-none d-none">
                <div class="sec5-heading">
                    <img src="imgs/new-logo3.jpg" alt="">
                    <h3>{{ $section->heading }}</h3>
                    <h3>{{ $section->sub_heading_1 }}</h3>
                </div>
            </div>


            <!--prod-details-botton-->
            <div class="prod-details-b d-xxl-block d-xl-block d-lg-block d-md-block d-sm-none d-none">
                <div class="prod-details">
                    <a class="book-here-b sub-bg-color" href="{{ $section->button_url_1 }}">{{ $section->button_text_1 }}</a>
                    <a class="view-link" href="{{ $section->link_url }}">{{ $section->link_text }} <i class="fa fa-long-arrow-right"></i> </a>
                </div>
            </div>
            <!--prod-details-botton-->

            <div class="col-12">
                <ul class="nav nav-tabs prod-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                            type="button" role="tab" aria-controls="home" aria-selected="true">{{ $section->tab_1 }}</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">{{ $section->tab_2 }}</button>
                    </li>

                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <!--Slider1-->
                        <div class="prod-slider">
                            <div class="row">
                                <div class="">
                                    <div id="prod-slider" class="owl-carousel  owl-theme">
                                        @if (count($section->slider_1))
                                            @foreach ($section->slider_1 as $item)
                                                <div class="item prod-main">
                                                    <div class="pic-bg">
                                                        <!--on hover start -->
                                                        <div class="prod-opt">
                                                            <div class="prod-icons">
                                                                <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                                                <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                                                <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                                            </div>
                                                            <div class="add-cart">
                                                                <a href="#"> Appointment</a>
                                                            </div>
                                                        </div>
                                                        <!--on hover start -->
                                                        @if ($item->variations[0]['visible_type'] == 'I')
                                                            <img src="{{ asset(Storage::url('public/products/' . $item->id . '/' . $item->variations[0]['image'])) }}">
                                                        @else
                                                            {{-- YTD --}}
                                                        @endif
                                                    </div>
                                                    <h2>{{ $item->product_code }}</h2>
                                                    <h4>${{ number_format($item->variations[0]['price'], 2) }}</h4>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Slider1-->
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <!--Slider1-->
                        <div class="prod-slider">
                            <div class="row">
                                <div class="">
                                    <div id="prod-slider2" class="owl-carousel  owl-theme">
                                        @if (count($section->slider_2))
                                            @foreach ($section->slider_2 as $item)
                                                <div class="item prod-main">
                                                    <div class="pic-bg">
                                                        <!--on hover start -->
                                                        <div class="prod-opt">
                                                            <div class="prod-icons">
                                                                <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                                                <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                                                <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                                            </div>
                                                            <div class="add-cart">
                                                                <a href="#"> Appointment</a>
                                                            </div>
                                                        </div>
                                                        <!--on hover start -->
                                                        @if ($item->variations[0]['visible_type'] == 'I')
                                                            <img src="{{ asset(Storage::url('public/products/' . $item->id . '/' . $item->variations[0]['image'])) }}">
                                                        @else
                                                            {{-- YTD --}}
                                                        @endif
                                                    </div>
                                                    <h2>{{ $item->product_code }}</h2>
                                                    <h4>${{ number_format($item->variations[0]['price'], 2) }}</h4>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Slider1-->
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
@endif