@extends('dashboard.partials.master')

@section('title')
    Edit User
@endsection

@section('css')
@endsection
@section('content')
    <!-- end sidebar Navbar -->
    <main class="home home-section">
        <!-- start breadcrumb -->
        <h1 class="brain-title pt-4 ">Edit User</h1>
        <nav aria-label="breadcrumb mb-5">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Home</a></li>
                <li><a href="{{ route('users.index') }}">Users</a></li>
                <li class="active" aria-current="page">Edit User</li>
            </ol>
        </nav>
        <!-- end breadcrumb -->
        <div class="card role-table mt-4">
            <div class="card-body">
                <form id="user-update-form" action="{{ route('users.update', $user->id) }}">
                    @csrf
                    @method('PUT') <!-- Using PUT to indicate the request is for updating -->

                    <div class="form-users">
                        <!-- Username Field -->
                        <div class="form-group col-md-5 col-12">
                            <label for="name">Username</label>
                            <input type="text" class="form-control" id="name" name="name"
                                value="{{ $user->name }}" placeholder="Enter Username" required>
                        </div>

                        <!-- Email Field -->
                        <div class="form-group col-md-5 col-12">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email"
                                value="{{ $user->email }}" placeholder="Enter Email" required>
                        </div>

                        <!-- Password Field -->
                        <div class="form-group col-md-5 col-12">
                            <label for="password">Password (Optional)</label>
                            <input type="password" class="form-control" id="password" name="password"
                                placeholder="Enter new password">
                        </div>

                        <!-- Password Confirmation -->
                        <div class="form-group col-md-5 col-12">
                            <label for="password_confirmation">Confirm Password (Optional)</label>
                            <input type="password" class="form-control" id="password_confirmation"
                                name="password_confirmation" placeholder="Re-enter new password">
                        </div>

                        <!-- User Status -->
                        <div class="form-group col-md-5 col-12">
                            <label for="user-status">User Status</label>
                            <select class="form-control form-select" id="user-status" name="status" required>
                                <option value="1" {{ $user->status == 1 ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ $user->status == 0 ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>

                        <!-- User Role -->
                        <div class="form-group col-md-5 col-12">
                            <label for="user-role">User Role</label>
                            <select class="form-control form-select" id="user-role" name="roles_name" required>
                                <option value="" disabled>Select role</option>
                                @foreach ($roles as $role)
                                    <option value="{{ $role->name }}"
                                        {{ $user->roles->first()->name == $role->name ? 'selected' : '' }}>
                                        {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-5 col-12">
                            <label for="assign-brain">Assign Brain(s)</label>
                            <select class="form-control form-select select2-multiple" id="assign-brain" name="brain_id[]"
                                multiple>
                                @foreach ($brains as $brain)
                                    <option value="{{ $brain->id }}"
                                        {{ in_array($brain->id, $user->brains->pluck('id')->toArray()) ? 'selected' : '' }}>
                                        {{ $brain->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Save Button -->
                    <div class="form-group d-flex justify-content-center m-3">
                        <button type="submit" class="update-role add-role btn btn-primary">
                            <i class="fa-regular fa-floppy-disk pe-2"></i>
                            Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- Loading screen (you can customize the design as needed) -->
        <div id="loading-screen"
            style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center; padding-top: 20%;">
            {{-- <h2>Loading...</h2> --}}
            <img src="{{ asset('dashboard') }}/images/loading.svg" alt="Loading">
        </div>
    </main>
@endsection

@push('js')
    <script>
        
        $('.select2').select2({
            theme: "bootstrap-5",
            width: '100%',
            closeOnSelect: true,
        });

        $('.select2-multiple').select2({
            theme: "bootstrap-5",
            width: '100%',
            closeOnSelect: false,
        });

        // Ajax for updating user
        $('#user-update-form').on('submit', function(e) {
            e.preventDefault();
            let userId = {{ $user->id }}; // Make sure to get the user ID
            $.ajax({
                type: 'PUT',
                url: $(this).attr('action'), // Ensure there's a route for updating the user
                data: $(this).serialize(),
                success: function(response) {
                    Swal.fire('Updated', 'User updated successfully', 'success').then(() => {
                        location.reload(); // Reload the page after the update
                    });
                },
                error: function() {
                    Swal.fire('Error', 'Update failed!', 'error');
                }
            });
        });
    </script>
@endpush