@extends('layouts.master')
<meta name="csrf-token" content="{{ csrf_token() }}">
@section('title') Aramian Brother`s Jewelry @endsection

@php
    use Illuminate\Support\Facades\Auth;
    use App\Models\Wishlist;
    use App\Helpers\Helpers;
@endphp

<style>

.btn-added {
    background: #c09578;
    color: #ee0505;
}

.icon{
    line-height: 2.3 !important;
}

.fa-brands{
    line-height: 2 !important;
}

.draggable{
    width: 1200px !important;
}


</style>
@section('content')
    <!--slider area start-->
    <div id="ajax-success-message" class="alert alert-success" style="display: none;"></div>
    <div id="ajax-danger-message" class="alert alert-danger" style="display: none;"></div>

    <div class="slider_area owl-carousel">
      
        @if (count($slideShow) > 0)
            @foreach ($slideShow as $slideShowVal)
                <div class="single_slider" data-bgimg="{{ URL::asset('storage/assets/uploads/'.$slideShowVal->image_name) }}">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <div class="slider_content">
                                    @if (!empty($slideShowVal->text_1))
                                        <p>{{$slideShowVal->text_1}}</p>    
                                    @endif
                                    @if (!empty($slideShowVal->text_2))
                                        <h1>{{$slideShowVal->text_2}}</h1>
                                    @endif

                                    @if (!empty($slideShowVal->price))
                                        <p class="slider_price">{{$slideShowVal->text_3}} <span>${{$slideShowVal->price}}</span></p>  
                                    @endif
                                    @if (!empty($slideShowVal->text_3))
                                        <p>{{$slideShowVal->text_3}}</p>    
                                    @endif

                                    @if (!empty($slideShowVal->button_url) && !empty($slideShowVal->button_txt))
                                        <a class="button" href="{{$slideShowVal->button_url}}">{{$slideShowVal->button_txt}}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach    
        @endif
        
   </div>
   <!--slider area end-->

   <!--banner area start-->
    <section class="banner_section">
        <div class="container">
            <div class="row ">
               
                @if (count($firstCard) > 0)
                    @foreach ($firstCard as $firstCardVal)
                        <div class="col-lg-4 col-md-6">
                            <div class="single_banner">
                                <div class="banner_thumb">
                                        <a href="{{route('shop.index')}}"><img src="{{ URL::asset('storage/assets/uploads/'.$firstCardVal->image_name) }}" alt=""></a>
                                        <div class="banner_content">
                                            <p>{{$firstCardVal->text_1}}</p>
                                            <h2>{{$firstCardVal->text_2}}</h2>
                                            <span>{{$firstCardVal->text_3}}</span>
                                        </div>
                                    </div>
                            </div>
                                
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <!--banner area end-->

    <!--product section area start-->
    {{-- <section class="product_section p_section1"> --}}
    <section class="product_section p_bottom p_section1">
        <div class="container">
            <div class="row">   
                <div class="col-12">
                    <div class="product_area"> 
                        <div class="product_tab_button">
                            <ul class="nav" role="tablist">
                                
                                @if (count($menuType) > 0)
                                    @foreach ($menuType as $menuTypeVal)
                                        <li>
                                            <a class="@if ($menuTypeVal->short_name == 'onsale') @php echo 'active'; @endphp @endif" 
                                                data-bs-toggle="tab" href="#{{ $menuTypeVal->short_name }}" 
                                                role="tab" aria-controls="{{ $menuTypeVal->short_name }}" 
                                                aria-selected="false">{{$menuTypeVal->name}}
                                            </a>
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="onsale" role="tabpanel">
                                <div class="product_container">
                                    <div class="custom-row product_column3">
                                        @if (count($productsOnsale) > 0)
                                            @foreach ($productsOnsale as $productsOnsaleVal)
                                                <div class="custom-col-5">
                                                    <div class="single_product">
                                                        <div class="product_thumb">
                                                            <a class="primary_img" href="{{route('shop.show', $productsOnsaleVal->id)}}">
                                                                <img src="{{ URL::asset('storage/assets/uploads/products/'.$productsOnsaleVal->id.'/'.$productsOnsaleVal->main_image) }}" alt="">
                                                            </a>
                                                            <a class="secondary_img" href="{{route('shop.show', $productsOnsaleVal->id)}}">
                                                            </a>
                                                        </div>
                                                        <div class="product_content">
                                                            <div class="tag_cate">
                                                            </div>
                                                            <h3><a href="{{route('shop.show', $productsOnsaleVal->id)}}">{{$productsOnsaleVal->title}}</a></h3>
                                                            <div class="price_box">
                                                                @if(isset($productsOnsaleVal->discount_price))
                                                                    <span class="old_price">{{Helpers::getUserNumberFormat()->format($productsOnsaleVal->price)}}</span>
                                                                    <span class="current_price">{{Helpers::getUserNumberFormat()->format($productsOnsaleVal->discount_price)}}</span>
                                                                @else
                                                                    <span class="current_price">{{Helpers::getUserNumberFormat()->format($productsOnsaleVal->price)}}</span>
                                                                @endif
                                                                
                                                            </div>
                                                            <div class="product_hover">
                                                                
                                                                <div class="product_desc">
                                                                    <p class="short-text" data-id="{{$productsOnsaleVal->id}}">{{$productsOnsaleVal->description}}</p>
                                                                </div>
                                                                <div class="action_links">
                                                                    <ul>
                                                                        @php
                                                                            $wishlists = Auth::check() 
                                                                                            ? Wishlist::where('created_user_id', Auth::id())->where('products_id', $productsOnsaleVal->id)->first()
                                                                                            : Wishlist::where('session_id', session('wishlist_session_id'))->where('products_id', $productsOnsaleVal->id)->first();
                                                                        @endphp     

                                                                        @if (!empty($wishlists))
                                                                            <li>
                                                                                <a href="javascript:void(0);" title="Wishlist" 
                                                                                    class="btn-outline-primary wishlistLink btn-added" 
                                                                                    style="color: #ee0505;"
                                                                                    data-wish-id="{{ isset($wishlists)?$wishlists->id:null }}" 
                                                                                    data-product-id="{{ $productsOnsaleVal->id }}" 
                                                                                    >
                                                                                    <span class="icon icon-Heart"></span>
                                                                                </a>
                                                                            </li>
                                                                            
                                                                        @else
                                                                            <li>
                                                                                <a href="javascript:void(0);" title="Wishlist" 
                                                                                    class="btn-outline-primary wishlistLink"
                                                                                    data-product-id="{{ $productsOnsaleVal->id }}" 
                                                                                    >
                                                                                    <span class="icon icon-Heart"></span>
                                                                                </a>
                                                                            </li>
                                                                        @endif
                                                                        <li class="add_to_cart" data-product-id="{{ $productsOnsaleVal->id }}" >
                                                                            <span class="add-txt" style="display:none; color:#c09578;">Added successfully</span>
                                                                            <a href="javascript:void(0);" 
                                                                                data-product-id="{{ $productsOnsaleVal->id }}"
                                                                                class="add-to-cart" 
                                                                                title="add to cart">add to cart</a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </section>
    
    <!--product section area end-->

    <!--banner fullwidth start-->
    {{-- <section class="banner_fullwidth">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12">
                   <div class="banner_text">
                        <p>Sale Off 20% All Products</p>
                        <h2>New Trending Collection</h2>
                        <span>We Believe That Good Design is Always in Season</span>
                        <a href="shop.html">shopping Now</a>
                       
                   </div>
                    
                </div>
            </div>   
        </div>
    </section> --}}
    <!--banner area end-->

    <!--product section area start-->
    <section class="product_section p_bottom p_section1">
        <div class="container">
            <div class="row">
               <div class="col-12">
                    <div class="section_title">
                        <h2>Best Selling Products</h2>
                    </div> 
                </div>  
                <div class="col-12">
                    <div class="product_area ">
                         <div class="product_container bottom">
                            <div class="custom-row product_row1">
                               
                                @if (count($productsbestsell) > 0)
                                    @foreach ($productsbestsell as $bestselling)
                                        <div class="custom-col-5">
                                            <div class="single_product">
                                                <div class="product_thumb">
                                                    <a class="primary_img" href="{{route('shop.show', $bestselling->id)}}">
                                                        <img src="{{ URL::asset('storage/assets/uploads/products/'.$bestselling->id.'/'.$bestselling->main_image) }}" alt="">
                                                    </a>
                                                    {{-- <div class="quick_button">
                                                        <a href="#" data-bs-toggle="modal" data-bs-target="#modal_box" data-placement="top" data-original-title="quick view"> quick view</a>
                                                    </div> --}}
                                                </div>
                                                <div class="product_content">
                                                    <div class="tag_cate">
                                                        {{-- <a href="#">Clothing,</a>
                                                        <a href="#">Potato chips</a> --}}
                                                    </div>
                                                    <h3><a href="{{route('shop.show', $bestselling->id)}}">{{$bestselling->title}}</a></h3>
                                                    <div class="price_box">
                                                        @if(isset($bestselling->discount_price))
                                                            <span class="old_price">{{Helpers::getUserNumberFormat()->format($bestselling->price)}}</span>
                                                            <span class="current_price"> {{Helpers::getUserNumberFormat()->format($bestselling->discount_price)}}</span>
                                                        @else
                                                            <span class="current_price">{{Helpers::getUserNumberFormat()->format($bestselling->price)}}</span>
                                                        @endif
                                                    </div>
                                                    {{-- <span class="old_price">$86.00</span>
                                                    <span class="current_price">$60.00</span> --}}
                                                    <div class="product_hover">
                                                        <div class="product_desc">
                                                            <p class="short-text" data-id="{{$bestselling->id}}">{{$bestselling->description}}</p>
                                                        </div>
                                                        <div class="action_links">

                                                            

                                                            <ul>
                                                                @php
                                                                    $wishlists = Auth::check() 
                                                                                    ? Wishlist::where('created_user_id', Auth::id())->where('products_id', $bestselling->id)->first()
                                                                                    : Wishlist::where('session_id', session('wishlist_session_id'))->where('products_id', $bestselling->id)->first();
                                                                @endphp     

                                                                @if (!empty($wishlists))
                                                                    <li>
                                                                        <a href="javascript:void(0);" title="Wishlist" 
                                                                            class="btn-outline-primary wishlistLink btn-added" 
                                                                            style="color: #ee0505;"
                                                                            data-wish-id="{{ isset($wishlists)?$wishlists->id:null }}" 
                                                                            data-product-id="{{ $bestselling->id }}" 
                                                                            >
                                                                            <span class="icon icon-Heart"></span>
                                                                        </a>
                                                                    </li>
                                                                    
                                                                @else
                                                                    <li>
                                                                        <a href="javascript:void(0);" title="Wishlist" 
                                                                            class="btn-outline-primary wishlistLink"
                                                                            data-product-id="{{ $bestselling->id }}" 
                                                                            >
                                                                            <span class="icon icon-Heart"></span>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                {{-- <li><a href="wishlist.html" data-placement="top" title="Add to Wishlist" data-bs-toggle="tooltip"><span class="icon icon-Heart"></span></a></li> --}}
                                                                <li class="add_to_cart" data-product-id="{{ $bestselling->id }}" >
                                                                    <span class="add-txt" style="display:none; color:#c09578;">Added successfully</span>
                                                                    <a href="javascript:void(0);" 
                                                                        data-product-id="{{ $bestselling->id }}"
                                                                        class="add-to-cart" 
                                                                        title="add to cart">add to cart</a>
                                                                </li>
                                                                
                                                                {{-- <li><a href="compare.html" title="compare"><i class="ion-ios-settings-strong"></i></a></li> --}}
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </section>
    
    <!--product section area end-->

    

    <!--Newsletter area start-->
    {{-- <div class="newsletter_area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="newsletter_content">
                        <h2>Our Newsletter</h2>
                        <p>Get E-mail updates about our latest shop and special offers.</p>
                        <div class="subscribe_form">
                            <form id="mc-form" class="mc-form footer-newsletter" >
                                <input id="mc-email" type="email" autocomplete="off" placeholder="Email address..." />
                                <button id="mc-submit">Subscribe</button>
                            </form>
                            <!-- mailchimp-alerts Start -->
                            <div class="mailchimp-alerts text-centre">
                                <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                <div class="mailchimp-success"></div><!-- mailchimp-success end -->
                                <div class="mailchimp-error"></div><!-- mailchimp-error end -->
                            </div><!-- mailchimp-alerts end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    <!--Newsletter area start-->
   
@endsection

@section('script')



<script src="{{ URL::asset('storage/assets/js/popper.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/bootstrap.min.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/plugins.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/owl.carousel.main.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jquery.nice.select.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/scrollup.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/ajax.chimp.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jquery.elevatezoom.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/imagesloaded.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/isotope.main.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jqquery.ripples.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/jquery.cookie.js') }}"></script>
<script src="{{ URL::asset('storage/assets/js/bpopup.js') }}"></script>

<script src="{{ URL::asset('storage/assets/js/main.js') }}"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var paragraphs = document.querySelectorAll(".short-text"); // Select all elements with class 'text'
        // var fileId = $(this).data('id');
        

        paragraphs.forEach(function (paragraph) {
            var fullText = paragraph.textContent; // Get the full text from the paragraph
            var visibleText = fullText.substring(0, 100); // Truncate to 100 characters
            var fieldId = paragraph.getAttribute("data-id");

            if (fullText.length > 10) { // Only apply if the text is long
                paragraph.textContent = visibleText; // Show truncated text
                var moreButton = document.createElement("a");
                moreButton.textContent = "  Show More";
                moreButton.className = "more-button";
                moreButton.href = '{{url('product/view/')}}'+'/'+fieldId;
                paragraph.appendChild(moreButton);
            }
        });
    });
</script>

<script>
    $(document).ready(function () {

        // Set up the CSRF token for AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).on('click', '.wishlistLink', function() {
            var elem = $(this);
            var wishID = elem.data('wish-id');
            var datProductId = elem.data('product-id');

            if (elem.hasClass('btn-added')) {
                // Removing from wishlist
                $('.wishlistLink').css('backgroundColor', "#f1f1f1")
                $('.wishlistLink').css('color', "#666")
                $('.wishlistLink').removeClass('btn-added').removeClass('add-to-wishlist')

                $.ajax({
                    url: 'wishlist/remove/' + wishID,
                    method: 'POST',
                    success: function(response) {
                        if (response.success) {
                            elem.removeAttr('data-wish-id');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
                    },
                    error: function(xhr) {
                        alert('Something went wrong. Please try again.');
                    }
                });

            } else {
                // Adding to wishlist
                elem.addClass('btn-added');
                elem.css('color', "#ee0505"); // Fixed color value
                elem.removeClass('remove-from-wishlist');

                $.ajax({
                    url: 'wishlist/add/' + datProductId,
                    method: 'POST',
                    success: function(response) {
                        if (response.success) {
                            elem.attr('data-wish-id', response.data_id);
                            elem.data('wish-id', response.data_id);
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
                    },
                    error: function(xhr) {
                        alert('Something went wrong. Please try again.');
                    }
                });
            }
        });
    });
</script>
<script>

$(document).ready(function () {

     $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

    $('.add-to-cart').on('click', function () {

            var productId = $(this).data('product-id');
            let elem = $(this)       
            var size = 4;   
            // $('.add_to_cart').addClass('cart-added')
            // var _token = $('meta[name=csrf-token]').attr('content');
            $.ajax({
                url: '/cart/addto',
                method: 'POST',
                data: { sendproductId: elem.attr('data-product-id'), sendSize:size},
                success: function (response) {
                    if (response.success) {
                        // var span = $('<span />').attr('className', 'folder_name').html('aaaaaaa');
                        // $(this).attr('a').after("<span class=test>test</span>");
                        $('.add-txt').show().delay(2000).fadeOut();
                        
                        $('.cart_quantity').html(response.prodCount)
                        $('.cart_text_quantity').html(response.prodSum)
                    } else {
                        alert('Something went wrong. Please try again.');
                    }
                },
                error: function (xhr) {
                    alert('Something went wrong. Please try again.');
                    // alert('An error occurred: ' + xhr.status + ' ' + xhr.statusText);
                }
            });
        })
})

</script>



@endsection