@extends('layouts.admin')
@section('title', 'Manage Users')
@section('header', 'User Management')

@section('content')
<div class="recent-activity">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h2 style="margin-bottom: 0;">Users</h2>
        <button id="add-user-btn" class="btn">Add User</button>
    </div>

    <div style="overflow-x: auto;">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Joined</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="users-tbody">
                @foreach($users as $user)
                <tr>
                    <td>
                        <div style="font-weight: 500; color: var(--navy);">{{ $user->name }}</div>
                    </td>
                    <td>{{ $user->email }}</td>
                    <td>
                        @if($user->role === 'super admin')
                            <span class="badge completed" style="background: #e0e7ff; color: #3730a3;">Super Admin</span>
                        @else
                            <span class="badge pending" style="background: #fef9c3; color: #854d0e;">Admin</span>
                        @endif
                    </td>
                    <td style="color: var(--text-light);">{{ $user->created_at ? $user->created_at->format('M d, Y') : 'N/A' }}</td>
                    <td>
                        <a href="#" style="color: var(--navy); text-decoration: none; font-weight: 500; font-size: 14px; margin-right: 12px;">Edit</a>
                        <a href="#" style="color: var(--crimson); text-decoration: none; font-weight: 500; font-size: 14px;">Delete</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
</div>

<!-- Add User Modal -->
<div id="add-user-modal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: white; padding: 32px; border-radius: 12px; width: 100%; max-width: 500px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
            <h3 style="margin: 0; color: var(--navy);">Add New User</h3>
            <button id="close-modal-btn" style="background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-light);">&times;</button>
        </div>
        <form id="add-user-form">
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Name</label>
                <input type="text" name="name" required style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;">
            </div>
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Email</label>
                <input type="email" name="email" required style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;">
            </div>
            <div style="margin-bottom: 16px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Password</label>
                <input type="password" name="password" required style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;">
            </div>
            <div style="margin-bottom: 24px;">
                <label style="display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px;">Role</label>
                <select name="role" required style="width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit;">
                    <option value="admin">Admin</option>
                    <option value="super admin">Super Admin</option>
                </select>
            </div>
            <div style="display: flex; justify-content: flex-end; gap: 12px;">
                <button type="button" id="cancel-modal-btn" style="padding: 10px 16px; border-radius: 6px; border: 1px solid var(--border); background: white; cursor: pointer;">Cancel</button>
                <button type="submit" class="btn">Save User</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modal = document.getElementById('add-user-modal');
        const addBtn = document.getElementById('add-user-btn');
        const closeBtn = document.getElementById('close-modal-btn');
        const cancelBtn = document.getElementById('cancel-modal-btn');
        const form = document.getElementById('add-user-form');
        const tbody = document.getElementById('users-tbody');

        const openModal = () => { modal.style.display = 'flex'; };
        const closeModal = () => { modal.style.display = 'none'; form.reset(); };

        addBtn.addEventListener('click', openModal);
        closeBtn.addEventListener('click', closeModal);
        cancelBtn.addEventListener('click', closeModal);

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            
            Swal.fire({
                title: 'Save new user?',
                text: "Are you sure you want to add this user?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#a2192c',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, save it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const formData = new FormData(form);
                    
                    fetch('{{ route('admin.users.store') }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            closeModal();
                            Swal.fire(
                                'Saved!',
                                data.message,
                                'success'
                            );
                            
                            // Append new row
                            const tr = document.createElement('tr');
                            const roleBadge = data.user.role === 'super admin' 
                                ? '<span class="badge completed" style="background: #e0e7ff; color: #3730a3;">Super Admin</span>'
                                : '<span class="badge pending" style="background: #fef9c3; color: #854d0e;">Admin</span>';
                                
                            tr.innerHTML = `
                                <td>
                                    <div style="font-weight: 500; color: var(--navy);">${data.user.name}</div>
                                </td>
                                <td>${data.user.email}</td>
                                <td>${roleBadge}</td>
                                <td style="color: var(--text-light);">${data.user.created_at}</td>
                                <td>
                                    <a href="#" style="color: var(--navy); text-decoration: none; font-weight: 500; font-size: 14px; margin-right: 12px;">Edit</a>
                                    <a href="#" style="color: var(--crimson); text-decoration: none; font-weight: 500; font-size: 14px;">Delete</a>
                                </td>
                            `;
                            tbody.appendChild(tr);
                        } else {
                            // Handle validation errors from Laravel
                            let errorMsg = 'There was an error saving the user.';
                            if (data.errors) {
                                errorMsg = Object.values(data.errors).flat().join('<br>');
                            }
                            Swal.fire('Error', errorMsg, 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        Swal.fire('Error', 'An unexpected error occurred.', 'error');
                    });
                }
            });
        });
    });
</script>
@endpush