@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

                <table id="cart-table-custom" class="table table-responsive table-striped table-hover" style="margin: 0px 25px 0px 0px; overflow: scroll;">
                    <thead>
                        <tr>
                            <th scope="col" width="150px">PRODUCTS</th>
                            <th scope="col">NAME</th>
                            <th scope="col">PRICE</th>
                            <th scope="col">QTY</th>
                            <th scope="col">ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse (Cart::content() as $item)
                            <tr>
                                <td>
                                    <div class="media">
                                        <!-- Media Image -->
                                        <div class="">
                                            <a href="#." class="">
                                                @if (count($item->productData->images) > 0)
                                                    <img class="img-responsive" style=""
                                                        src="{{ asset('storage/' . $item->productData->images[0]->file) }}"
                                                        alt="">
                                                @else
                                                    <img class="img-responsive" style=""
                                                        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>
                                </td>
                                <td>
                                    <h6>{{ $item->productData->product_title }}</h6>
                                    <p>{{ Str::words($item->productData->short_description, 10, '...') }}</p>
                                </td>
                                <td>
                                    {{-- <div class="position-center-center"> --}}
                                        <span class=""><small>$</small>0.00</span>
                                    {{-- </div> --}}
                                </td>
                                <td>
                                    {{-- <div class="position-center-center"> --}}
                                        <div class="quinty">
                                           1
                                        </div>
                                    {{-- </div> --}}
                                </td>
                                <td>
                                    <a href="{{ route('cart.remove', $item->rowId) }}">
                                        <i style="font-size: 25px;" class="icon-close"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <div class="alert alert-warning"></div>
                        @endforelse
                    </tbody>
                </table>

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

                    @forelse (Cart::content() as $item)

                        <ul class="row cart-details">
                            <div class="media">
                                <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 class="col-sm-2">
                                <div class="position-center-center"> <span class="price"><small>$</small>0.00</span> </div>
                            </li>


                            <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>


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


                            <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>
                    @empty
                        <div class="alert alert-warning">
                            You have not added any samples to your cart
                        </div>
                    @endforelse
                </div> --}}
            </div>
        </section>

        @if (count(Cart::content()) > 0)
            <a href="{{ route('cart.finish-order') }}" class="btn btn-block btn-reverse" style="">Finish Order</a>
        @endif

    </div>
@endsection

@push('css')
    {{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> --}}
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.22.6/bootstrap-table.min.js" integrity="sha512-UtciDgel0Ni5fY/wxn5RSaTvt89MCtv9RaLAuQLLJRs2olhj3G16xgtoQLLK3AmotuNgpdDr/B5BAyS180n5Qw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}}
@endpush