<x-app-layout>
    <x-slot name="header">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <h2 class="h4 mb-0">Create Staff</h2>
            </div>
            <div>
                <a href="{{ route('admin.staff.index') }}" class="btn btn-secondary">Back to Staff</a>
            </div>
        </div>
    </x-slot>

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <form id="createStaffForm" action="{{ route('admin.staff.store') }}" method="POST">
                @csrf
                <div class="row gx-3 gy-3">
                    <div class="col-md-6">
                        <label class="form-label">Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Password</label>
                        <input type="password" name="password" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Role</label>
                        <select name="roles[]" class="form-select select2-roles w-100" data-placeholder="Select role" required>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="mt-4 text-end">
                    <a href="{{ route('admin.staff.index') }}" class="btn btn-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // Initialize select2 for roles
                if ($.fn.select2) {
                    $('.select2-roles').select2({
                        placeholder: $('.select2-roles').data('placeholder') || 'Select roles',
                        width: '100%'
                    });
                }

                $(document).on('submit', '#createStaffForm', function (e) {
                    e.preventDefault();
                    const form = $(this);
                    $.ajax({
                        url: form.attr('action'),
                        method: 'POST',
                        data: form.serialize(),
                        success: function () {
                            showToast('Staff account created.', 'success');
                            window.location.href = '{!! route('admin.staff.index') !!}';
                        },
                        error: function (xhr) {
                            handleFormErrors(xhr, form);
                        }
                    });
                });
            });
        </script>
    @endpush
</x-app-layout>
