@extends('template.main-template')

@section('content')
    <section class="sub-bnr"
        style="background: url({{ asset('template/images/banners/cart-hero.png') }}); background-position: fixed !important;"
        data-stellar-background-ratio="0.5">
        <div class="position-center-center">
            <div class="container">
                <h4>Order Samples</h4>
                <p style="color: #fff;">If you're still not sure which Permshield floor is right for your space, order
                    your samples now.</p>
                <ol class="breadcrumb">
                    <li><a href="{{ URL::to('/') }}">Home</a></li>
                    <li><a href="{{ route('product.all') }}">SHOP</a></li>
                    <li class="active">ORDER SAMPLES</li>
                </ol>
            </div>
        </div>
    </section>

    <div class="content">
        <section class="padding-top-100 padding-bottom-50 pages-in chart-page">
            <div class="container">

                @if (session()->has('success'))
                    <div class="alert alert-success">{{ session()->get('success') }}</div>
                @endif

                <!-- Payments Steps -->
                <div class="shopping-cart text-center">
                    <div class="cart-head">
                        <ul class="row">
                            <!-- PRODUCTS -->
                            <li class="col-sm-2 text-left">
                                <h6>PRODUCTS</h6>
                            </li>
                            <!-- NAME -->
                            <li class="col-sm-4 text-left">
                                <h6>NAME</h6>
                            </li>
                            <!-- PRICE -->
                            <li class="col-sm-2">
                                <h6>PRICE</h6>
                            </li>
                            <!-- QTY -->
                            <li class="col-sm-1">
                                <h6>QTY</h6>
                            </li>

                            <!-- TOTAL PRICE -->
                            <li class="col-sm-2">
                                <h6>TOTAL</h6>
                            </li>
                            <li class="col-sm-1"> </li>
                        </ul>
                    </div>

                    @foreach (Cart::content() as $item)
                        <!-- Cart Details -->
                        <ul class="row cart-details">
                            <li class="col-sm-6">
                                <div class="media">
                                    <!-- Media Image -->
                                    <div class="media-left media-middle">
                                        <a href="#." class="item-img">
                                            @if (count($item->productData->images) > 0)
                                                <img class="media-object"
                                                    src="{{ asset('storage/' . $item->productData->images[0]->file) }}"
                                                    alt="">
                                            @else
                                                <img class="media-object"
                                                    src="{{ asset('template/images/sem-imagem.png') }}" alt="">
                                            @endif
                                        </a>
                                    </div>

                                    <!-- Item Name -->
                                    <div class="media-body">
                                        <div class="position-center-center">
                                            <h5>{{ $item->productData->product_title }}</h5>
                                            <p>{{ Str::words($item->productData->short_description, 10, '...') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </li>

                            <!-- PRICE -->
                            <li class="col-sm-2">
                                <div class="position-center-center"> <span class="price"><small>$</small>0.00</span> </div>
                            </li>

                            <!-- QTY -->
                            <li class="col-sm-1">
                                <div class="position-center-center">
                                    <div class="quinty">
                                        <!-- QTY -->
                                        <select class="selectpicker" disabled>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                        </select>
                                    </div>
                                </div>
                            </li>

                            <!-- TOTAL PRICE -->
                            <li class="col-sm-2">
                                <div class="position-center-center"> <span class="price"><small>$</small>0.00</span> </div>
                            </li>

                            <!-- REMOVE -->
                            <li class="col-sm-1">
                                <div class="position-center-center"> <a href="{{ route('cart.remove', $item->rowId) }}"><i
                                            class="icon-close"></i></a> </div>
                            </li>
                        </ul>
                    @endforeach
                </div>
            </div>
        </section>

        <a href="{{ route('cart.finish-order') }}" class="btn btn-block btn-reverse" style="">Finish Order</a>

    </div>
@endsection