@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-sm-12">
        <!-- <a href="{{ route('sellers.create')}}" class="btn btn-info pull-right">{{translate('add_new')}}</a> -->
    </div>
</div>

<br>

<!-- Basic Data Tables -->
<!--===================================================-->
<div class="panel">
    <div class="panel-heading bord-btm clearfix pad-all h-100">
        <h3 class="panel-title pull-left pad-no">{{translate('Sms Report')}}</h3>
        <div class="pull-right clearfix">
            <form class="" id="sort_customers" action="{{route('sms.report')}}" method="post">
                @csrf
                <div class="box-inline pad-rgt pull-left">
                    <!-- <div class="" style="min-width: 200px;">
                        <input type="text" class="form-control" id="search" name="search"@isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="{{ translate('Type email or name & Enter') }}">
                    </div> -->
                     <div id="reportrange_new" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%" >
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                    </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}}">
               
            </form>
        </div>
    </div>
    <div class="panel-body">
        <table class="table table-striped res-table mar-no" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th width="10">#</th>
                    <th width="10">{{translate('Recipient')}}</th>
                    <th width="120">{{translate('Mobile')}}</th>
                    <th width="120">{{translate('Status')}}</th>
                    <th width="120">{{translate('Date')}}</th>
                    <th width="10">{{translate('Message')}}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($reports as $key => $report)
                @php $msg = json_decode($report->request);
                     $user =  \App\User::find($report->user_id); @endphp
                 <tr>
                    <td>{{ ($key+1) + ($reports->currentPage() - 1)*$reports->perPage() }}</td>
                    <td>{{@$user->name}}</td>
                    <td>{{$report->mobile}}</td>
                    <td>{{$report->type}}</td>
                    <td>{{$msg->msg}}</td>
                    <td>{{date('m-d-Y: h:i:s', strtotime($report->created_at))}}</td>
                </tr>
                @empty
                @endforelse
            </tbody>
        </table>
        <div class="clearfix">
            <div class="pull-right">
                {{ $reports->appends(request()->input())->links() }}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></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() {

    var returnDays =  $('input[name="start"]').val();
    var endDate = $('input[name="endDate"]').val();
    var startDate = $('input[name="startDate"]').val();
    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();
    }
    function cb(start, end) {
        $('#reportrange_new span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        lstart = moment($('#reportrange_new').data('daterangepicker').startDate).format('DD-MM-YYYY'),
        lend = moment($('#reportrange_new').data('daterangepicker').endDate).format('DD-MM-YYYY');
        $('input[name="dateRangeStart"]').val(lstart);
        $('input[name="dateRangeEnd"]').val(lend);
    }

    $('#reportrange_new').daterangepicker({
        startDate: start,
        endDate: 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_new').on('apply.daterangepicker', (e, picker) => {
            $('#sort_customers').submit();
        });
    cb(start, end);

});
</script>
@endsection