@extends('layouts.admin')

    @push('styles')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('storage/css/datatable/datatables.min.css') }}">
    <style type="text/css">
    select{
        border: 1px solid #ddd !important;
        background: transparent !important;
    }
    input[type='search']{
        border: 1px solid #ddd !important;
        background: transparent !important;
    }    
    </style>
    @endpush

    @push('scripts')

    <!-- DataTables -->
    <script src="{{ asset('storage/js/datatable/datatables.min.js') }}"></script>

    <script>
    $(function () {

        setTimeout(function() { 
            $("#alert_message").hide('slow');
        }, 2500);

        $('#clients').DataTable({
            ajax: {
                url: "{{ action('Admin\AdminUserController@dataTable') }}",
                type: "POST",
                data: {
                    _token:  $('meta[name="csrf-token"]').attr('content')
                }
            },
            pageLength: 10,
            processing: true,
            lengthMenu: [10,25,50,100,250,500] ,
            columns: [
                { data: "name", width: '20%' },
                { data: "email", width: '20%' },
                { data: "phone", width: '15%' },
                {
                    data: "actions",
                    orderable: false,
                    width: '45%',
                    render: function (data, type, row ) {
                      return '<a href="' + data.edit_link + '" class="btn btn-flat btn-warning">' +
                      '<span class="fa fa-pencil"></span>&nbsp;<span>Edit</span></a>&nbsp;' +
                      '<a href="' + data.delete_link + '" class="btn btn-flat btn-danger del-resource">' +
                      '<span class="fa fa-trash-o"></span>&nbsp;<span>Delete</span></a>&nbsp;'+

                      '<a data-toggle="tooltip" title="Time Log" href="' + data.timelog + '" class="btn btn-flat btn-primary">' +
                      '<span class="fa fa-clock-o"></span>&nbsp;<span></span></a>&nbsp;'+
                      '<a href="' + data.spectate_link + '" class="btn btn-flat btn-success">' +
                      '<span class="fa fa-eye"></span>&nbsp;<span>Spectate</span></a>&nbsp;';
                    }
                },
            ],
            "bDestroy": true
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(".table").on("click", ".del-resource", function (e) {
            e.preventDefault();
            let href = $(this).attr("href");
            let response = confirm("Are you sure?");
            if (response) {
                $.ajax({
                    url: href,
                    type: 'DELETE',
                    success: function (data) {
                        location.reload();
                    },
                    error: function (res) {
                        alert('Some error occured! Please try after some time');
                    }
                });
            }
        });
    });
    </script>

    @endpush

@section('content')
    
    @if(session()->has('message'))  
      <div class="col-12 alert alert-success text-center mt-1" id="alert_message">{{ session()->get('message') }}</div>   
    @endif


                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <!-- Row -->
                <div class="col text-right mb-2">
                    <a href="{{url('admin/user/create')}}" class="btn btn-primary">Create User</a>
                </div>
                <div class="card card-default">
                <div class="card-body collapse show custom-card-bg">
                        
                    <table id="clients" class="table table-striped table-bordered zero-configuration">
                      <thead>
                        <tr>
                          <th>Name</th>
                          <th>Email</th>
                          <th>Phone</th>
                          <th>Options</th>
                        </tr>
                      </thead>
                      <tbody></tbody>
                    </table>

                    </div>
                </div>
                <!-- Row -->
                
                
                <!-- Row -->
                
                <!-- Row -->
                <!-- Row -->
                
                <!-- Row -->
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->


@endsection