@extends('frontend.layouts.app-dashboard')

@section('content')

<div class="order-page-sec user-dashboard">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4">
                <div class="post-sub-sec order-left-block">
                    <div class="order-title">
                        <h5>Order History</h5>
                    </div>
                    <div class="order-content">
                        <form class="order-history-form" action="{{route('user.order.index')}}" enctype="multipart/form-data">
                            <div class="form-row">
                                <div class="form-group col-lg-7">
                                    <label for="filterByMonth">Month</label>
                                    <select name="filterByMonth" id="FilterByMonthField" tabindex="-1" class="form-control">
                                        <option value="0" selected="selected">All Months</option>
                                        <option value="01">January</option>
                                        <option value="02">February</option>
                                        <option value="03">March</option>
                                        <option value="04">April</option>
                                        <option value="05">May</option>
                                        <option value="06">June</option>
                                        <option value="07">July</option>
                                        <option value="08">August</option>
                                        <option value="09">September</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                    </select>

                                </div>
                                <div class="form-group col-lg-5">
                                    <label for="filterByYear">Year</label>
                                    <select name="filterByYear" id="FilterByYearField" tabindex="-1" class="form-control">
                                        <option value="2022" selected="selected">2022</option>
                                        <option value="2021">2021</option>
                                        <option value="2020">2020</option>
                                        <option value="2019">2019</option>
                                        <option value="2018">2018</option>
                                        <option value="2017">2017</option>
                                        <option value="2016">2016</option>
                                        <option value="2015">2015</option>
                                        <option value="2014">2014</option>
                                    </select>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary">View Orders</button>
                                </div>
                            </div>
                        </form>
                        <hr>
                        <span class="order-info-text">
                           The order information provided is meant to provide a historical record but may not be fully accurate as some payments may not be included.
                        </span>
                    </div>

                </div>

            </div>
            <div class="col-lg-9 col-md-8">
                <div class="post-sub-sec order-right-block">
                    <div class="order-title">
                        <h5>Showing Orders (All Months)</h5>
                    </div>
                    <div class="order-items-table">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">Invoice no.</th>
                                    <th scope="col">Order Details</th>
                                    <th scope="col">Date</th>
                                    <th scope="col" class="price">Price</th>
                                </tr>
                            </thead>
                            <tbody>
                               	@if( isset( $orders )  && count( $orders ) > 0)
	                               	@foreach( $orders as $order )
		                                <tr>
		                                    <td>{{$order->invoice_no}}</td>
		                                    <td>{{$order->additional_information ?? 'No info'}}</td>
		                                    <td>{{date('m/d/Y',strtotime($order->created_at) )}}</td>
		                                    <td>${{$order->total_price}}</td>
		                                </tr>
	                                @endforeach
                                @else
                                    <tr>
                                        <td colspan="4">No orders yet!</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                <nav aria-label="..." class="pagination-section">
                   <!--  <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <span class="page-link">Previous</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active">
                            <span class="page-link">
                                2
                                <span class="sr-only">(current)</span>
                            </span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Next</a>
                        </li>
                    </ul> -->
                </nav>
            </div>
        </div>
    </div>
</div>

@endsection