@extends('reseller.layouts.master')
@push('styles')
    <link rel="stylesheet" href="{{ elixir('css/datatables.css') }}">
@endpush

@push('title')
    Specific Report
@endpush

@section('page_content')
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="panel" id="exampleWizardForm">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h3>Specific Report</h3>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="">
                            <form method="POST" action="{{ route('reseller.reports.specific') }}">
                                @csrf
                                <div class="row">
                                <div class="form-group col-md-2" style="margin-left: 50px;">
                                    <label for="type">Client Option</label>
                                    <select id="type" class="form-control round" required>
                                        <option value="">--Select One--</option>
                                        <option value="user">Clients</option>
                                    </select>

                                    <label for="companies" style="margin-top: 10px;">Clients</label>
                                    <select name="user_id" id="companies" class="form-control round" required>
                                        <option value="">--Select One--</option>
                                    </select>
                                </div>

{{--                                <div class="form-group col-md-2">--}}
{{--                                   --}}
{{--                                </div>--}}

                                <div class="form-group col-md-2">
                                    <label class="" for="sender">Sender ID</label>
                                    <select class="form-control round" name="sender">
                                        <option></option>
                                        @foreach($sender_ids as $id)
                                            <option value="{{$id->sender_id}}">{{$id->sender_id}}</option>
                                        @endforeach
                                    </select>

                                    <label class="control-label" for="phone_number" style="margin-top: 10px;">Mobile Number </label>
                                    <input type="tel" class="form-control round" id="phone_number" placeholder="024xxxxxxx" name="phone_number" maxlength="13" >
                                </div>
{{--                                <div class="form-group col-md-2">--}}
{{--                                    --}}
{{--                                </div>--}}

                                <div class="form-group col-md-2">
                                    <label for="from_date">Start Date</label>
                                    <input name="from_date" id="from_date" placeholder="from" class="form-control round" type="date"/>
                                    <label for="to_date" style="margin-top: 10px;">End Date</label>
                                    <input name="to_date" id="to_date"  placeholder="to" class="form-control round" type="date"/>
                                </div>
                                &nbsp; &nbsp;

                                <div class="form-group col-md-2">
                                    <label class="control-label" for="phone_numbers">Status </label>
                                    <select class="form-control round" name="status">
                                        <option></option>
                                        <option value="PENDING">PENDING</option>
                                        <option value="DELIVRD">DELIVRD</option>
                                        <option value="UNDELIV">UNDELIV</option>
                                        <option value="FAILED">FAILED</option>
                                        <option value="REJECTD">REJECTD</option>
                                        <option value="EXPIRED">EXPIRED</option>
                                        <option value="ACK/">ACK/</option>
                                        <option value="DELETED">DELETED</option>
                                        <option value="NACK/">NACK/</option>
                                        <option value="UNKNOWN">UNKNOWN</option>
                                    </select>
                                </div>
                                    <button class="btn btn-primary float-left" style="margin-top: 25px;" id="submit" name="submit"  type="submit">Submit</button>
                                </div>
                            </form>
                        </div>

                        <br>
                        <br>
                        <br>

                    <div class="col-md-12 mx-auto">
                        <div class="mx-auto">

                        @if(count($errors)>0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach($errors->all() as $error)
                                        <li>{{$error}}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger">
                                <ul>
                                    <li>{{ session('error') }}</li>
                                </ul>
                            </div>
                        @endif

                        @if(session('success'))
                            <div class="alert alert-success">
                                <ul>
                                    <li>{{ session('success') }}</li>
                                </ul>
                            </div>
                        @endif

                        @if(session('info'))
                            <div class="alert alert-info">
                                <ul>
                                    <li>{{ session('info') }}</li>
                                </ul>
                            </div>
                        @endif
                        </div>
                    </div>

                        <div class="container-fluid col-md-12" style="margin-top: 10px; margin-bottom: 20px;">
                            <table id="reseller_specify_period_table" class="container-fluid col-md-12 table table-responsive table-bordered table-striped">
                                <thead class="h5">
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Start Date</th>
                                    <th scope="col">End Date</th>
                                    <th scope="col">Link</th>
                                    <th scope="col">Status</th>
                                </tr>
                                </thead>
                                <tbody>

                                @if($code == 200)

                                    @foreach($result as $row)
                                        <tr>
                                            <td>{{ $row['id'] }}</td>
                                            <td>{{  date("d-m-Y H:i:s", ($row['start_date']/1000)) }}</td>
                                            <td>{{ date("d-m-Y H:i:s", ($row['end_date']/1000)) }}</td>
                                            <td> <a href="{{ $row['link'] }}">report link</a></td>
                                            <td>{{ $row['status'] }}</td>
                                        </tr>
                                    @endforeach

                                @else
                                    <tr>
                                        <td>No Record Found</td>
                                        <td>No Record Found</td>
                                        <td>No Record Found</td>
                                        <td>No Record Found</td>
                                        <td>No Record Found</td>

                                    </tr>
                                @endif
                                </tbody>
                            </table>
                        </div>

{{--                        {!! $dataTable->table() !!}--}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop


@push('scripts')
    <script src="{{ elixir('js/datatables.js') }}"></script>
    <script src="{{asset('vendor/datatables/buttons.server-side.js')}}"></script>
{{--    {!! $dataTable->scripts() !!}--}}
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <script>
        $( document ).ready(function() {
            $('#resellerspecificreportdatatable-table')
                .on('preXhr.dt', function ( e, settings, data ) {
                    data.status = $('#status').val();
                    data.type = $('#companies').val();
                    data.from_date= $('#from_date').val();
                    data.to_date= $('#to_date').val();
                });

            // $('#submit').click(function (e) {
            //     e.preventDefault();
            //     $('#resellerspecificreportdatatable-table').DataTable().ajax.reload();
            // });

            // $('#submit').click(function () {
            //
            //     $('#resellerspecificreportdatatable-table').DataTable().ajax.reload();
            // });


            $('#type').on('change', function (t) {
                t.preventDefault();
                $('#companies').empty();
                let option = '<option value="">--Select One--</option>';
                let route = '{{route('reseller.get_reseller_users')}}';
                $.get(route,function (data) {
                 // console.log(route);
                    $.each(data,function (i) {
                        option += '<option value="'+data[i].id+'">'+data[i].company.name+'</option>';
                    })
                    $('#companies').append(option)
                })
            });

            window.setTimeout(function () {
                window.location.reload();
            }, 30000);
        });


    </script>
@endpush