@extends('backend.layouts.app')
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<style>
    table thead tr th{
        font-size:11px;
    }
</style>
<script>
    $('document').ready(function(){
        var table = $('#example').DataTable({
                "bLengthChange": false,
                'ordering':false,
                initComplete: function () {
                this.api().columns([1,2]).every(function () {
                    var column = this;
                    var select = $('<select class="form-control select2"><option value="">Search</option></select>')
                        .appendTo($(column.header()).empty()).on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());
                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                        });
                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>');
                    });
                });
            }
        });
        // $(".filterhead").each( function ( i ) {
        //     var select = $('<select class="select2" width="100%;"><option value="">Search</option></select>')
        //     .appendTo( $(this).empty() )
        //     .on( 'change', function () {
        //        var term = $(this).val();
        //         table.column().search(term, false, false ).draw();
        //     } );
 	    //      table.column().data().unique().sort().each( function ( d, j ) {
        //           console.log(j);
        //     	select.append( '<option value="'+d+'">'+d+'</option>' )
        //     } );
		// } );
        $('.select2').select2();
    }); 
</script>

@section('content')

<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h5 style="text-align: center"></h5>
		    <a href="{{ route('accounts') }}" style="color: #000000; border: 1px solid #eee; width: 60%; margin: 15px auto; box-shadow: 0px 0px 5px 5px #9e9c9c;">
                <i class="fa fa-home" aria-hidden="true" style="font-size: 20px; "></i>
                {{-- <img src="{{ route('accounts') }}" style="width: 20px"> --}}
                    Account Dashboard
            </a>
		<ol class="breadcrumb float-right">
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container-fluid">
	<div class="col-md-12">
		<div style="text-align: right; margin-bottom: 20px;">

        </div>
        <div class="card">
            <div class="card-header" style=" display: inline-flex; ">
                <p> <b style="font-size: 15px; "></b> </p>
            </div>
            <div class="card-body">	
                <div>
                    <div class="col-md-6" style=" margin: auto; width: 36%;">
                        <form action="{{ route('login.submit',$dep_id) }}" method="post">@csrf       
                            <h2 class="form-signin-heading">Login</h2>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>User Name </label>
                                    <input type="text" class="form-control" value="{{ old('user_name') }}" name="user_name" placeholder="User Name" autocomplete="off" required>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" class="form-control" value="{{ old('password') }}" name="password" placeholder="Password" autocomplete="off" required>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-info pull-right">Login</button>   
                        </form>
                    </div>
                </div>	
            </div>
        </div>			
	</div>
</div>
@endsection

@section('modal_content')

@endsection
@section('page_script')>
<script>
    document.onkeyup = enter;    
    function enter(e) {if (e.which == 13) submitForm();}
</script>

@endsection