@extends('backend.layout')

@section('content')

<div class="row">
	<div class="col-md-12">
		<p style="margin: 0px; padding: 5px 0px;"><span class="text-semibold">{{ ($invoices->currentPage() - 1)*10 + 1 }}-{{ ($invoices->currentPage() - 1)*10 + $invoices->count() }}</span> trong <span class="text-semibold">{{ $invoices->total() }}</span> bản ghi.</p>
		<div class="panel panel-flat">

			<div class="navbar navbar-default navbar-xs fillter padding-0" style="">
				<ul class="nav navbar-nav no-border visible-xs-block">
					<li>
						<a style="float: left;" class="text-left collapsed" data-toggle="collapse" data-target="#navbar-filter"><i class="icon-more"></i></a>
						<a style="float: right;" class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.invoice.list') }}"><i class="icon-cancel-circle2 position-left"></i></a>
						<button style="float: right;" data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess text-right"><i class="icon-search4 position-left"></i></button>
					</li>
				</ul>

				<div class="navbar-collapse collapse" id="navbar-filter">
					<form action="" method="GET">
						<ul class="nav navbar-nav">
							<li>
								<input class="form-control" name="keyword" placeholder="Keyword" value="{{ @$_GET['keyword'] }}"  autocomplete="off">
							</li>

							<li>
								<select name="user_id" id="user_id" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Đại lý">
									<option value="" >Đại lý</option>
									@foreach ($resellers as $res)
										<option value="{{$res->id}}" @if(@$_GET['user_id'] == $res->id) selected="selected" @endif>{{@$res->name}}</option>
									@endforeach
								</select>
							</li>

							<li>
								<select name="customer_id" id="customer_id" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Khách hàng">
									<option value="">Khách hàng</option>
									@foreach ($customers as $cus)
										<option value="{{$cus->id}}" @if(@$_GET['customer_id'] == $cus->id) selected="selected" @endif>{{@$cus->fullname}}</option>
									@endforeach
								</select>
							</li>

							<li>
								<select name="status" id="status" style="margin-top: 3px;" class="form-control select-size-xs select2"  data-allow-clear="true" data-placeholder="Trạng thái">
									<option value="" >Trạng thái</option>
									<option value="new" @if( isset($_GET['status']) &&  $_GET['status'] == "new" ) selected @endif>Mới</option>
									<option value="pay" @if( isset($_GET['status']) &&  $_GET['status'] == "pay" ) selected @endif>Đã thanh toán</option>
									<option value="cancel" @if( isset($_GET['status']) &&  $_GET['status'] == "cancel" ) selected @endif>Huỷ</option>
								</select>
							</li>
						</ul>
						
						<div class="navbar-right hidden-xs">
								<button data-popup="tooltip" title="Lọc" type="submit" class="btn btn-sucess"><i class="icon-search4 position-left"></i></button>
								<a class="color-black btn" data-popup="tooltip" title="Huỷ lọc" href="{{ route('backend.invoice.list') }}"><i class="icon-cancel-circle2 position-left"></i></a>
						</div>
					</form>
				</div>
			</div>
			
			<div class="clearfix"></div>
			<div class="table-responsive" style="min-height:400px;">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>STT</th>
							<th>Mã Invoice</th>
							<th>Mã hợp đồng</th>
							<th>Đại lý</th>
							<th>Khách hàng</th>
							<th>Tổng thu</th>
							<th>Tổng chi</th>
							<th width="100">Trang thái</th>
							<th>Ngày thanh toán</th>
							<th>Tạo bởi</th>
							<th>Ngày tạo</th>
							<th>Note</th>
							<th  class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>
						@if($invoices != null)
						@foreach($invoices as $stt => $invoice)
						<tr>
							<td class="text-center" >{{ ($invoices->currentPage() - 1)*$invoices->perPage() + $stt + 1  }}</td>
							<td>
								<a href="{{ route('backend.invoice.get', $invoice->id) }}">{{ $invoice->invoice_code }}</a>
							</td>
							<td>
								@if( $invoice->contract )
									{{ $invoice->contract_code }} 
									<span class="label label-{{$invoice->contract->is_used}}">{{@$invoice->contract->is_used}}</span>
								@endif
							</td>
							<td>{{ @$invoice->user->name}}</td>
							<td>{{ @$invoice->customer->fullname }}</td>
							
							<td>
								{{ number_format($invoice->total_in, 0, '.', '.') }}<sup>đ</sup>
							</td>
							<td>
								{{ number_format($invoice->total_out, 0, '.', '.') }}<sup>đ</sup>
							</td>
							<td class="text-center">
								@if($invoice->status == 'new')
									<span class="label label-primary">Mới</span>
								@elseif($invoice->status == 'pay')
									<span class="label label-info">Đã thanh toán</span>
								@else 
									<span class="label label-danger">Đã huỷ</span>
								@endif
							</td>
							<td>{{ $invoice->pay_at }}</td>
							<td>{{ $invoice->createdBy->name  }}</td>
							<td>{{ $invoice->created_at }}</td>
							<td style="max-width: 150px;">{{ $invoice->note }}</td>
                            <td class="text-center">
                                <ul class="icons-list">
                                    <li style="margin-right:10px;"><a data-placement="bottom" href="{{ route('backend.invoice.note', $invoice->id) }}" data-placement="bottom" class="text-blue" data-popup="tooltip" title="Thêm ghi chú"><i class="icon-pencil7"></i></a></li>
                                </ul>
                            </td>
						</tr>
						@endforeach
						@endif
					</tbody>
				</table>
				<div class="clear-fix" style="border-top:1px solid #ccc;"></div>
				<div style="padding:10px 15px;text-align:center;">
					{{ $invoices->appends(@$_GET)->links() }}	
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@push('styles')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
	<style>
		
		.select-xs.select2-selection--single{
			height:36px;
		}
		.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
			padding: 5px 5px;
			white-space: normal !important;
		}
		.select-xs.select2-selection--multiple .select2-search--inline .select2-search__field{
			min-width:200px;
		}
		.select2-selection--multiple .select2-search--inline .select2-search__field{
			padding:5px 0px !important;
			max-width: 200px;
		}
		.modal-header .close {
		    position: absolute;
		    right: 10px;
		    top: 9px;
		    margin-top: 0;
		}
		.modal.right .modal-dialog {
		  position: fixed;
		  margin: auto;
		  min-width: 350px; /* Điều chỉnh độ rộng của modal phù hợp với yêu cầu của bạn */
		  height: 100%;
		  top: 45%;
		  right: -370px; /* Khoảng cách từ phía bên phải màn hình */
		  transition: right 0.3s ease-in-out;
		}

		.modal.right.in .modal-dialog {
		  right: 0;
		}
	</style>
@endpush

@push('scripts')
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{ URL::asset('backend/global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
	<script>
		$('.select2').select2();
	</script>
@endpush