@extends('frontend.layouts.app')

@section('content')
<style type="text/css">
#reportrange {  background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%; margin-bottom: 10px; }
.w200 {min-width: 200px;}input.btn.btn-info {
background: #f6c060;border: #f6c060;color: #000;font-size: 12px;}th, td {font-size: 13px !important; color: #000000ad !important;}
.btnact { padding: 0 8px; } i {font-size: 12px;} .form-check-input {margin-left: 0; }
.form-check-input {margin-top: -6px;}button.btn.btn-default.btn-info { position: absolute;top: 0; height: 32px;}
ul.pagination {float: right;}a.btn.btn-secondary i {font-size: 13px;}table#invoiceTable tr td {border: 1px solid #00000012 !important}
.table .thead-light th { border-color: #dee2e6 !important;} .marked { background: #ffeb3b21 !important; }
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <section class="gry-bg py-5">


    	<div class="container">
    	<div class="row">
    	<div class="col-md-1"></div>
    	<div class="col-md-10">
    	<div class="panel">

	    	<div class="panel-heading bord-btm clearfix pad-all h-100">
	        <div class="pull-right clearfix">
            <form class="" id="sort_orders" action="" method="GET">
         
                 <div class="box-inline pad-rgt pull-left" style="margin-right: 10px;">
                    <div class="w200">
                        <div id="reportrange" >
                            <i class="fa fa-calendar"></i>&nbsp;
                            <span></span> <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                </div>

                <input type="hidden" class="form-control" name="dateRangeStart">
                <input type="hidden" class="form-control" name="dateRangeEnd">
                 @if($days_between != null && $endDayFromCurrentDate == null)
                <input type="hidden" name="start" value="{{$days_between}}">
                @endif
               
                <input type="hidden" name="endDate" value="{{@$endDayFromCurrentDate}}">
                <input type="hidden" name="startDate" value="{{@$startDayFromCurrentDate}}">

                <div class="box-inline pad-rgt pull-left" style="margin-right: 10px;">
                    <div class="select w200">
                        <div>
                        	<input type="text" required="" class="form-control" id="search" name="search"@isset($data['search']) value="{{ $data['search'] }}" @endisset placeholder="Type Order ID or Invoice No" style="height: 32px">
                    	</div>
                    </div>
                </div>
                   <div class="box-inline pad-rgt pull-left">
                    <div class="">
                        <div>
                        	<input type="submit" class="btn btn-info" value="Search" style="height: 32px;">
                        	<a class="btn btn-secondary" href="{{url('/download/invoice')}}" style="height: 32px;"><i class="fa fa-refresh" aria-hidden="true"></i></a>
                    	</div>
                    </div>
                </div>

            </form></div>
	    	</div>
	    	<form action="{{ route('invoice.zip.archive') }}" method="post" name="invoice_archive">
	    		@csrf
	    	<button class="btn btn-default btn-info" type="submit" name="submit">
	    		<i class="fa fa-file-archive-o" aria-hidden="true"></i> Download Invoice
			</button>
	        <table class="table table-striped table-bordered" cellspacing="0" width="100%" id="invoiceTable">
	            <thead class="thead-light">
	                <tr>
	                    <th></th>
	                    <th>{{translate('Order Code')}}</th>
	                    <th>{{translate('Invoice Number')}}</th>				                    	                   
	                    <th>{{translate('Order Status')}}</th>
	                    <th>{{translate('Payment Status')}}</th>
	                    <th>{{translate('Order date')}}</th>
	                    <th><center>{{translate('Action')}}</center></th>                   
	                </tr>
	            </thead>
	            <tbody>

	                @forelse ($orderDetail as $key => $orders)
	                    <tr>
	                    	<td><input type="checkbox" class="form-check-input check" name="invoice_index[]" value="{{@$orders->order_invoice}}"></td>
	                    	<td>{{@$orders->code}}</td>
	                    	<td>{{(!empty(@$orders->order_invoice)) ? @$orders->order_invoice : 'Not Genrated'}}</td>
	                    	<td>{{ucwords(orderStatusDiscription(@$orders->delivery_status))}}</td>
	                    	<td>{{ucwords(@$orders->payment_status)}}</td>	    
	                    	<td>{{date('d-M-Y', strtotime($orders->order_date))}}</td>                	
	                    	<td align="center">
	                    		<a class="btn btn-success btnact" href="{{ asset('/public/invoices/'.@$orders->order_invoice)}}" target="_blank" download="{{@$orders->orders_invoice}}"><i class="fa fa-download" data-feather="download"></i>
	                    		</a>
	                    	</td>
	                    </tr>
	                @empty
	                	<tr>
	                		<td colspan="8">
	                			No Record Found
	                		</td>
	                	</tr>
	                @endforelse
	            </tbody>
	        </table>
	         {{ $orderDetail->links() }}
	    </form>
    	</div>
             </div></div></div>
    </section>
@endsection

@section('script')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript">

    function sort_orders(el){
        $('#sort_orders').submit();
    }

    $(".check").click(function(){
    	var scope = $(this);
    	if(scope.is(':checked')){
    		scope.parent().parent().addClass("marked");
    	}else{
    		scope.parent().parent().removeClass("marked");
    	}
    	
    });

    $(function() {
        var returnDays =  $('input[name="start"]').val();
        var endDate = $('input[name="endDate"]').val();
        var startDate = $('input[name="startDate"]').val();
        console.log(startDate);
        console.log(endDate);
        if(returnDays != "" && startDate == ""){ 
                     
            var start =moment().subtract(returnDays, 'days');
        }
        else if(startDate != "" ){
            var start =moment().subtract(startDate, 'days');
        }
        else{
            var start = moment().subtract(89, 'days');
        }

        if(endDate != "" && endDate != startDate){          
           var end =moment().subtract(endDate , 'days');
        }else{
            var end = moment();
        }
          //var end = moment();
       
        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            lstart = moment($('#reportrange').data('daterangepicker').startDate).format('DD-MM-YYYY'),
            lend = moment($('#reportrange').data('daterangepicker').endDate).format('DD-MM-YYYY');
            $('input[name="dateRangeStart"]').val(lstart);
            $('input[name="dateRangeEnd"]').val(lend);
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            maxDate: end,
            ranges: {
               'Today': [moment(), moment()],
               'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
               'Last 7 Days': [moment().subtract(6, 'days'), moment()],
               'Last 30 Days': [moment().subtract(29, 'days'), moment()],
               'Last 90 Days': [moment().subtract(89, 'days'), moment()],
               'This Month': [moment().startOf('month'), moment().endOf('month')],
               'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);
        $('#reportrange').on('apply.daterangepicker', (e, picker) => {
            $('#sort_orders').submit();
        });
        cb(start, end);
        

    });

    </script>
  
@endsection