{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')
<div class="card card-custom">
    @if($errors->any())
    <div class="alert alert-custom alert-notice alert-light-danger fade show mb-5" role="alert">
        <div class="alert-icon">
            <i class="flaticon-warning"></i>
        </div>
        <div class="alert-text">{{ implode('', $errors->all(':message')) }}</div>
        <div class="alert-close">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                    <i class="ki ki-close"></i>
                </span>
            </button>
        </div>
    </div>  
    @endif
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        {{-- <div class="card-title">
            <h3 class="card-label">{{ $page_title }} Table
                <div class="text-muted pt-2 font-size-sm">{{ $page_description }}</div>
            </h3>
        </div> --}}
        <div id="filterForm">
            <div class="form-inline mb-1">
                <div class="form-group mr-5 mb-2">
                    <label for="gender" class="control-label">Date Range</label>
                </div>
                <div class="form-group mx-sm-1 mb-2">
                    <div class="input-group date">
                        <input type="text" class="form-control datepicker" placeholder="Date From" id="dtfrom" autocomplete="off">
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="la la-calendar"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group mx-sm-1 mb-2">
                    <div class="input-group date">
                        <input type="text" class="form-control datepicker" placeholder="Date To" id="dtto" autocomplete="off">
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="la la-calendar"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-primary mx-1 mb-2" id="filter"><i class="fa fa-filter"></i> Filter</button>
            </div>
            <div class="form-inline">
                <div class="form-group mr-5 mb-2">
                    <label for="gender" class="control-label">Filter Data</label>
                </div>
                <div class="form-group mx-1 mb-2">
                    <input type="text" class="form-control" id="query" placeholder="Search Keyword..">
                </div>
                <div class="btn-group mx-sm-1 mb-2">
                    <button type="button" class="btn btn-light-primary" id="pDate" onclick="plusDate(0)">+</button>
                    <button type="button" class="btn btn-light-primary" id="mDate" onclick="minDate(0)">-</button>
                    <button type="button" class="btn btn-light-primary" onclick="getData({{ Helper::quickFilter('today') }}, '', '', '')">Today</button>
                    <button type="button" class="btn btn-light-primary" onclick="getData({{ Helper::quickFilter('yesterday') }},'', '', '')">Yesterday</button>
                    <button type="button" class="btn btn-light-primary" onclick="getData({{ Helper::quickFilter('thisweek') }}, '', '', '')">This Week</button>
                    <button type="button" class="btn btn-light-primary" onclick="getData({{ Helper::quickFilter('thismonth') }}, '', '', '')">This Month</button>
                    <button type="button" class="btn btn-light-primary" onclick="getData({{ Helper::quickFilter('lastmonth') }}, '', '' ,'')">Last Month</button>
                </div>
            </div>
        </div>
       
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table id="myTable" class="table table-light-secondary table-striped table-hover table-checkable nowrap">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Spin ID</th>
                    <th>Username</th>
                    <th>Ticket Code</th>
                    <th>Spin Date</th>
                    <th>Reward Name</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <th>No</th>
                    <th>Spin ID</th>
                    <th>Username</th>
                    <th>Ticket Code</th>
                    <th>Spin Date</th>
                    <th>Reward Name</th>
                </tr>
            </tfoot>
        </table>
        <!--end: Datatable-->
    </div>
</div>
<div class="my-5">
{!! Helper::getActivity(2) !!}
</div>
@endsection

{{-- Styles Section --}}
@section('styles')
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script type="text/javascript">
function print(data){
    console.log(data)
}
function getData(dtfrom=null, dtto=null, query=null, type=null, branch=null) {
    $("#dtfrom").val(dtfrom);
    $("#dtto").val(dtto);
    console.log('{!! url("history/show?&df='+dtfrom+'&dt='+dtto+'&qr='+query+'&tp='+type+'") !!}');
    var table = $("#myTable").DataTable({
        processing: true,
        serverSide: true,
        cache: false,
        destroy: true,
        scrollY: !0,
        scrollX:!0,
        scrollCollapse:!0,
        lengthMenu: [
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        ajax: '{!! url("history/show?&df='+dtfrom+'&dt='+dtto+'&qr='+query+'&tp='+type+'") !!}',
        columns: [
            { data: 'no'},
            { data: 'idspin'},
            { data: 'username'},
            { data: 'number_ticket'},
            { data: 'spin_date'},
            { data: 'name'}
        ],
        'select': {
            'style': 'os'
        },
        'order': [0, 'asc']
    });
}
function plusDate(no) {
    var now = $("#dtto").val();
    if (now == "") {
        alert("Sorry, Please Select Date First!");
    } else {
        var pdate = 1;
        var today = moment(now);
        var tomorrow = moment(today).add(pdate, 'day');
        var fdate = tomorrow.format("YYYY-MM-DD");
        $('#pDate').attr("onclick", "plusDate(" + pdate + ")");
        $("#dtfrom").val(fdate);
        $("#dtto").val(fdate);
        getData(fdate, fdate,'', '', '');
    }
}

function minDate(no) {
    var now = $("#dtto").val();
    if (now == "") {
        alert("Sorry, Please Select Date First!");
    } else {
        var pdate = -1;
        var today = moment(now);
        var tomorrow = moment(today).add(pdate, 'day');
        var fdate = tomorrow.format("YYYY-MM-DD");
        $('#mDate').attr("onclick", "minDate(" + pdate + ")");
        $("#dtfrom").val(fdate);
        $("#dtto").val(fdate);
        getData(fdate, fdate,'', '', '');
    }
}
$(document).ready(function(){
    getData();
    setTimeout(function(){ $('.alert').hide() }, 5000);

    $("#dtfrom").datepicker({
        autoclose: true,
        todayHighlight: true,
        format: "yyyy-mm-dd",
    }).on('changeDate', function(selected) {
        var startDate = new Date(selected.date.valueOf());
        $('#dtto').datepicker('setStartDate', startDate);
    }).on('clearDate', function(selected) {
        $('#dtto').datepicker('setStartDate', null);
    });

    $("#dtto").datepicker({
        autoclose: true,
        todayHighlight: true,
        format: "yyyy-mm-dd",
    }).on('changeDate', function(selected) {
        var endDate = new Date(selected.date.valueOf());
        $('#dtfrom').datepicker('setEndDate', endDate);
    }).on('clearDate', function(selected) {
        $('#dtfrom').datepicker('setEndDate', null);
    });

    $('#filter').click(function(){
        var dtfrom = $('#dtfrom').val();
        var dtto = $('#dtto').val();
        var query = $('#query').val();
        var type = $('#typetrc').val();
        var branch = $('#idbranch').val();
        getData(dtfrom, dtto, query, type, branch);
    });

    $("#query").keydown(function(event) {
        var keypressed = event.keyCode || event.which;
        if (keypressed == 13) {
            var dtfrom = $('#dtfrom').val();
            var dtto = $('#dtto').val();
            var query = $('#query').val();
            var type = $('#typetrc').val();
            var branch = $('#idbranch').val();
            getData(dtfrom, dtto, query, type, branch);
        }
    });

});
</script>
{{-- <script src="{{ asset('js/pages/features/miscellaneous/sweetalert2.js') }}"></script> --}}
{{-- <script src="{{ asset('js/pages/crud/ktdatatable/base/html-table.js') }}" type="text/javascript"></script> --}}
@endsection