{{-- 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 class="col-lg-6 p-0">
            <div class="row">
                <form method="POST" action="{{ url('members') }}" class="w-100 mb-3">
                    @csrf
                    <input type="hidden" name="page" value="{{ $page }}">
                    <div class="form-group row m-0">
                        <div class="col-6 d-flex flex-wrap">
                            <input type="text" class="form-control @error('username') is-invalid @enderror" id="username" name="username" autocomplete="off" placeholder="User Name" required>
                        </div>
                        <div class="col-3">
                            <button type="submit" class="btn btn-primary">Create New</button>
                        </div>
                        
                    </div>
                </form>
                <form method="POST" action="{{ url('tickets') }}" class="w-100">
                    @csrf
                    <input type="hidden" name="page" value="{{ $page }}">
                    <div class="form-group row m-0">
                        <div class="col-6 d-flex flex-wrap">
                            <select class="form-control selectpicker" data-size="7" data-live-search="true" name="idmember" required>
                                <option value="">Select Member</option>
                                @foreach($members as $mbr)
                                    <option value="{{$mbr->idmember}}">{{$mbr->username}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <button type="submit" class="btn btn-primary">Generate New Ticket</button>
                        </div>
                        
                    </div>
                </form>
            </div>
        </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 Members..">
            </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">
            <button onclick="addData('import')" class="btn btn-primary mx-1 mb-2" id="bulk"><i class="fa fa-file-import"></i> Import</button>
            <form method="POST" action="{{ route('ticket-export') }}">
                @csrf
                <button type="submit" class="btn btn-primary mx-1 mb-2" id="bulk"><i class="fa fa-file-export"></i> Export</button>
            </form>
        </div>
        
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table id="myTable" class="table table-light-secondary table-striped table-hover nowrap" style="width:100%">
            <thead>
            <tr>
                <th>No</th>
                <th>Username</th>
                <th>Ticket</th>
                <th>Fixed Reward</th>
                <th>Spin Date</th>
                <th>Nomer whatsapp</th>
                <th>Status</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                <th>No</th>
                <th>Username</th>
                <th>Ticket</th>
                <th>Fixed Reward</th>
                <th>Spin Date</th>
                <th>Nomer whatsapp</th>
                <th>Status</th>
                <th>Options</th>
                </tr>
            </tfoot>
        </table>
        <!--end: Datatable-->
    </div>
</div>
<div class="my-5">
{!! Helper::getActivity(16) !!}
</div>
@endsection

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

{{-- Scripts Section --}}
@section('scripts')
<script type="text/javascript">
function getData(query=null) {
    console.log('{!! url("tickets/show?qr='+query+'") !!}')
    var table = $("#myTable").DataTable({
        processing: true,
        serverSide: true,
        cache: false,
        destroy: true,
        autoWidth: false,
        lengthMenu: [
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        ajax: '{!! url("tickets/show?qr='+query+'") !!}',
        columns: [
            { data: 'no'},
            { data: 'username'},
            { data: 'number_ticket'},
            { data: 'fixed_reward'},
            { data: 'spin_date'},
            { data: 'number'},
            { data: 'status'},
            { data: 'idticket'} 
        ],
        columnDefs: [{
            targets: [6],
            data: 'status',
            mRender: function(data, type, full) {
                if(data=='active'){
                    return '<span class="label label-lg font-weight-bold label-light-success label-inline">Unused</span>';
                }else {
                    return '<span class="label label-lg font-weight-bold label-light-muted label-inline">Used</span>';
                }
            }
        },{
            targets: [7],
            mRender: function(data, type, row) {
                return "<center><div class='btn-group-xs' role='group'><a class='btn btn-lg btn-success btn-icon' target='_blank' href='https://api.whatsapp.com/send?phone="+ row['number'] +"&text=Halo%20Bosku%20%2C%20Selamat%20Bosku%20dapat%20free%20Ticket%20Lucky%20Spin%20dari%20JACKTOTO%0A%0AUsername%20%3A"+ row['username']+"%0ATiket%20%3A" + row['number_ticket']+"%0A%0ASilahkan%20bosku%20kunjungi%20https%3A%2F%2Fjacktotospin.com/%20SPIN%20dan%20menangkan%20hadiahnya!%0A%0AJangan%20lupa%20tingkatkan%20terus%20TO%20nya%20Bosku%2C%20Salam%20JP!'><i class='la la-whatsapp'></i></a><a class='btn btn-sm btn-clean btn-icon' onclick='editData(\"" + data + "\")'><i class='la la-edit'></i></a><a class='btn btn-sm btn-clean btn-icon' onclick='delData(\"" + data + "\")'><i class='la la-trash'></i></a></div></center>";
            }
        }], 
        'select': {
            'style': 'os'
        },
        'order': [0, 'asc']
    });
}
function addData(title){
    $.ajax({
        url: '{{ url("tickets/create") }}',
        error: function() {
            alert('Error!');
        },
        success: function(data) {
            $("#formView"+title).html(data);
        }
    });
    var dtevent = $('<div class="modal fade" id="myWindow'+title+'" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">'+title+'</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body"><form method="POST" action="{{ url('/') }}/tickets-'+title+'" id="formView'+title+'" enctype="multipart/form-data"></form></div></div></div></div>');
    $("body").append(dtevent);
    $("#myWindow"+title).modal({
        show: true
    });
}
function editData(id){
    $.ajax({
        type: "GET",
        url: "{{ url('tickets/') }}/"+id+"/edit",
        error: function() {
            alert("Error!");
        },
        success: function(data) {
            $("#formView"+id).html(data);
        }
    });
    var editData = '<div class="modal fade" id="myWindow'+id+'" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Edit {{ $page_title }}</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body" id="formView'+id+'"></div></div></div></div>';
    $("body").append(editData);
    $("#myWindow"+id).modal({
        show: true
    });
}
function delData(id){
    //alert(id);
    var Dtable = $("#myTable").DataTable();
    Swal.fire({
        title: "Are you sure?",
        text: "You want be delete this record!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes, delete it!"
    }).then(function(result) {
        if (result.value) {
            $.ajax({
                type: "DELETE",
                url: "{{ url('tickets/') }}/"+id,
                data: {
                    '_token': $('input[name=_token]').val()
                },
                cache: false,
                success: function(data) {
                    Swal.fire(
                        "Deleted!",
                        "Your file has been deleted.",
                        "success"
                    )
                    Dtable.row('.selected').remove().draw(false);
                    // window.location.href="{{ url('user') }}";
                }
            });
        }
    });
}
$(function(){
    getData();
    setTimeout(function(){ $('.alert').hide() }, 5000);
});
$(document).ready(function(){
    getData();
    $('#filter').click(function(){
        var query = $('#query').val();
        if (query != ''){
            getData(query);
        }else{
            getData();
        }

    });
    $("#query").keydown(function(event) {
        var keypressed = event.keyCode || event.which;
        if (keypressed == 13) {
            var query = $('#query').val();
            getData(query);
        }
    });
});
</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