@extends('layout.agency')

@section('meta_tags')
@stop

@section('pagename')
    Add User
@stop

@section('top_import_file')
@stop

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2>Add User</h2>
    </div>
    <div class="card radius-10 w-100">
        <div class="card-body">
            <form id="regstr" class="row g-3">
                <div id="error" class="alert alert-danger d-none"></div>
                <div class="col-6">
                    <label class="form-label">Username</label>
                    <input type="text" name="username" class="form-control" placeholder="Enter Username" required>
                </div>
                <div class="col-6">
                    <label class="form-label">Email</label>
                    <input type="text" name="email" class="form-control" placeholder="Enter Email" required>
                </div>
                <div class="col-6">
                    <label class="form-label">Contact</label>
                    <input type="text" name="contact" class="form-control" placeholder="Enter Contact" required>
                </div>
                <div class="col-6">
                    <label class="form-label">Password</label>
                    <input type="password" name="password" class="form-control" placeholder="Enter Password" required>
                </div>
                <div class="col-6">
                    <label class="form-label">Confirm Password</label>
                    <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm Password"
                        required>
                </div>
                <div class="col-6">
                    <label class="form-label">Role</label>
                    <select class="form-control" name="role_id" id="role" required>
                        <option value="" selected disabled>Select Role</option>
                        @foreach ($roles as $role)
                            <option data-permissions ='{{ $role->permissions }}' value="{{ $role->id }}">
                                {{ $role->name }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6">
                    <label class="form-label">Project</label>
                    <select class="form-control" name="system_project_id" id="role">
                        <option value="" selected disabled>Select Project (Optional)</option>
                        @foreach ($projects as $project)
                            <option value="{{ $project->id }}"> {{ $project->project }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="d-flex justify-content-end">
                    <div class="d-grid">
                        <button class="btn btn-primary d-none" type="button" id="spinner" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Creating...
                        </button>
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@stop

@section('bottom-scripts')
    {{-- Add Role Script --}}
    <script>
        $(function() {
            $("#regstr").on("submit", function(e) {
                e.preventDefault();

                // Get all checkboxes
                let formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}');

                let selectedRole = $("#role option:selected");
                let permissions = selectedRole.data('permissions');
                if (permissions) {
                    formdata.append('permissions', JSON.stringify(
                        permissions)); // Stringify the permissions object
                }


                $.ajax({
                    url: "{{ route('agency.users.submit') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $(":submit").prop("disabled", true);
                        $(":submit").addClass("d-none");
                        $("#spinner").removeClass("d-none");
                        $("#error").addClass("d-none");
                    },
                    success: function(res) {
                        let obj = res;

                        if (obj.error) {
                            $("#error").html(obj.error);
                            $("#error").removeClass("d-none");
                            $("#spinner").addClass("d-none");
                            $(":submit").removeClass("d-none");
                            $(window).scrollTop(0);
                            toast("error", "Please check error list")
                        } else if (obj.success) {
                            $("#spinner").addClass("d-none");
                            toast("success", "New user has been created")
                            setTimeout(function() {
                                window.location.href = "{{ route('agency.users') }}";
                            }, 1000);
                        } else {
                            $("#spinner").addClass("d-none");
                            $(":submit").prop("disabled", false);
                            $(":submit").removeClass("d-none");
                            $(window).scrollTop(0);
                        }

                        $(":submit").prop("disabled", false);
                    },
                    error: function(error) {
                        console.log(error);
                        $("#error").html(error.responseJSON.message || error.responseJSON
                            .error);
                        $("#error").removeClass("d-none");
                        $("#spinner").addClass("d-none");
                        $(":submit").prop("disabled", false);
                        $(":submit").removeClass("d-none");
                        toast("error", "Please check error list")
                    }
                });
            });
        });
    </script>
@stop