@extends('layouts.app')
@section('content')
<!-- Header -->
<div class="header bg-gradient-danger pb-8 pt-5 pt-md-6">
   <div class="container-fluid">
      <div class="header-body">
         <div class="row align-items-center py-4">
            <div class="col-lg-6 col-7">
               <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                  <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                     <li class="breadcrumb-item"><a href="{{url('home')}}"><i class="fas fa-home"></i></a></li>
                     <li class="breadcrumb-item"><a href="{{url('user')}}">Users</a></li>
                     <li class="breadcrumb-item active" aria-current="page">List</li>
                  </ol>
               </nav>
            </div>
            <!-- <div class="col-lg-6 col-5 text-right">
               <a href="{{url('user/add')}}" class="btn btn-sm btn-neutral">New</a>
            </div> -->
         </div>
      </div>
   </div>
</div>
<div class="container-fluid mt--7">
<!-- Table -->
<div class="row">
   <div class="col">
      <div class="card shadow">
         <div class="card-header bg-white">
              <div class="row align-items-center">
                <div class="col-8">
                  <h4 class="mb-0">Users</h4>
                </div>
                <!-- <div class="col-4 text-right">
                  <a href="javascript:" title="Advanced Search" data-toggle="modal" data-target="#filterModal" data-whatever="@mdo" class="btn btn-primary btn-sm"><i class="fa fa-search" aria-hidden="true"></i></a>
                </div> -->
              </div>
            </div>
         <div class="table-responsive">
            @if(Session::has('message'))
            <div class="alert {{ Session::get('alert-class', 'alert-info') }}" role="alert">
                {{ Session::get('message') }}
            </div>
            @endif
            <table class="table table-hover table-bordered table-striped datatable" id="user">
               <thead class="thead-light">
                  <tr>
                     <th scope="col">S.No</th>
                     <th scope="col">User ID</th>
                     <th scope="col">Name</th>
                     <th scope="col">Email</th>
                     <th scope="col">Status</th>
                     <th scope="col">Date</th>
                     <th scope="col" class="noExport">Action</th>
                  </tr>
               </thead>              
            </table>
         </div>
      </div>
   </div>
</div>
</div>

<form name="deleteForm" id="deleteForm" method="post">
    {{ csrf_field() }} 
    <input type="hidden" name="hid_id" id="hid_id">
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog modal-confirm">
            <div class="modal-content">
                <div class="modal-header">         
                    <h4 class="modal-title">Are you sure?</h4>  
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Do you really want to delete these records? This process cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger" onclick="return fnDelete();">Delete</button>
                </div>
            </div>
        </div>
    </div>  
</form> 

<form name="resetPassForm" id="resetPassForm" method="post">
    {{ csrf_field() }} 
    <input type="hidden" name="hidid" id="hidid">
    <div id="resetPassModal" class="modal fade">
        <div class="modal-dialog modal-confirm">
            <div class="modal-content">
                <div class="modal-header">         
                    <h4 class="modal-title">Reset Password?</h4>  
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Do you want to reset password for this user?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger" onclick="return fnResetPass();">Yes</button>
                </div>
            </div>
        </div>
    </div>  
</form> 

<script type="text/javascript">
$(document).ready(function() {

    setTimeout(function() {
      $('.alert').fadeOut('slow');
    }, 3000); 

    $(".buttons-csv").addClass("btn btn-info btn-sm");

    var oTable = $('#user').DataTable({
        dom: 'lBfrtip',
        buttons: [
            {
                extend: 'csv',
                text: 'Export CSV',
                title: 'UserExport',
                exportOptions: {
                    columns: "thead th:not(.noExport)"
                }
            },
        ],
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        processing: true,
        'language': {
            'loadingRecords': '&nbsp;',
            'processing': '<img src="assets/img/loader-sm.gif">'
        }, 
        serverSide: true,
        responsive: true,
        autoWidth:false,
        order:[[5,"desc"]],
        ajax: {
            url: 'user/getdata'
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'uid', name: 'uid'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'is_activated', name: 'is_activated'},
            {data: 'created_at', name: null},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        columnDefs: [
            {
                targets: 4,
                render: function(data, type, row) {
                    if (row.is_activated==1) 
                        return '<span class="badge badge-dot"><i class="bg-success"></i> Active </span>';
                    else 
                        return '<span class="badge badge-dot mr-4"><i class="bg-danger"></i> Inactive </span>';
                 }
            }
        ]
    });
});   

var url = "";

function showDeleteModal(id)
{
    $('#deleteForm #hid_id').val(id);
}
function fnDelete() 
{
    var id = $('#deleteForm #hid_id').val();
    $('form[name=deleteForm]').attr('action',url+'/public/user/delete/'+id);
    $('form[name=deleteForm]').submit();
}

function showResetPassModal(id)
{  
    $('#hidid').val(id);
}
function fnResetPass() 
{
    var id = $('#hidid').val();
    $('form[name=resetPassForm]').attr('action',url+'/public/user/resetpass/'+id);
    $('form[name=resetPassForm]').submit();
}
</script>
@endsection