@extends('admin.layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Users</h4> </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="active">Users</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box">
                <div class="row">
                    <div class="col-md-6 col-xs-12">
                        <h3 class="box-title m-b-0">User Management</h3>
                        <p class="text-muted m-b-30">List of Users</p>
                    </div>
                    @if(check_route_access('user.add.form'))
                    <div class="col-md-6 col-xs-12">
                        <div class="pull-right">
                            <a href="{{ route('user.add.form') }}" class="btn btn-block btn-info">Add New User</a>
                        </div>
                    </div>     
                   @endif
                </div>
                <div class="row alert alert-danger" id="error_message" style="display: none;">
                            
                </div>
                <div class="white-box well">
                    <form id="document_filter" method="post">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="form-group col-md-4 col-xs-12">
                                <label>EV Name</label>
                                <input type="text" name="ev_name" id="ev_name" placeholder="Enter EV Name" value="{{Session::get('users_data.ev_name')}}" class="form-control">
                            </div>
                            <div class="form-group col-md-4 col-xs-12">
                                <label>Email</label>
                                <input type="text" name="email" id="email" placeholder="Enter Email" value="{{Session::get('users_data.email_ev')}}" class="form-control">
                            </div>
                            <div class="form-group col-md-4 col-xs-12">
                                <label>Program</label>
                                <select name="program" id="program" class="form-control">
                                    <option value="">-- Select Program --</option>
                                        @foreach($programs as $value)
                                            <option value="{{ $value->id }}" {{is_selected(Session::get('users_data.program'),$value->id)}} >
						@php
						$program_name = str_replace("&ndash;",  "-" , $value->program_name);
						
						@endphp
						{{ $program_name }}
					    </option>                                                                     
                                        @endforeach
                                    <option value="not_assigned" {{is_selected(Session::get('users_data.program'),'not_assigned')}}>Program does not assigned yet</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                  <button type="button" id="submitBtn" class="btn btn-info" onclick="getRecords()">Search</button>
                                  <a type="button" class="btn btn-danger" href="{{ route('reset.table',['user.list','users_data']) }}">Reset</a>
                            </div>
                        </div>
                    </form>
                </div>
                @include('admin.includes.status')
                <div class="table-responsive">
                    <table id="user_list" class="table table-bordered m-t-10">
                        <thead>
                            <tr>
                            @if($admin_role == 'root')
                                <td width="5%">User ID</td>
                            @endif
                            <td width="10%">Portfolio Number</td>
                            <td width="20%">EV Details</td>
                            <td width="20%">Program</td>
                            <td width="10%">{{ __('application_term.app_name') }} Status</td>
                            <td width="5%">Invitation Status</td>
                            <td width="5%">Status</td>
                            <td width="20%">Action</td>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div> 
@endsection
@section('scripts')
<script type="text/javascript">
    function syncEVDetail(user_id,action){
        showLoader("#full-overlay");
        confirmAlert("On confirm EV will be sync with ITN.","warning","Are you sure?","Confirm",function(r,i){
            if(i){
                 var url = "{{ route('sync.user.detail') }}"; 
                    $.ajax({
                        url: url,
                        type: 'post',
                        data: { 'user_id':user_id ,'action':action},
                        dataType: 'json',
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        success: function(response){
                            if(response.type == "success"){
                                var Html = '<div class="alert swl-alert-success"><ul><li>'+response.message+'</li></ul></div>'; 
                                notifyResponseTimerAlert(Html,"success","Success");
                            }
                            else{
                                var Html = '<div class="alert swl-alert-danger"><ul><li>'+response.message+'</li></ul></div>'; 
                                notifyResponseTimerAlert(Html,"success","Success"); 
                            }
                            hideLoader("#full-overlay");
                        },
                    });
            }
            else{
                hideLoader("#full-overlay");
            }
        });
    }
    
    function syncEVDetailwithEmail(user_id){
        showLoader("#full-overlay");
        confirmAlert("On confirm EV will be sync with ITN.","warning","Are you sure?","Confirm",function(r,i){
            if(i){
                 var url = "{{ route('sync.user.detail.email') }}"; 
                    $.ajax({
                        url: url,
                        type: 'post',
                        data: { 'user_id':user_id},
                        dataType: 'json',
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        success: function(response){
                            if(response.type == "success"){
                                var Html = '<div class="alert swl-alert-success"><ul><li>'+response.message+'</li></ul></div>'; 
                                notifyResponseTimerAlert(Html,"success","Success");
                            }
                            else{
                                var Html = '<div class="alert swl-alert-danger"><ul><li>'+response.message+'</li></ul></div>'; 
                                notifyResponseTimerAlert(Html,"error","error"); 
                            }
                            hideLoader("#full-overlay");
                        },
                    });
            }
            else{
                hideLoader("#full-overlay");
            }
        });
    }
    
    function update_user_status(obj,ID){
        var value = 0;
        if(obj.checked) {
            value = 1;
        } 
        $.ajax({
            type: 'post',
            url: '{{route("user.ajax")}}',
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            data:  { 
                value: value,
                id: ID, 
                action: 'update_user_status'
            },
            success: function(response) { 
                /* Success */
            }
        });
    }
    $("document").ready(function(){
        var ev_name = $("#ev_name").val();
        var email = $("#email").val();
        var program = $("#program").val();

        if(ev_name != '' || email != '' || program != ''){
            getRecords();
        }else{
            init_datatable();
        }
    });
    
    function init_datatable(ev_name = '', email = '', program = ''){
        if(ev_name != '' || email != '' || program != ''){
            $('#submitBtn').prop('disabled', true);
            $('#user_list').dataTable({
                    "serverSide": true,
                    "processing": false,
                    "bDestroy": true,
                    "destroy": true,
                    "autoWidth": false,
                    "ajax": {
                        url: "{{route('user.list')}}",
                        type: "GET",
                       "cache": false,
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                        "contentType": "application/json; charset=utf-8",
                        data: {
                            ev_name: ev_name,
                            email: email,
                            program: program
                        },
                        error: function (xhr, error, code) {
                            console.log(code, xhr)
                        }
                    },
                       
                    "fnDrawCallback": function( oSettings ) {
                        hideLoader("#full-overlay");
                        $('[data-toggle="tooltip"]').tooltip();
                        load_status_button();
                        $('#submitBtn').prop('disabled', false);
                    },
                    "columns": [
                        @if($admin_role == 'root')
                            { data: 'id' },
                        @endif
                        { data: 'portfolio_number' },
                        { data: 'full_name' },
                        { data: 'program_name' },
                        { data: 'status_name' },
                        { data: 'invitation_status' },
                        { data: 'status' },
                        { data: 'action' }
                    ]
            });
        }else{
            $('#user_list').dataTable();
        }
    }
    function load_status_button(){
        var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
        $('.js-switch').each(function() {
            new Switchery($(this)[0], $(this).data());
    });
    }
    $(document).on('click','.syncdetail', function() {
       var userId = $(this).data("id");
       return syncEVDetail(userId,'sync_ev');
    });
        
    function getRecords(){
        var ev_name = $("#ev_name").val();
        var email = $("#email").val();
        var program = $("#program").val();
        if(ev_name != '' || email != '' || program != ''){
            $("#error_message").css('display','none');
            showLoader("#full-overlay");
            init_datatable(ev_name,email,program);
            
        }else{
            $("#error_message").css('display','block');
            $("#error_message").html('Please Select Minimum One Filter.');
        }
    }
    $('#user_list').on('page.dt', function(){
       showLoader("#full-overlay");
    });
</script>
@endsection