@extends('layouts.admin')
<style>
    #sales-report td{
        text-align: left !important;
        padding: 8px !important;
    }
    #table-clients th{
        padding: 8px !important;
    }

</style>
@php
    $pageLimit = $inputData['pageLimit'];
@endphp
@section('content')
    <div class="row">

        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h1>Sales Report</h1>
                </div>
                <div class="panel-body">

                        <form action="{{route('sales.report') }}" method="get" role="search">
                            <div class="row">
                                <div class="col-md-3 col-xs-12">
                                    <div class="form-group">
                                        <label>Client Name</label>
                                        <input id="clientName"
                                               type="text"
                                               class="form-control" name="clientName"
                                               value="{{$inputData['clientName']}}"
                                               autocomplete="off">

                                    </div>
                                </div>
                                <div class="col-md-3 col-xs-12">
                                    <div class="form-group">
                                        <label>From Date</label>
                                        <input id="fdate"
                                               type="text"
                                               class="form-control" name="fdate"
                                               value="{{$inputData['fdate']}}"
                                               autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-3 col-xs-12">
                                    <div class="form-group">
                                        <label>To Date</label>
                                        <input id="tdate"
                                               type="text"
                                               class="form-control" name="tdate"
                                               value="{{$inputData['tdate']}}"
                                               autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-2 col-xs-12">
                                    <div class="form-group" style="margin-top: 25px;">
                                        <button class="btn btn-outline-info" style="width: 100%" type="submit">Search</button>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 col-xs-12">
                                    <div class="form-group">
                                        <label>Show</label>
                                        <select name="pageLimit" id="pagination" class="form-control"
                                                onchange="this.form.submit()">
                                            <option value="10" @if($pageLimit == 10) selected @endif>10</option>
                                            <option value="20" @if($pageLimit == 20) selected @endif>20</option>
                                            <option value="50" @if($pageLimit == 50) selected @endif>50</option>
                                            <option value="100" @if($pageLimit == 100) selected @endif>100</option>
                                            <option value="500" @if($pageLimit == 500) selected @endif>500</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    <div class="row">
                      <div class="col-md-12 col-xs-12">
                          <div class="table-responsive">
                            <table id="sales-report" class="table table-bordered table-hover">
                              <thead>
                                <tr>
                                  <th>Client Name</th>
                                  <th>Email</th>
                                  <th>Phone</th>
                                  <th>Order Id</th>
                                  <th>Transaction Id</th>
                                  <th>Auth Code</th>
                                  <th>Transaction Status</th>
                                  <th>Created At</th>
                                </tr>
                              </thead>
                              <tbody>
                              @if(!empty($salesData))
                              @foreach ($salesData as $key => $obj)
                                <tr class="tr-height">
                                    <td>{{$obj->first_name.' '.$obj->last_name}}</td>
                                    <td>{{ $obj->email}}</td>
                                    <td>{{ $obj->phone }}</td>
                                    <td>{{ $obj->order_id}}</td>
                                    <td>{{ $obj->transaction_id}}</td>
                                    <td>{{ $obj->auth_code}}</td>
                                    <td>{{ config('constant.SALES_STATUS.'.$obj->status)}}</td>
                                    <td>{{ getStringToDate($obj->created_at,'Y-m-d H:i:s')}}</td>
                                </tr>
                              @endforeach
                              @endif
                              </tbody>
                            </table>

                          </div>
                            <div id="pagination_panel">
                                {{ $salesData->appends($inputData)->links('basic.pagination') }}
                            </div>
                     </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('script')
    <script>
        $(function() {
            common_helper.datePicker('#fdate',"yyyy-mm-dd",true,null);
            common_helper.datePicker('#tdate',"yyyy-mm-dd",true,null);
        });
    </script>
@endpush