@extends('users.base')

@section('action-content')
<section class="content">
<div class="box">
<div class="container">

    <div class="d-flex justify-content-between mb-3">
        <h3>User Management</h3>
        <button class="btn btn-primary" data-toggle="modal" data-target="#addUserModal">
            <i class="fa fa-user-plus"></i> Add User
        </button>
    </div>

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Status</th>
                <th width="180">Action</th>
            </tr>
        </thead>
        <tbody>
        @foreach($users as $user)
            <tr id="userRow{{ $user->id }}">
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>

                {{-- ROLE (ENUM STRING) --}}
                <td>
                    <select class="form-control change-role" data-id="{{ $user->id }}">
                        @foreach($roles as $role)
                            <option value="{{ $role }}"
                                {{ $user->role === $role ? 'selected' : '' }}>
                                {{ ucfirst($role) }}
                            </option>
                        @endforeach
                    </select>
                </td>

                {{-- STATUS --}}
                <td>
                    <label class="switch">
                        <input type="checkbox" class="toggle-status"
                            data-id="{{ $user->id }}"
                            {{ $user->status === 'active' ? 'checked' : '' }}>
                        <span class="slider"></span>
                    </label>
                </td>

                {{-- ACTIONS --}}
                <td>
                    <button class="btn btn-sm btn-primary editUserBtn" data-id="{{ $user->id }}">
                        <i class="fa fa-edit"></i> Edit
                    </button>

                    <button class="btn btn-sm btn-info resetPasswordBtn" data-id="{{ $user->id }}">
                        <i class="fa fa-refresh"></i> Reset Password
                    </button>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    {{ $users->links() }}

</div>
</div>

{{-- ADD USER MODAL --}}
<div class="modal fade" id="addUserModal">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('users.store') }}" class="modal-content">
            @csrf
            <div class="modal-header"><h5>Add New User</h5></div>
            <div class="modal-body">
                <input name="name" class="form-control mb-2" placeholder="Full Name" required>
                <input name="email" type="email" class="form-control mb-2" placeholder="Email" required>
                <input name="password" type="password" class="form-control mb-2" placeholder="Password" required>

               <select name="role" class="form-control" required>
    <option value="">Select Role</option>
    @foreach(['admin','teller','manager','loan_officer','client'] as $role)
        <option value="{{ $role }}">{{ ucfirst($role) }}</option>
    @endforeach
</select>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success">Create</button>
            </div>
        </form>
    </div>
</div>

{{-- EDIT USER MODAL --}}
<div class="modal fade" id="editUserModal">
    <div class="modal-dialog">
        <form method="POST" id="editUserForm" class="modal-content">
            @csrf
            @method('PUT')
            <div class="modal-header"><h5>Edit User</h5></div>
            <div class="modal-body">
                <input name="name" id="editName" class="form-control mb-2" required>
                <input name="email" id="editEmail" type="email" class="form-control mb-2" required>

                <select name="role" id="editRole" class="form-control" required>
                    <option value="">Select Role</option>
                    @foreach($roles as $role)
                        <option value="{{ $role }}">{{ ucfirst($role) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success">Update</button>
            </div>
        </form>
    </div>
</div>

</section>

{{-- JS --}}
<script>
$(document).ready(function(){

    /* UPDATE ROLE */
    $(document).on('change','.change-role',function(){
        let id = $(this).data('id');
        let role = $(this).val();

        $.post("/users/"+id+"/update-role",{
            role: role,
            _token: "{{ csrf_token() }}"
        }, function(res){
            Swal.fire({icon:'success', text:res.message, timer:1200, showConfirmButton:false});
        });
    });

    /* TOGGLE STATUS */
    $(document).on('change','.toggle-status',function(){
        let id = $(this).data('id');
        let status = $(this).is(':checked') ? 'active' : 'inactive';

        $.post("/users/"+id+"/toggle-status",{
            status: status,
            _token: "{{ csrf_token() }}"
        }, function(res){
            Swal.fire({icon:'success', text:res.message, timer:1200, showConfirmButton:false});
        });
    });

    /* EDIT USER */
    $(document).on('click','.editUserBtn',function(){
        let id = $(this).data('id');

        $.get("/users/"+id+"/edit", function(res){
            $("#editName").val(res.name);
            $("#editEmail").val(res.email);
            $("#editRole").val(res.role);

            $("#editUserForm").attr('action', '/users/' + id);
            $("#editUserModal").modal('show');
        });
    });

    /* RESET PASSWORD */
$(document).on('click', '.resetPasswordBtn', function () {
    let id = $(this).data('id');

    Swal.fire({
        title: 'Reset password?',
        text: 'A new password will be generated for this user.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, reset it',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            $.post("/users/" + id + "/reset-password", {
                _token: "{{ csrf_token() }}"
            }, function (res) {

                Swal.fire({
                    icon: 'success',
                    title: 'Password Reset Successful',
                    html: `
                        <strong>${res.password ?? res.message}</strong><br>
                        <small>Please copy and share securely.</small>
                    `,
                    confirmButtonText: 'OK'
                });

            }).fail(function () {
                Swal.fire('Error', 'Unable to reset password', 'error');
            });
        }
    });
});
</script>

<style>
.switch{position:relative;width:50px;height:24px;display:inline-block}
.switch input{display:none}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:34px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
input:checked + .slider{background:#28a745}
input:checked + .slider:before{transform:translateX(26px)}
</style>
@endsection