@extends('layouts.app')

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

@section('content')
    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-white">
        <h1 class="text-sm font-semibold text-gray-800">Edit User</h1>
        <a href="{{ route('user.index') }}"
           class="inline-flex items-center text-[11px] font-medium text-gray-700 hover:text-gray-900 border border-gray-300 px-2 py-1 rounded-md bg-gray-50 hover:bg-gray-100 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
            Back
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-sm mt-3">
        <div class="px-4 py-2 border-b border-gray-200">
            <h2 class="text-xs font-semibold text-gray-800">Edit User</h2>
        </div>

        <div class="p-4">
            <form id="user-update-form" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" id="user_id" name="user_id">

                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">User Name</label>
                        <input type="text" name="name" id="name"
                               class="w-full text-[11px] border border-gray-300 rounded px-2 py-1"
                               placeholder="Enter User Name">
                    </div>
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Email</label>
                        <input type="text" name="email" id="email"
                               class="w-full text-[11px] border border-gray-300 rounded px-2 py-1"
                               placeholder="Enter Email">
                    </div>
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Password</label>
                        <input type="password" name="password" id="password"
                               class="w-full text-[11px] border border-gray-300 rounded px-2 py-1"
                               placeholder="Leave blank to keep current">
                    </div>
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Status</label>
                        <select name="status" id="status"
                                class="w-full text-[11px] border border-gray-300 rounded px-2 py-1 bg-white">
                            <option value="A">Active</option>
                            <option value="I">Inactive</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Role</label>
                        <select name="role_id" id="role_id"
                                class="w-full text-[11px] border border-gray-300 rounded px-2 py-1 bg-white">
                            <!-- Roles will be populated via JS -->
                        </select>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit"
                            class="text-[11px] font-medium bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 transition">
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const userId = {{ $id }};

        $(document).ready(function () {
            // Fetch and fill roles
            fetch('/select/roles')
                .then(response => response.json())
                .then(roles => {
                    const roleSelect = $('#role_id');
                    roleSelect.empty();

                    const defaultOption = $('<option></option>').val('').text('Select Role');
                    roleSelect.append(defaultOption);

                    roles.forEach(role => {
                        const option = $('<option></option>')
                            .val(role.id)
                            .text(role.name);
                        roleSelect.append(option);
                    });

                    // After roles are loaded, fetch user data
                    loadUserData();
                })
                .catch(err => console.error('Error loading roles:', err));

            function loadUserData() {
                $.ajax({
                    url: `/user/${userId}`, // Your route to get single user data
                    method: 'GET',
                    success: function (user) {
                        $('#user_id').val(user.id);
                        $('#name').val(user.name);
                        $('#email').val(user.email);
                        $('#status').val(user.status);
                        $('#role_id').val(user.role_id); // Assuming backend sends role_id
                    },
                    error: function () {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Failed to load user data.',
                        });
                    }
                });
            }

            $('#user-update-form').on('submit', function (e) {
                e.preventDefault();

                let formData = {
                    name: $('#name').val(),
                    email: $('#email').val(),
                    password: $('#password').val(),
                    status: $('#status').val(),
                    role_id: $('#role_id').val(),
                    _token: '{{ csrf_token() }}'
                };

                $.ajax({
                    url: `/user/${userId}`,
                    method: 'PUT',
                    data: formData,
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: response.message,
                            confirmButtonText: 'OK'
                        }).then(() => {
                            window.location.href = '{{ route('user.index') }}';
                        });
                    },
                    error: function (xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let formattedErrors = Object.values(errors).map(
                                errArray => `• ${errArray.join('<br>')}`
                            ).join('<br><br>');

                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                html: formattedErrors,
                                confirmButtonText: 'Fix'
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Something went wrong. Please try again.'
                            });
                        }
                    }
                });
            });
        });
    </script>
@endpush