@extends('template.main-template')


@section('content')
    <main class="bg_gray">
        <div class="container margin_30">
            <div class="page_header">
                {{-- <div class="breadcrumbs">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Order</a></li>
                        <li>#{{ $saleData->id }}</li>
                    </ul>
                </div> --}}
                <h1>My Order #{{ $saleData->id }}</h1>
            </div>
            <!-- /page_header -->
            <table class="table table-striped cart-list">
                <thead>
                    <tr>
                        <th>
                            Product
                        </th>
                        <th>
                            Price
                        </th>
                        <th>
                            Quantity
                        </th>
                        <th>
                            Subtotal
                        </th>
                        <th>

                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($saleProducts as $product)
                        <tr>
                            <td>
                                <div class="thumb_cart">
                                    @if (count($product->productData->images) > 0)
                                        <img src="{{ asset('template/img/products/product_placeholder_square_small.jpg') }}"
                                            data-src="{{ asset('storage/' . $product->productData->images[0]->file) }}"
                                            class="lazy" alt="Image">
                                    @else
                                        <img src="{{ asset('template/img/products/product_placeholder_square_small.jpg') }}"
                                            data-src="{{ asset('template/img/products/shoes/1.jpg') }}" class="lazy"
                                            alt="Image">
                                    @endif
                                </div>
                                <div style="display: flex; flex-direction: column;">
                                    <span class="item_cart">{{ $product->productData->product_title }}</span>
                                    <span class="text-secondary">
                                        <ul>
                                            @foreach (json_decode($product->product_variations) as $key => $option)
                                                <li>
                                                    <strong>{!! $option !!}</strong>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </span>
                                </div>
                            </td>
                            <td>
                                <strong>{{ formatMoney($product->price, true) }}</strong>
                            </td>
                            <td>
                                <div class="" style="background-color: #fff; padding: 10px; text-align: center;">
                                    <span class="qty2">{{ $product->product_qt }}</span>
                                </div>
                            </td>
                            <td>
                                <strong>{{ formatMoney($product->product_value_subtotal, true) }}</strong>
                            </td>
                            <td class="options">
                                <a href="#"
                                    onclick="openModal('rate-product-{{ $product->productData->product_slug }}'); return false;"><i
                                        class="ti-star"></i></a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>


        </div>
        <!-- /container -->

        @if ($saleData->payment_status == '3' || $saleData->sale_status == '3')

            <div class="box_cart">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            @if ($saleData->sale_status == '3')
                                <div class="alert alert-danger text-left" style="text-align: left!important;">
                                    Your order has been returned.
                                </div>
                            @endif
                        </div>
                        <div class="col-12">
                            @if ($saleData->payment_status == '3')
                                <div class="alert alert-danger text-left" style="text-align: left!important;">
                                    Your payment has been refunded.
                                </div>
                            @endif

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

        @endif

        <div class="box_cart">
            <div class="container">
                <div class="row">
                    <div class="col-xl-8 col-lg-8 col-md-6">

                        <div class="row">
                            <div class="col-lg-6 col-md-12 col-sm-12">
                                <div class="box-dark"
                                    style="background-color: #eeeeee; border-radius: 15px; padding: 30px; display: flex; align-items: start; justify-content: center; flex-direction: column;">
                                    <div class="box-header">
                                        <h3>Shipping details</h3>
                                    </div>
                                    <div class="box-body" style="text-align: left;">
                                        <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>

                            <div class="col-lg-6 col-md-12 col-sm-12" style="gap: 20px; display: flex;  flex-direction: column; justify-content: space-between;">
                                <div class="row" style="flex: 1;">
                                    <div class="box-dark"
                                        style="background-color: #eeeeee; border-radius: 15px; padding: 30px; display: flex; align-items: start; justify-content: center; flex-direction: column;">
                                        <div class="box-header">
                                            <h3>Shipping Status</h3>
                                        </div>
                                        <div class="box-body">
                                            @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
                                                    @case(3)
                                                        <b style="color: #d3002e;">Returned</b>
                                                    @break

                                                    @default

                                                @endswitch
                                            @elseif ($saleData->payment_status == 3)
                                                <b style="color: #d3002e;">Payment Refunded</b>
                                            @else
                                                <small style="color: orange;">Waiting Payment Confirmation</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="row" style="flex: 1;">
                                    <div class="box-dark"
                                        style="background-color: #eeeeee; border-radius: 15px; padding: 30px; display: flex; align-items: start; justify-content: center; flex-direction: column;">
                                        <div class="box-header">
                                            <h3>Tracking Number</h3>
                                        </div>
                                        <div class="box-body">
                                            @if ($saleData->shipping_code)
                                                <b>Tracking Number: </b>{{ $saleData->shipping_code }}
                                            @elseif ($saleData->sale_status == 2)
                                                You will receive the tracking number shortly.
                                            @else
                                                <span style="color: orange;">Waiting for updates</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <ul>
                            <li>
                                <span>Subtotal</span> {{ formatMoney($saleData->value_purchase, true) }}
                            </li>
                            @if ($saleData->cupom_code !== null)
                                <li>
                                    <span>Coupon Used</span>
                                    <strong style="color: #2AB523;">
                                        {{ $saleData->cupom_code }} - {{ $saleData->value_discount }}%
                                    </strong>
                                </li>
                            @endif
                            <li>
                                <span>Shipping</span> {{ formatMoney($saleData->value_shipping, true) }}
                            </li>
                            <li>
                                <span>Tax</span> {{ formatMoney($saleData->tax_value, true) }}
                            </li>
                            <li>
                                <span>Total</span>
                                {{ formatMoney(getPurchaseTotal($saleData), true) }}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- /box_cart -->

    </main>



    @foreach ($saleProducts as $product)
        <div class="custom-modal" id="rate-product-{{ $product->productData->product_slug }}" style="display: none;">
            <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 btn-info">Close</button>
                        <button
                            onclick="document.querySelector('#form-{{ $product->productData->product_slug }}').submit()"
                            class="btn btn-success pull-right">Send Rating</button>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    @csrf
@endsection


@push('css')
    <link href="{{ asset('template/css/cart.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('shop/css/shop-main.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/cart.css') }}">
    <style>
        .custom-modal {
            z-index: 9999;
            position: absolute;
            top: 0px;
            background-color: #0000008a;
            display: flex;
            width: 100%;
            height: 100vh;
            align-items: center;
            justify-content: center;
            position: fixed;
        }

        .modal-dialog-box {
            background-color: #fff;
            padding: 50px;

        }

        @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