@extends('template.main-template')


@section('content')
    <div class="custom-hero"></div>

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

                <section class="main-box">
                    <h1 class="text-center margin-bottom-50">MY SAMPLE ORDER</h1>

                    @if (session()->has('success'))

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

                    @endif

                    <div class="box-dark">
                        <div class="box-body">

                            <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 ($saleProducts as $key => $item)
                                        @if (($key + 1) <= env('LIMIT_SAMPLES_TO_ORDER', 2))
                                    
                                            <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>
                                                    <button type="button" style="background-color:#142d7e; border: 0; color: #fff; padding: 5px;"  data-toggle="modal"
                                                    onclick="openModal('rate-product-{{ $item->productData->product_slug }}')">RATING</button>
                                                </td>
                                            </tr>

                                        @endif
                                    @empty
                                        <div class="alert alert-warning"></div>
                                    @endforelse
                                </tbody>
                            </table>

                        </div>
                    </div>

                    <div class="box-dark"
                        style="background-color: #eeeeee; border-radius: 15px; padding: 30px; displlay: flex; align-items: center; justify-content: center;">
                        <div class="box-header">
                            <h3>Shipping details</h3>
                        </div>
                        <div class="box-body">
                            <strong>{{ $addressData->address_name }}</strong>
                            <p>Address Line 1: <strong>{{ $addressData->street }}</strong></p>
                            {{-- <p>Número: <strong>{{ $addressData->number }}</strong></p> --}}
                            {{-- <p>Bairro: <strong>{{ $addressData->neighbourhood }}</strong></p> --}}
                            <p>City: <strong>{{ $addressData->city }}</strong></p>
                            <p>State: <strong>{{ $addressData->state }}</strong></p>
                            <p>Zipcode: <strong>{{ $addressData->zipcode }}</strong></p>
                        </div>
                    </div>

                    <div class="box-dark margin-top-50">
                        <div class="box-header">
                            <h3>
                                Shipping Status:
                                @if ($saleData->payment_status === 1)
                                    @switch($saleData->sale_status)
                                        @case(0)
                                            <b style="color: orange;">Waiting Confirmation</b>
                                        @break

                                        @case(1)
                                            <b style="color: #142d7e;">Preparing package</b>
                                        @break

                                        @case(2)
                                            <b style="color: #23b100;">Shipped</b>
                                        @break

                                        @default
                                    @endswitch
                                @else
                                    <small style="color: orange;">Waiting Confirmation</small>
                                @endif
                            </h3>
                        </div>
                        <div class="box-body"
                            style="background-color: #eeeeee; border-radius: 15px; padding: 30px; displlay: flex; align-items: center; justify-content: center;">
                            <p>
                                <strong>{{ $saleData->shipping_type }}</strong>
                            </p>
                            @if ($saleData->shipping_code)
                                <b>Tracking Code: </b>{{ $saleData->shipping_code }}
                            @else
                                @if ($saleData->sale_status == 2)
                                    You will receive the tracking code shortly.
                                @endif
                            @endif
                        </div>
                    </div>
                </section>

            </div>
        </section>
    </div>

    @foreach ($saleProducts as $product)
        <div class="custom-modal" id="rate-product-{{ $product->productData->product_slug }}">
            <div class="modal-dialog-box">
                <div class="modal-header">
                    <h1 class="modal-title text-center">Rating {{ $product->productData->product_title }}</h1>
                </div>
                <div class="modal-body">
                    @php
                        $id_rating = (isset($product->productData->myRating->id))? $product->productData->myRating->id : null;
                    @endphp
                    <form id='form-{{$product->productData->product_slug}}' action="{{ route('customer.product_rating', ['id_product' => $product->productData->id, 'id_rating' => $id_rating]) }}" method="post">
                        @csrf
                        <input type="hidden" name="id_product" value="{{ (isset($product->productData->id))?$product->productData->id:null }}">
                        <input type="hidden" name="id_rating" value="{{ $id_rating }}">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="">Title</label>
                                    <input type="text" name="title" value="{{ (isset($product->productData->myRating->title))?$product->productData->myRating->title:'' }}" placeholder=""
                                        class="form-control" required>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="">Stars</label>
                                    <select name="stars" class="form-control">
                                        <option value="1" {{ (isset($product->productData->myRating->stars) && $product->productData->myRating->stars === 1) ? 'selected':'' }}>1</option>
                                        <option value="2" {{ (isset($product->productData->myRating->stars) && $product->productData->myRating->stars === 2) ? 'selected':'' }}>2</option>
                                        <option value="3" {{ (isset($product->productData->myRating->stars) && $product->productData->myRating->stars === 3) ? 'selected':'' }}>3</option>
                                        <option value="4" {{ (isset($product->productData->myRating->stars) && $product->productData->myRating->stars === 4) ? 'selected':'' }}>4</option>
                                        <option value="5" {{ (isset($product->productData->myRating->stars) && $product->productData->myRating->stars === 5 || $product->productData->myRating === null) ? 'selected':'' }}>5</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="">Your Rating</label>
                            <textarea name="description" required class="form-control"name="" id="" cols="30" rows="5">{{ isset($product->productData->myRating->description)?$product->productData->myRating->description:'' }}</textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div>
                        <button onclick="openModal('rate-product-{{ $product->productData->product_slug }}')" class="btn" style="background-color: #000;">Close</button>
                        <button onclick="document.querySelector('#form-{{$product->productData->product_slug}}').submit()" class="btn pull-right">Send Rating</button>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    @csrf
@endsection


@push('css')
    <link rel="stylesheet" href="{{ asset('shop/css/shop-main.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/cart.css') }}">
    <style>
        @media only screen and (min-width: 500px) {
            .main-box {
                max-width: 100% !important;
            }
        }
    </style>
@endpush
@push('javascript')
    <script>
        function openModal(id) {
            let modal = document.querySelector('#' + id)

            if (modal.style.display == 'flex') {
                modal.style.display = 'none'
            } else {
                modal.style.display = 'flex'
            }
        }
    </script>
@endpush