@extends('layouts.app')

@section('title', 'User Create')

@section('content')
    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></li>
            <li><a href="{{ route('users.index') }}" class="hover:text-blue-600">Users</a></li>
            <li><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></li>
            <li class="text-gray-900">Create</li>
        </ol>
    </nav>

    <div class="bg-white p-4 rounded shadow mb-6">
        <h3 class="text-lg font-semibold mb-4">Create New User</h3>

        <form id="createUserForm" class="space-y-3">
            @csrf

            <div>
                <label class="block text-xs font-medium text-gray-700">Full Name</label>
                <input type="text" name="full_name" class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Email</label>
                <input type="email" name="email" class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Phone</label>
                <input type="text" name="phone" class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Role</label>
                <select name="role" class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
                    <option value="admin">Admin</option>
                    <option value="member" selected>Member</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Status</label>
                <select name="status" class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
                    <option value="active" selected>Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Password</label>
                <input type="password" name="password" class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700">Confirm Password</label>
                <input type="password" name="password_confirmation" class="mt-1 block w-full px-2 py-1 text-xs border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500">
            </div>

            <button type="submit" class="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600">
                Create User
            </button>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {
            $('#createUserForm').on('submit', function (e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Creating user...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                $.ajax({
                    url: "{{ route('users.store') }}", // Resource store route
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function (res) {
                        Swal.close();
                        if (res.success) {
                            Swal.fire('Success', res.message, 'success').then(() => {
                                window.location.href = "{{ route('users.index') }}";
                            });
                        } else {
                            Swal.fire('Error', res.message, 'error');
                        }
                    },
                    error: function (xhr) {
                        Swal.close();
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let msg = Object.values(errors).map(arr => arr[0]).join('<br>');
                            Swal.fire('Validation Error', msg, 'warning');
                        } else {
                            Swal.fire('Error', 'Something went wrong.', 'error');
                        }
                    }
                });
            });
        });
    </script>
@endpush