@extends('layouts.front-layout')
@section('content')

    <section class="stepsform">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12 col-sm-12 col-12 text-center p-0 mt-3 mb-2">
                    <div class="card">
                        <h2 id="heading">Your Regimen.</h2>
                        <form id="msform">
                            @php
                                $count = 1;
                            @endphp

                            <ul class="list-unstyled">
                                <li class="nav-item mycart">
                                    <a class="nav-link waves-effect" href="#">
                                        <i class="fa fa-shopping-cart"></i>
                                        <span class="clearfix  d-sm-inline-block">

                                 <span class="basket_item_count">
                                     <span class="badge badge-pill red">0</span>
                                 </span>
                              </span>
                                    </a>
                                </li>
                            </ul>

                            <ul id="progressbar">
                                @foreach($categories as  $category )
                                    <li class="active" id="account" value="{{$category->id}}">
                                        <span>{{$count++}}</span><strong>{{$category->category_name}}</strong></li>
                                @endforeach
                            </ul>

                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <br> <!-- fieldsets -->

                            @foreach($categories as $key => $category)
                                <fieldset>
                                    <div class="form-card">
                                        <div class="row">
                                            <div class="col-7">
                                                <h2 class="fs-title">Quest:</h2>
                                            </div>
                                            <div class="col-5">
                                                <h2 class="steps">Step {{$key+1}} - 4</h2>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="product-slider owl-carousel owl-theme">

                                        @foreach( App\Models\Product::where('category_id',$category->id)->get() as $product)
                                            <div class="item">
                                                <div class="product-cart">
                                                    <img src="{{$product->productImage('product_image') ? : ''}}"
                                                         alt="not found">
                                                    <div class="product-cart-overlay">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                    <span class="dis">
                                                        <h5>20% off</h5>
                                                    </span>
                                                            <span class="hrtCrt">
                                                        <a href="#"><i class="far fa-heart"></i></a>
                                                                 <a href="#" class="add_to_cart_btn"data-id="{{$product->id}}"><i class="fas fa-shopping-cart"
                                                                                ></i>Click</a>
{{--                                                        <a href="#"><i class="fas fa-shopping-cart add_to_cart_btn "--}}
{{--                                                                       data-id="{{$product->id}}"></i></a>--}}
                                                    </span>
                                                            <span></span>

                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <span>
                                                             <h5> Product :  {{$product->product_name ? : ''}}</h5>
                                                        <h5>Price $ {{$product->product_price ? : ''}}</h5>
                                                    </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        @endforeach

                                    </div>

                                </fieldset>
                            @endforeach

                        </form>

                        <span style="font-size: 30px;">Total : <span id="show_total_price"></span></span>
                        @if($key == 3)

                            <form action="{{route('store_order')}}" method="POST" style="display: none" id="show_form">
                                @csrf
                                <input type="hidden" id="sub_total_price" name="sub_total_price">
                                <input type="submit" name="place_order_btn" value="Submit" class="btn btn-primary mt-4">
                            </form>

                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')


@endsection