@extends('layouts.app')

@section('content')

    <div class="pad-all text-center">
        <form class="" action="{{ route('customer_report.index') }}" method="GET">
            <div class="box-inline mar-btm pad-rgt">
                 {{ translate('Sort by verificarion status') }}:
                 <div class="select">
                     <select class="demo-select2" name="verification_status" required>
                        <option value="1"  >{{ translate('Approved') }}</option>
                        <option value="0"  checked >{{ translate('Non Approved') }}</option>
                     </select>
                 </div>
            </div>
            <button class="btn btn-default" type="submit">{{ translate('Filter') }}</button>
        </form>
    </div>

    
    <div class="col-md-offset-2 col-md-8">
        <div class="panel">
            <!--Panel heading-->
            <div class="panel-heading">
                <h3 class="panel-title">{{ translate('Customer report') }}</h3>
                <form class=""  action="{{route('customer_report.export')}}" method="GET">
                    <input type="text" name="daterange" value=""  placeholder=" Select Date" style="margin-right: 128px; float: right; margin-top: -28px;">
                    <h3 class="panel-title" style="float: right; margin-top: -35px;"><button type="submit" class="btn"><i class="fa fa-download" aria-hidden="true"></i>{{ translate('Export report') }}</button></h3>
                </form>
            </div>

            <!--Panel body-->
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped mar-no demo-dt-basic">
                        <thead>
                            <tr>
                                <th>{{ translate('Customer Name') }}</th>
                                <th>{{ translate('Email') }}</th>
                                <th>{{ translate('Phone') }}</th>
                                <th>{{ translate('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($users as $key => $user)
                                
                                <tr>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ @$user->phone }}</td>
                                    <td>
                                        @if (!empty($user->email_verified_at))
                                            <div class="label label-table label-success">
                                                {{translate('Verified')}}
                                            </div>
                                      
                                        @else
                                            <div class="label label-table label-danger">
                                                {{translate('Not Verified')}}
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty  
                                <tr>
                                    <td>
                                        No Records Found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@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>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript">
    $(function() {
      $('input[name="daterange"]').daterangepicker({
          autoUpdateInput: false,
          maxDate: new Date(),
          locale: {
              cancelLabel: 'Clear'
          }
      });

      $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
          $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      });

      $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
          $(this).val('');
      });

    });
</script>
@endsection