@extends('web.layouts.layout')
@section('content')



    <main>

        <!-- ---------- desh_pg ----------- -->
        <section class="desh_pg">
            <div class="container">
                <div class="bredcrumb">
                    <div class="links">
                        <a href="{{route('web.home')}}"> <i class="fal fa-home me-1"></i> <span class="txt"> {{__('web.home')}} </span> </a>
                        <a href="{{route('web.menu')}}"> <i class="fal fa-chevron-right me-3"></i> <span class="txt"> {{__('web.menu')}} </span> </a>
                        <a href="#"> <i class="fal fa-chevron-right me-3"></i> <span class="txt"> {!! $product->name ?? '' !!} </span> </a>
                    </div>
                </div>
                <div class="main_info">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="img">
                                <img src="{{$product->image}}" alt="">
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <div class="info">
                                <h3> {!!  $product->name !!} </h3>
                                <h5> {!! $product->price !!} SR </h5>
                                <div class="text">  {!! $product->description !!} </div>
                                <div class="product-qyt">
                                    <span class="txt"> {{__('web.choose_quantity')}}: </span>
                                    <div class="add-more">
                                        <span class="qt-minus"><i class="fas fa-minus"></i></span>
                                        <input type="text" id="count_product" class="qt border-0" value="1">
                                        <span class="qt-plus"><i class="fas fa-plus"></i></span>
                                    </div>
                                </div>
                                <div class="btns mt-5">
                                    <a href="#0" onclick="addToCart(this)" data-id="{{$product->foodics_id}}" class="butn me-4"> <span> <i class="fal fa-cart-plus me-1"></i> {{__('web.add_to_cart')}} </span> </a>
                                    <a href="{{route('web.menu')}}" class="butn bg-transparent subColor me-4"> <span> <i class="fal fa-arrow-left me-1"></i> {{__('web.add_another_dish')}} </span> </a>
                                </div>
                                <ul class="det_list lh-lg mt-4">
                                    <li> <strong> {{__('web.sku')}}: </strong> <span> {{$product->sku}} </span> </li>
                                    <li> <strong> {{__('web.category')}}: </strong> <span> @foreach($groups as $key => $row) {{ $key != 0 ? '- ' : '' }} {!! $row->name !!} @endforeach </span> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- ---------- instagram ----------- -->
        
            @include('web.pages.components.instagram') 

        <!-- <div class="img_pattern1">
        </div> -->
    </main>

@section('inject_js')
    <script>
        // Increment button click event
        $(".qt-plus").click(function() {
            var value = parseInt($(this).siblings(".qt").val()); // Get the current value
            let url = $(this).attr('data-id')
            let item = $(this).siblings(".qt")
            item.val(value + 1);
        });

        // Decrement button click event
        $(".qt-minus").click(function() {
            var value = parseInt($(this).siblings(".qt").val()); // Get the current value
            if (value > 1) {
                let url = $(this).attr('data-id')
                let item = $(this).siblings(".qt")
                item.val(value - 1); // Decrement the value and set it

            }
        });
    </script>
@endsection
@stop
