@extends('layouts.front_page')
@section('content')
    <!-- Main Content -->
    <main class="row" ng-controller="productCtrl">
        <div class="col-12 bg-white py-3 my-3">
            <div class="row">

                <!-- Product Images -->
                <div class="col-lg-5 col-md-12 mb-3">
                    <div class="col-12 mb-3">
                            <div class="img-large border" style="background-image: url('{{ env('ADMIN_URL')."/storage/".$shopping_item->getMedia('products')[0]->id."/".$shopping_item->getMedia('products')[0]->file_name }}')"></div>
                    </div>
                    <div class="col-12">
                        <div class="row">
                            @foreach($shopping_item->getMedia('products') as $media)
                                <div class="col-sm-2 col-3">
                                    <div class="img-small border" style="background-image: url({{ env('ADMIN_URL')."/storage/".$media->id."/".$media->file_name }})" data-src="{{ env('ADMIN_URL')."/storage/".$media->id."/".$media->file_name }}"></div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
                <!-- Product Images -->





            <!-- Product Info -->
                <div class="col-lg-4 col-md-9">
                    <div class="col-12 product-name large">
                        {{$shopping_item->name}}
                    </div>
                    <div class="col-12 px-0">
                        <hr>
                    </div>
                    <div class="col-12">
                        {{$shopping_item->detailed_information}}
                    </div>
                </div>
                <!-- Product Info -->

                <!-- Sidebar -->
                <div class="col-lg-3 col-md-3 text-center">
                    <div class="col-12 border-left border-top sidebar h-100">
                        <div class="row">
                            <div class="col-12">
                                        <span class="detail-price">
                                            <span style="font-weight: bolder"
                                                               ng-bind="qty * {{$shopping_item->price}} | currency"></span>
                                        </span>
                                Unit Price: ${{$shopping_item->price}}
                            </div>
                            <form action="{{url('/cart/add/'.$shopping_item->id)}}" method="post">
                                @csrf
                            <div class="col-xl-5 col-md-9 col-sm-3 col-5 mx-auto mt-3">
                                <div class="form-group">
                                    <label for="qty">Quantity:</label>
                                    <input type="number" id="qty" name="qty" ng-model="qty" min="1" value="1" class="form-control{{ $errors->has('qty') ? ' is-invalid' : '' }}" required autofocus>
                                    @if ($errors->has('qty'))
                                        <span class="invalid-feedback">
                                        <strong>{{ $errors->first('qty') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12 mt-3">
                                <button class="btn btn-outline-dark" type="submit"><i class="fas fa-cart-plus mr-2"></i>Add to cart</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- Sidebar -->

            </div>
        </div>

        <div class="col-12 mb-3 py-3 bg-white text-justify">
            <div class="row">

                <!-- Details -->
                <div class="col-md-7">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-12 text-uppercase">
                                <h2><u>Details</u></h2>
                            </div>
                            <div class="col-12" id="details">
                                {{$shopping_item->detailed_information}}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Details -->

                <!-- Ratings & Reviews -->
                <div class="col-md-5">
                    <div class="col-12 px-md-4 border-top border-left sidebar h-100">

                        <!-- Rating -->
                        <div class="row">

                            <div class="col-12">
                                <div class="row">
                                    <div class="col-12 text-uppercase">
                                        <h2><u>How To Use</u></h2>
                                    </div>
                                    <div class="col-12" id="details">
                                        {{$shopping_item->how_to_use}}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 text-uppercase">
                                        <h2><u>Contents</u></h2>
                                    </div>
                                    <div class="col-12" id="details">
                                        {{$shopping_item->ingredients}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Rating -->

                        <div class="row">
                            <div class="col-12 px-md-3 px-0">
                                <hr>
                            </div>
                        </div>


                    </div>
                </div>
                <!-- Ratings & Reviews -->

            </div>
        </div>

    </main>
@endsection