@extends('layouts.app')

@section('title', 'Users - NGBVD')

@section('content')
<div class="ngbvd-page-header mb-3">
    <div>
        <h2 class="ngbvd-page-title">User Management</h2>
        <p class="ngbvd-page-subtitle">Manage system users, roles, districts and account status.</p>
    </div>
    <a href="{{ url('/users/index') }}" class="btn ngbvd-btn-primary"><i class="ti-plus"></i> Add User</a>
</div>

<div class="card ngbvd-table-card">
    <div class="card-block">
        <div class="table-responsive">
            <table class="table table-hover ngbvd-modern-table" data-datatable="true">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Username</th>
                        <th>Role</th>
                        <th>District(s)</th>
                        <th>Partner</th>
                        <th>Status</th>
                        <th class="text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                    <tr>
                        <td><strong>{{ $user->name }}</strong><br><small class="text-muted">{{ $user->email }}</small></td>
                        <td>{{ $user->username }}</td>
                        <td><span class="ngbvd-badge ngbvd-badge-muted">{{ $user->userrole }}</span></td>
                        <td>{{ $user->districtname ?: 'All / Not restricted' }}</td>
                        <td>{!! $user->partner == '1' ? '<span class="ngbvd-badge ngbvd-badge-success">Yes</span>' : '<span class="ngbvd-badge ngbvd-badge-muted">No</span>' !!}</td>
                        <td>{!! $user->status == 1 ? '<span class="ngbvd-badge ngbvd-badge-success">Active</span>' : '<span class="ngbvd-badge ngbvd-badge-danger">Locked</span>' !!}</td>
                        <td class="text-right">
                            <a href="/users/index?id={{ $user->id }}" class="ngbvd-action-btn"><i class="ti-pencil"></i> Edit</a>
                            <button type="button" class="ngbvd-action-btn ngbvd-action-btn-soft open-AddBookDialog" data-toggle="modal" data-target="#passwordModal" data-id="{{ base64_encode($user->id) }}"><i class="ti-key"></i> Password</button>
                            @if($user->status == 1)
                                <a href="/users/changestatus/{{ encrypt($user->id) }}/{{ encrypt('0') }}" data-confirm-action="true" data-confirm-message="Lock this account? The user will no longer be able to sign in." class="ngbvd-action-btn ngbvd-action-btn-danger"><i class="ti-lock"></i> Lock</a>
                            @else
                                <a href="/users/changestatus/{{ encrypt($user->id) }}/{{ encrypt('1') }}" data-confirm-action="true" data-confirm-message="Unlock this account? The user will be able to sign in again." class="ngbvd-action-btn ngbvd-action-btn-success"><i class="ti-unlock"></i> Unlock</a>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content ngbvd-modal-content">
      <div class="modal-header"><h5 class="modal-title">Change User Password</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div>
      <form method="POST" action="{{ url('users/updatepassword') }}">@csrf
        <div class="modal-body">
            <input type="hidden" name="userid" id="userid" value="">
            <div class="form-group"><label>User Email</label><input id="username" type="text" readonly class="form-control" name="username"></div>
            <div class="form-group"><label>New Password</label><input id="Password" type="password" class="form-control" name="password" required></div>
            <div class="form-group"><label>Confirm Password</label><input id="ConfirmPassword" type="password" class="form-control" name="cpassword" required><small id="msg"></small></div>
        </div>
        <div class="modal-footer"><button type="button" class="btn ngbvd-btn-soft" data-dismiss="modal">Cancel</button><button type="submit" class="btn ngbvd-btn-primary">Update Password</button></div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
$(document).on("click", ".open-AddBookDialog", function () {
    var userId = $(this).data('id');
    $("#userid").val(userId);
    $.get("{{ route('/usercredentials') }}", {'id': userId}, function(data){
        if (data && data.length) { $("#username").val(data[0].email); }
    });
});
$(document).on('keyup', '#ConfirmPassword, #Password', function(){
    $('#msg').text($('#Password').val() !== $('#ConfirmPassword').val() ? 'Passwords do not match' : 'Passwords match')
        .css('color', $('#Password').val() !== $('#ConfirmPassword').val() ? '#dc2626' : '#16a34a');
});
</script>
@endpush