@extends('dashboard.partials.master')

@section('title')
    Create users
@endsection

@section('css')
@endsection
@section('content')
    <!-- end sidebar Navbar -->
    <main class="home home-section">
        <!-- start breadcrumb -->
        <h1 class="brain-title pt-4 ">Create users</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">Create users</li>
            </ol>
        </nav>
        <!-- end breadcrumb -->
        <div class="card role-table mt-4">
            <div class="card-body">
                <form id="user-form">
                    @csrf
                    <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"
                                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"
                                placeholder="Enter Email" required>
                        </div>

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

                        <!-- Password Confirmation Field -->
                        <div class="form-group col-md-5 col-12">
                            <label for="password_confirmation">Confirm Password</label>
                            <input type="password" class="form-control" id="password_confirmation"
                                name="password_confirmation" placeholder="Confirm Password" required>
                        </div>

                        <!-- User Status Field -->
                        <div class="form-group col-md-5 col-12">
                            <label for="user-status">User Status</label>
                            <select class="form-control form-select select2" id="user-status" name="status" required>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>

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

                        <div class="form-group col-md-5 col-12">
                            <label for="user-role">Asgin brain for user</label>
                            <select placeholder="Select brain" class="form-control form-select select2-multiple" id="asgin-brain" name="brain_id[]" required multiple>
                                {{-- <option value="" disabled selected >Select brain</option> --}}
                                @foreach ($brains  as $brain )
                                    <option value="{{ $brain->id }}">{{ $brain->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Save Button -->
                    <div class="form-group d-flex justify-content-center m-3">
                        <button type="submit" class="add-role btn btn-primary">
                            <i class="fa-solid fa-file-medical pe-2"></i>
                            create
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <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>
        // Select All Permissions

        $('.select2').select2({
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            // placeholder: $(this).data('placeholder'),
            closeOnSelect: true,
        });

        $('.select2-multiple').select2({
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            // placeholder: $(this).data('placeholder'),
            closeOnSelect: false,
        });

        function showLoading() {
            $('#loading-screen').show(); //show the loading screen
        }

        function hideLoading() {
            $('#loading-screen').hide(); //hide the loading screen
        }

        function handleSuccess(message) {
            Swal.fire({
                title: 'Success',
                text: message,
                icon: 'success',
            }).then(() => {
                location.reload(); //reload the page after success message
            });
        }

        function handleError() {
            Swal.fire('Error', 'Failed!', 'error');
        }

        // Ajax for storing role
        $('#user-form').on('submit', function(e) {
            e.preventDefault();
            showLoading(); // Show loading screen
            $.ajax({
                type: 'POST',
                url: '{{ route('users.store') }}',
                data: $(this).serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    hideLoading(); // Hide loading screen
                    handleSuccess('User added successfully!');
                },
                error: function() {
                    hideLoading(); // Hide loading screen on error
                    handleError();
                }
            });
        });
    </script>
@endpush