@extends('app')

@section('page_title')
    SMS Report - Specify Period
@endsection


@push('styles')
    <link rel="stylesheet" href="{{ elixir('css/datatables.css') }}">
    <style>
        .dt-buttons{
            margin-left: 150px;
        }

        .custom_button{
            padding: 0.5em 1em;
            border: 1px solid #999;
            border-radius: 2px;
            font-size: 0.88em;
            color: black;
            white-space: nowrap;
            /*overflow: hidden;*/
            background-color: #e9e9e9;
            z-index: 1000000;
        }
    </style>
@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">
                        <h3 class="panel-title">SMS Report - Specify Period</h3>
                        <center>

                            @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

                            <form method="post" action="{{ route('specific_report.query') }}">
                                @csrf
                                <div class="row">
                                    <div class="form-group col-md-2" style="margin-left: 40px;">
                                        <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>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label class="control-label" for="phone_number">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">
                                        <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>
                                    <div class="form-group col-md-2">
                                        <label>From</label>
                                        <input class="form-control" type="date" name="from_date" id="from_date"  data-date-autoclose="true"/>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label>To </label>
                                        <input class="form-control" type="date" name="to_date" id="to_date" data-date-autoclose="true"/>
                                    </div>

                                    <div class="row">
                                        <input class="btn btn-primary col-md-1" style="margin-top: 25px;" name="submit"  type="submit">
                                    </div>
                                </div>


                            </form>

{{--                            From <input name="from_date" id="from_date"  data-date-autoclose="true" data-date-format="dd-M-yyyy" data-provide="datepicker-inline"/>--}}
{{--                                To <input name="to_date" id="to_date" data-date-autoclose="true" data-date-format="dd-M-yyyy" data-provide="datepicker-inline"/>--}}
{{--                                <input id="submit" name="submit"  type="submit" value="Submit">--}}

{{--                                <div style="position: absolute; left: 20px; bottom: -35px; z-index: 10000;">--}}
{{--                                    <form action="{{route('exportExcel')}}" method="POST" id="excel_form" class="pull-left">--}}
{{--                                        @csrf--}}
{{--                                        <button class="custom_button" id="excel" name="excel"  type="button"><i class="fa fa-file-excel-o"></i> EXCEL </button> &nbsp;--}}
{{--                                    </form>--}}

{{--                                    <form action="{{route('exportCsv')}}" method="POST" id="csv_form" class="pull-left">--}}
{{--                                        @csrf--}}
{{--                                        <button class="custom_button" id="csv" name="csv"  type="button"><i class="fa fa-file-excel-o"></i> CSV</button>--}}
{{--                                    </form>--}}
{{--                                </div>--}}

                        </center><br />
                    </div>
                    <div class="panel-body">
                        <div class="container-fluid col-md-12" style="margin-top: 10px; margin-bottom: 20px;">
                            <table id="specify_period_table" class="container-fluid col-md-12 table table-responsive table-bordered table-striped">
{{--                                <thead class="" style="background:#000; color: white;">--}}
                                <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="result"></div>
@endsection

@push('scripts')
<script src="{{ elixir('js/datatables.js') }}"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
<script>
    $( document ).ready(function() {
        // $('#dataTableBuilder')
        // .on('preXhr.dt', function ( e, settings, data ) {
        //     data.from_date= $('input[name=from_date]').val();
        //     data.to_date= $('input[name=to_date]').val();
        // });
        //
        // $('#submit').click(function () {
        //     $('#dataTableBuilder').DataTable().ajax.reload();
        // })
        //
        //
        // $('#excel').click(function (){
        //     var to_date = $('#to_date').val();
        //     var from_date = $('#from_date').val();
        //
        //     if(to_date !='' && from_date != ''){
        //         var input1 = $("<input>").attr("type", "hidden").attr("name", "to_date").val(to_date);
        //         var input2 = $("<input>").attr("type", "hidden").attr("name", "from_date").val(from_date);
        //
        //         $('#excel_form').append(input1);
        //         $('#excel_form').append(input2);
        //
        //         $('#excel_form').submit();
        //     }
        // });
        //
        // $('#csv').click(function (){
        //     var to_date = $('#to_date').val();
        //     var from_date = $('#from_date').val();
        //
        //     if(to_date !='' && from_date != ''){
        //         var input1 = $("<input>").attr("type", "hidden").attr("name", "to_date").val(to_date);
        //         var input2 = $("<input>").attr("type", "hidden").attr("name", "from_date").val(from_date);
        //
        //         $('#csv_form').append(input1);
        //         $('#csv_form').append(input2);
        //
        //         $('#csv_form').submit();
        //     }
        // });

//        $.fn.datepicker.defaults.format = "dd-M-yyyy";

//        $('#from_date').datepicker({
//            format: "dd-M-yyyy",
//            clearBtn: true,
//            autoclose: true
//        });

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

</script>
<script>
    // setInterval(function(){ $('#specify_period_table').DataTable().ajax.reload(); }, 5000);
    {{--setInterval(function(){ $('#specify_period_table').load("{{ route('report_get_specify_period') }}"); }, 30000);--}}
</script>
@endpush