@extends('front.layout.app')
@section('title', 'Account')
@section('extra-css')
    <style>
        .error-message{
            color: red;
            font-style: italic;
        }
    </style>
@endsection
@section('content')
    <section class="main">
        <div class="container">
            <div class="row">
                @include('front.partials.sidemenu')

                <div class="col-md-9 col-sm-12">
                    <div class="orderTab">
                        <h2 class="title">My Orders</h2>
                        @if($orders != null && count($orders) > 0)
                            <table class="table orderTable">
                                <thead>
                                <tr>
                                    <th>Order#</th>
                                    <th>Date</th>
                                    <th>Order Total</th>
                                    <th>Order Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                    @foreach($orders as $order)
                                        <tr>
                                            <td>
                                                <p>{{$order->order_no ?? ''}}</p>
                                            </td>
                                            <td>
                                                <p>{{$order->created_at->format('d/m/Y') ?? ''}}</p>
                                            </td>
                                            <td>
                                                <p>${{$order->total_amount ?? ''}}</p>
                                            </td>
                                            <td>
                                                <p class="text-capitalize">{{$order->order_status ?? ''}}</p>
                                            </td>
                                            <td>
                                                <a href="javascript:void(0)" class="btnStyle orderDetailBtn" data-order_id="{{$order->id}}">View Order</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <p>You did not placed any order</p>
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- Order Detail Modal-->
    <div class="modal fade accountAccesSec" id="OrderDetailModal" tabindex="-1" aria-labelledby="OrderDetailModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="m-0">My Order Details</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="orderTab" id="OrderDetailModalBody">
                        <div class="alert alert-success" role="alert">
                            <span>Order# 10000568</span>
                            <span>Total: $150.00</span>
                            <span>Placed on June 25, 2020 15:48</span>
                            <span>Payment Method: Cash On Delivery</span>
                            <span>Ship to: John Doe</span>
                        </div>
                        <table class="table orderTable">
                            <thead>
                            <tr>
                                <th>Product</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Subtotal</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <p><img src="images/cart-item1.jpg" alt="">Organic Honey</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <p>1</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <a href="#" class="btnStyle">Reorder</a>
                                    <a href="track-order.php" class="btnStyle">Add Review</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p><img src="images/cart-item1.jpg" alt="">Organic Honey</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <p>1</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <a href="#" class="btnStyle">Reorder</a>
                                    <a href="track-order.php" class="btnStyle">Add Review</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p><img src="images/cart-item1.jpg" alt="">Organic Honey</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <p>1</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <a href="#" class="btnStyle">Reorder</a>
                                    <a href="track-order.php" class="btnStyle">Add Review</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p><img src="images/cart-item1.jpg" alt="">Organic Honey</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <p>1</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <a href="#" class="btnStyle">Reorder</a>
                                    <a href="track-order.php" class="btnStyle">Add Review</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p><img src="images/cart-item1.jpg" alt="">Organic Honey</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <p>1</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <a href="#" class="btnStyle">Reorder</a>
                                    <a href="track-order.php" class="btnStyle">Add Review</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p><img src="images/cart-item1.jpg" alt="">Organic Honey</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <p>1</p>
                                </td>
                                <td>
                                    <p>$10.00</p>
                                </td>
                                <td>
                                    <a href="#" class="btnStyle">Reorder</a>
                                    <a href="track-order.php" class="btnStyle">Add Review</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('extra-js')
    <script>
        $(document).ready(function (){
            $('.orderDetailBtn').on('click',function () {
                $order_id = $(this).data('order_id');

                $.ajax({
                    url: "{{url('user/getOrderDetail')}}/"+$order_id,
                    method: 'GET',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res){
                        // console.log(res);
                        var html = '';
                        let total_amount = parseFloat(res.total_amount);
                        let subtotal = parseFloat(res.sub_total);
                        let shiipingCost = parseFloat(res.shipping_cost);
                        let tax = parseFloat(res.tax);
                        html += `<div class="alert alert-success" role="alert">
                            <p>Order#:           <span>${res.order_no}</span></p>
                            <p>Subtotal:         <span>$${subtotal}</span></p>
                            <p>Shipping Cost:    <span>$${shiipingCost}</span></p>
                            <p>Tax:              <span>$${tax}</span></p>
                            <p>Total:            <span>$${total_amount}</span></p>
                            <p>Placed on:        <span>${new Date(res.created_at).toDateString()}</span></p>
                            <p>Ship to:          <span>${res.customer_name}</span></p>
                        </div>
                        <table class="table orderTable">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                    <th>Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>`

                        console.log(res.order_items);
                        res.order_items.map(function (item) {
                            let inner_string = '';
                            for (const option of item.order_options) {
                                inner_string += '<p style="margin-bottom: 0 !important;"><b>'+option.option_name+' :</b>  '+option.option_value+'</p>';
                            }

                            html += `<tr>
                                    <td><p><img src="uploads/products/${item.product.product_image}" alt="">
                                        ${item.product.product_name}
                                        `+ inner_string +`
                                    </p></td>
                                    <td><p>$ ${item.product_per_price}</p></td>
                                    <td><p>${item.product_qty}</p></td>
                                    <td><p>$ ${item.product_per_price*item.product_qty}</p></td></tr>`
                        });
                        html += `</tbody>
                                    </table>`;
                        $('#OrderDetailModalBody').html(html);
                        $('#OrderDetailModal').modal('show');

                    }
                })
            });
        })
    </script>
@endsection