@extends ('backend.layouts.app')

@section('title') {{ $module_action }} {{ $module_title }} @endsection

@section('page-header')
<div class="content-header row">
	<div class="content-header-left col-md-6 col-12 mb-2">
		<h3 class="content-header-title mb-0">@lang('labels.backend.users.index.title')</h3>
		<div class="row breadcrumbs-top">
			<div class="breadcrumb-wrapper col-12">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="index.html">@lang('labels.home')</a>
					</li>
					<li class="breadcrumb-item"><a href="#">@lang('labels.backend.users.index.title')</a>
					</li>
					<li class="breadcrumb-item active">@lang('labels.backend.users.index.action')
					</li>
				</ol>
			</div>
		</div>
	</div>
	<div class="content-header-right text-md-right col-md-6 col-12">
		<div class="form-group">
			<x-buttons.create route='{{ route("backend.$module_name.create") }}' title='labels.backend.users.create.action'/>
			<div class="btn-group mr-1 mb-1">
				<button type="button" class="btn btn-light btn-icon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-plug"></i></button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="{{ route("backend.$module_name.trashed") }}">@lang('labels.view-deleted')</a>
				</div>
			</div>
		</div>
	</div>
</div>
@stop


@section('content')

                <div class="card">
                    <div class="card-body">
                        @include("backend.includes.flash")
                        <div id="app-invoice-wrapper" class="">
							<table id="datatable" class="table table-striped table-bordered base-style dataTable" style="width: 100%;">
                                <thead class="border-bottom border-dark">
                                    <tr>
										<th>#</th>
										<th>{{ __('labels.backend.users.fields.name') }}</th>
										<th>{{ __('labels.backend.users.fields.email') }}</th>
										<th>{{ __('labels.backend.users.fields.status') }}</th>
										<th>{{ __('labels.backend.users.fields.roles') }}</th>
										<th>{{ __('labels.backend.users.fields.district') }}</th>
										<th class="text-right">{{ __('labels.backend.action') }}</th>
								</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			<div class="sidenav-overlay"></div>
			<div class="drag-target"></div>
@stop



@push ('vendor-css')
    <link rel="stylesheet" type="text/css" href="{{asset('stack/app-assets/vendors/css/vendors.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{asset('stack/app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
@endpush

@push ('page-css')
    <link rel="stylesheet" type="text/css" href="{{asset('stack/app-assets/css/pages/app-invoice.css') }}">
@endpush

@push ('vendor-scripts')
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset('stack/app-assets/vendors/js/tables/datatable/datatables.min.js') }}"></script>
    <script src="{{asset('stack/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
    <script src="{{asset('stack/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{asset('stack/app-assets/vendors/js/tables/datatable/dataTables.bootstrap4.min.js') }}"></script>
    <!-- END: Page Vendor JS-->
@endpush

@push ('page-scripts')
    <script src="{{asset('stack/app-assets/js/scripts/pages/app-invoice.js') }}"></script>
	<script type="text/javascript">

    $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: true,
        responsive: true,
        ajax: '{{ route("backend.$module_name.index_data") }}',
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name',
				fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
					$(nTd).html("<a href='users/"+oData.id+"'>"+oData.name+"</a>");
				}},
            {data: 'email', name: 'email'},
            {data: 'status', name: 'status'},
            {data: 'user_roles', name: 'user_roles'},
            {data: 'district', name: 'district_id'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });

    function blockUsn($id){
        var form = document.getElementById("block-usn-"+$id);
        if(confirm('Are You Sure ?')){
            form.submit();
        }else{
            return;
        }
    }

    function unBlockUsn($id){
        var form = document.getElementById("un-block-usn-"+$id);
        if(confirm('Are You Sure ?')){
            form.submit();
        }else{
            return;
        }
    }

    function deleteUsn($id){
        var form = document.getElementById("delete-usn-"+$id);
        if(confirm('Are You Sure ?')){
            form.submit();
        }else{
            return;
        }
    }

	</script>
@endpush