@extends('templates.structure')

@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                {{-- <div class="card-header">
                    <h3 class="card-title">Data Table With Full Features</h3>
                </div> --}}
                <!-- /.card-header -->
                <div class="card-body">                    
                    <table id="example1" class="table table-hover table-responsive" style="width:100%">
                        <thead>
                            <tr>
                                <th></th>                                
                                <th>Event Category</th>
                                <th>Event Name</th>
                                <th>Address</th>
                                <th>City</th>
                                <th>Event Datetime</th>
                                <th>Created by</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>                
            </div>
        </div>
    </div>
    <!-- /.row -->

@endsection

@section('custom_js')
<!-- DataTables -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/ckeditor/ckeditor.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
var table = $('#example1').DataTable({
    "scrollX": true,
    "processing": true,
    "serverSide": true,
    "ajax": '{{route("event.datatable")}}',
    
    "columns": [
            { "name": "op.event_date_time", "data": "event_date_time", "searchable": false },            
            { "name": "unity_event_categories.category_name", "data": "category_name" },
            { "name": "op.eventName", "data": "eventName" },
            { "name": "op.address", "data": "address" },
            { "name": "op.city", "data": "city" },
            { "name": "op.event_date_time", "data": "event_date_time" },
            { "data": null, "orderable": false, "searchable": false},            
            { "data": null, "orderable": false, "searchable": false },
        ],
    "order" :[[ 0, 'desc' ]],
    "columnDefs": [ {
        "targets": -1,
        "data": "action",
        "render": function ( data, type, row, meta ) {
            var route = "{{url()->full()}}/"+data.id
            var action = '<div class="btn-group float-right" role="group" aria-label="Basic example">';
            action += '<button class="btn btn-outline-success details-control" ><span class="fa fa-info"></span></button>&nbsp;'
            // action += '<button class="btn btn-outline-primary" onclick="show(\''+route+'\')"><span class="fa fa-pencil"></span></button>&nbsp;'
            if(data.status == "1"){
                action += '<button class="btn btn-outline-danger" onclick="disactive(\''+data.id+'\', \''+data.title+'\')"><i class="fa fa-times"></i> Deactivate</button>'
            }
            if(data.status == "0"){
                action += '<button class="btn btn-outline-info btn-act" onclick="actived(\''+data.id+'\', \''+data.title+'\')"><i class="fa fa-check"></i> Activate</button>'
            }
            if(data.status == "2"){
                action += '<button class="btn btn-outline-dark"><i class="fa fa-calendar-times-o"></i> Expired</button>'
            }
            action += '</div>'

            return action            
        }
    },
    {
        "targets": -2,
        "data": "operator_name",
        "render": function ( data, type, row, meta ) {
            return data.first_name+' '+data.last_name
        }
    },
    {
        "targets": [ 0 ],
        "visible": false,
        "searchable": false
    }  
    ],
})

function disactive(id, name){
    Swal({ title: 'Are you sure?', text: "You want to deactivate "+name+"!", type: 'warning', showCancelButton: true, confirmButtonColor:'#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, deactivate it!' }).then((result) => { if (result.value) {
        unity_operators_status_notput(id, 0, name, '{{url("event/update")}}')
    } })
}
function actived(id, name){
    Swal({ title: 'Are you sure?', text: "You want to activate "+name+"!", type: 'warning', showCancelButton:true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, activate it!' }).then((result)=> { if (result.value) {
        unity_operators_status_notput(id, 1, name, '{{url("event/update")}}')

    } })
}


</script>
@endsection

@section('addCustomInfo')
if(v.name == 'poster'){
    valuename = '<img class="img-responsive" src="{{\Config::get("thirdparty.TURBO_URL")}}/storage/app/media/events/'+valuename+'" alt="your image" style="max-height:500px;max-width:500px;width: expression(this.width > 500 ? 500: true);"/>'
}
if(v.name == 'category'){
    valuename = null
}
if(v.name == 'read_only'){
    valuename = null
}
if(v.name == 'description'){
    valuename = '<textarea id="editor_'+data.id+'" name="description" style="width: 100%;" class="form-controller">'+valuename+'</textarea>'
}
@endsection