@extends('root')

@section('title', 'Phone Book - Groups')

@push('styles')
<style>
    .groups-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    .groups-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }
    .groups-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }
    .group-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        padding: 1.5rem;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .group-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    .group-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    .group-name {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    .group-desc {
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    .group-count {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: #f0f0f0;
        border-radius: 12px;
        font-size: 0.85rem;
        color: #666;
    }
    .group-actions {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #eee;
        display: flex;
        gap: 0.5rem;
    }
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .empty-state i {
        font-size: 4rem;
        color: #ddd;
        margin-bottom: 1rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="groups-header">
        <h2><i class="ti ti-users-group me-2"></i>Contact Groups</h2>
        <a href="{{ route('client.contact-groups.create') }}" class="btn btn-primary btn-sm">
            <i class="ti ti-plus me-1"></i>Create Group
        </a>
    </div>

    <div class="groups-grid" id="groups-container">
        <div class="text-center py-5">Loading...</div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    loadGroups();
});

function loadGroups() {
    $.get('{{ route("client.contact-groups.data") }}')
        .done(function(response) {
            renderGroups(response.data || []);
        });
}

function renderGroups(groups) {
    if (groups.length === 0) {
        $('#groups-container').html(`
            <div class="empty-state" style="grid-column: 1/-1">
                <i class="ti ti-users-group"></i>
                <h4>No Groups Yet</h4>
                <p class="text-muted">Create your first group to organize contacts</p>
                <a href="{{ route('client.contact-groups.create') }}" class="btn btn-primary">Create Group</a>
            </div>
        `);
        return;
    }

    let html = '';
    groups.forEach(g => {
        html += `
            <div class="group-card">
                <div class="group-icon"><i class="ti ti-users"></i></div>
                <div class="group-name">${escapeHtml(g.name)}</div>
                <div class="group-desc">${escapeHtml(g.description || 'No description')}</div>
                <span class="group-count"><i class="ti ti-user"></i> ${g.contacts_count} contacts</span>
                <div class="group-actions">
                    <a href="/client/contact-groups/${g.id}" class="btn btn-outline-primary btn-sm flex-fill">
                        <i class="ti ti-eye me-1"></i>View
                    </a>
                    <a href="/client/contact-groups/${g.id}/edit" class="btn btn-outline-secondary btn-sm">
                        <i class="ti ti-edit"></i>
                    </a>
                    <button class="btn btn-outline-danger btn-sm" onclick="deleteGroup(${g.id})">
                        <i class="ti ti-trash"></i>
                    </button>
                </div>
            </div>
        `;
    });
    $('#groups-container').html(html);
}

function deleteGroup(id) {
    if (!confirm('Delete this group? Contacts will not be deleted.')) return;
    
    $.ajax({
        url: `/client/contact-groups/${id}`,
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).done(function() {
        showToast('Group deleted', 'success');
        loadGroups();
    }).fail(function(xhr) {
        showToast(xhr.responseJSON?.message || 'Failed to delete', 'error');
    });
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text || '';
    return div.innerHTML;
}

function showToast(msg, type) {
    const t = $(`<div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999"><div class="toast show bg-${type==='error'?'danger':'success'} text-white" style="border-radius:12px"><div class="toast-body">${msg}</div></div></div>`);
    $('body').append(t);
    setTimeout(() => t.remove(), 3000);
}
</script>
@endpush