@extends('frontend.app')
<!-- Main Container  -->
@section('content')
    <!-- ========== MAIN CONTENT ========== -->
        <main id="content" role="main">
            <!-- breadcrumb -->
            <div class="bg-gray-13 bg-md-transparent">
                <div class="container">
                    <!-- breadcrumb -->
                    <div class="my-md-3">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-3 flex-nowrap flex-xl-wrap overflow-auto overflow-xl-visble">
                                <li class="breadcrumb-item flex-shrink-0 flex-xl-shrink-1">
                                    <a href="/">Home</a>
                                </li>
                                <li class="breadcrumb-item flex-shrink-0 flex-xl-shrink-1 active" aria-current="page">
                                    My Invoices
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <!-- End breadcrumb -->
                </div>
            </div>
            <!-- End breadcrumb -->
            <div class="container">
                <div class="product-view row" style="margin-bottom:2%;">
					<!--Left Part Start -->
				    @include('frontend.user.partials.left-sidebar')
				    <!--Left Part End -->
				    <!--Right Part Start -->
					<div class="col-xs-12 col-sm-6 col-md-9 right-part" style="background: #fff;margin-top:1%;box-shadow: 0 1px 3px rgba(0,0,0,.2);">
						<div class="right-part">
							<div class="row row-border">
							    <div class="open-support-tkt">
							      	<div class="ost-heading">
							        	<p>My Invoices</p> <span>{{($invoiceDatatotal)}}</span>
							      	</div>
									<div style="float:right;">
										<select style="padding: 2px;border-radius: 0px;margin-top: 0px;" name="status" onchange="window.location = '/user/invoices?status='+this.options[this.selectedIndex].value">
										<option value="">Select Payment Status</option>
										<option value="paid" @if(request()->status=='paid') selected @endif>paid</option>

											<option value="unpaid" @if(request()->status=='unpaid') selected @endif>unpaid</option>
											<option value="overdue" @if(request()->status=='overdue') selected @endif>overdue</option>
											<option value="cancelled" @if(request()->status=='cancelled') selected @endif>cancelled</option>
											<option value="refunded" @if(request()->status=='refunded') selected @endif>refunded</option>								
										</select>
									</div>
									</div>	
								<style type="text/css">
									.ct thead tr th {
										font-weight: 600 !important;
										font-size: 13px;
										padding-bottom: 10px;
									}
									.ct  tr td  {
										font-size: 13px !important;
									}
									.ct>.btn-sm{
										font-size: 13px !important;
										padding: 3px 6px !important;
									}
								</style>
							    <div class="table-responsive">
							      	<table class="table table-striped table-centered ct" style="margin-top:0px;">
							        	<thead>
											@if($invoiceDatatotal>25)
												<tr >
													<td style="text-align: right;padding: 0px;" >
														&nbsp;
													</td>
													<td  style="text-align: right;padding: 0px;" colspan="8" >
														{{ $invoiceData->appends(request()->input())->links() }}
													</td>
												</tr>
											@endif
											<tr>
												<th>Invoice #</th>
												<th>Invoice Type</th>
												<th>Invoice Date</th>
												<th>Due Date</th>
												<th>Total Amount</th>
												<th>Payment Status</th>
												<th>Status</th>
												<th>Actions</th>
											</tr>
								        </thead>
								        <tbody>
									        @if(count($invoiceData))
									        	@foreach($invoiceData as $key => $invoice)
													<tr>
														<td>{{$invoice->invoice_number}}</td>
														<td>{{ucwords(str_replace("_"," ",$invoice->invoice_type))}}</td>
														<td>
									                        {{date('d-m-Y h:i:s a', strtotime($invoice->created_at))}}
														</td>
														<td>
									                        {{date('d-m-Y', strtotime($invoice->due_date))}}
									                    </td>
									                    <td>
														@if($invoice->payment_status == 'partial' && $invoice->invoice_type=='service_upgrade')
															{{$invoice->currency}} @numberFormat($invoice->amount_pending)
														@else
														{{$invoice->currency}} @numberFormat($invoice->invoice_total)
														@endif
									                    </td>
									                    <td>
									                        @if($invoice->payment_status == 'partial')
									                        	<a class="btn btn-info btn-sm" style="text-transform: capitalize;">
									                        		{{$invoice->payment_status}}
									                        	</a>
									                        @elseif($invoice->payment_status == 'paid')
									                        	<a class="btn btn-success btn-sm" style="text-transform: capitalize;">
									                        		{{$invoice->payment_status}}
									                        	</a>
									                        @else
									                        	<a class="btn btn-danger btn-sm" style="text-transform: capitalize;">
									                        		{{$invoice->payment_status}}
									                        	</a>
									                        @endif
									                    </td>
									                    <td>
                                          					{{ $invoice->status}}
									                    </td>
									                    <td>
			                                                <a href="/user/invoice/{{$invoice->id}}/view" class="btn btn-info btn-sm">View</a>
			                                            </td>
													</tr>
												@endforeach
											@else
												<tr>
													<td colspan="8" class="textcenter">
														There are currently no invoice
													</td>
												</tr>
											@endif
								        </tbody>
								    </table>
							    </div>
							</div>
				        </div>
			        </div>
			        <!--Right Part Start -->
			    </div>
            </div>
        </main>
        <!-- ========== END MAIN CONTENT ========== -->
@endsection
<style type="text/css">
.row-border {
    border: 1px solid #c4c4c4;
    margin-bottom: 0px !important;
}
.pagination {
	margin: 5px  !important;

}
.ct tbody tr td {
    padding: 2px  !important;
	</style>
@section('styles')
	<style type="text/css">
.ct thead tr th {
    font-weight: 400 !important;
  }
	</style>
@endsection

{{-- Scripts --}}
@section('scripts')
    @parent

@endsection