@extends('root')

@section('title', $contactGroup->name)

@push('styles')
<style>
    .group-header {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
    .group-icon {
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 2rem;
    }
    .group-info h2 {
        margin: 0 0 0.25rem 0;
        font-size: 1.5rem;
    }
    .group-info p {
        margin: 0;
        color: #666;
    }
    .group-stats {
        margin-left: auto;
        display: flex;
        gap: 2rem;
    }
    .stat-item {
        text-align: center;
    }
    .stat-value {
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
    }
    .stat-label {
        font-size: 0.85rem;
        color: #666;
    }
    .contacts-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .contacts-card-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .contacts-table {
        width: 100%;
        border-collapse: collapse;
    }
    .contacts-table th, .contacts-table td {
        padding: 0.75rem 1.5rem;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    .contacts-table th {
        background: #f8f9fa;
        font-weight: 600;
        font-size: 0.85rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <a href="{{ route('client.contact-groups.index') }}" class="text-muted mb-3 d-inline-block">
        <i class="ti ti-arrow-left me-1"></i>Back to Groups
    </a>

    <div class="group-header">
        <div class="group-icon"><i class="ti ti-users"></i></div>
        <div class="group-info">
            <h2>{{ $contactGroup->name }}</h2>
            <p>{{ $contactGroup->description ?: 'No description' }}</p>
        </div>
        <div class="group-stats">
            <div class="stat-item">
                <div class="stat-value">{{ $contactGroup->contacts->count() }}</div>
                <div class="stat-label">Contacts</div>
            </div>
        </div>
        <div>
            <a href="{{ route('client.contact-groups.edit', $contactGroup) }}" class="btn btn-outline-primary btn-sm">
                <i class="ti ti-edit me-1"></i>Edit
            </a>
        </div>
    </div>

    <div class="contacts-card">
        <div class="contacts-card-header">
            <h5 class="mb-0">Contacts in Group</h5>
            <button class="btn btn-primary btn-sm" onclick="showAddModal()">
                <i class="ti ti-user-plus me-1"></i>Add Contacts
            </button>
        </div>
        <table class="contacts-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th width="80">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($contactGroup->contacts as $contact)
                    <tr>
                        <td>{{ $contact->name }}</td>
                        <td>{{ $contact->phone_number }}</td>
                        <td>{{ $contact->email ?: '-' }}</td>
                        <td>
                            <button class="btn btn-outline-danger btn-sm" onclick="removeContact({{ $contact->id }})">
                                <i class="ti ti-x"></i>
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center py-4 text-muted">
                            No contacts in this group
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Add Contacts Modal -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Contacts to Group</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="text" id="add-search" class="form-control mb-3" placeholder="Search contacts...">
                <div id="available-contacts" style="max-height:300px;overflow-y:auto;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="doAddContacts()">Add Selected</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const existingIds = @json($contactGroup->contacts->pluck('id'));

function showAddModal() {
    $.get('{{ route("client.contacts.data") }}', { per_page: 200 })
        .done(function(response) {
            const contacts = (response.data || []).filter(c => !existingIds.includes(c.id));
            
            if (contacts.length === 0) {
                $('#available-contacts').html('<p class="text-muted text-center">All contacts already in group</p>');
            } else {
                let html = '';
                contacts.forEach(c => {
                    html += `
                        <label class="d-flex align-items-center p-2 border-bottom" style="cursor:pointer">
                            <input type="checkbox" class="add-contact-cb me-2" value="${c.id}">
                            <span class="fw-medium">${escapeHtml(c.name)}</span>
                            <span class="text-muted ms-auto">${c.phone_number}</span>
                        </label>
                    `;
                });
                $('#available-contacts').html(html);
            }
            
            $('#addModal').modal('show');
        });
}

function doAddContacts() {
    const ids = [];
    $('.add-contact-cb:checked').each(function() {
        ids.push($(this).val());
    });
    
    if (ids.length === 0) {
        showToast('Select at least one contact', 'error');
        return;
    }
    
    $.post('{{ route("client.contact-groups.add-contacts", $contactGroup) }}', {
        _token: '{{ csrf_token() }}',
        contact_ids: ids
    }).done(function() {
        showToast('Contacts added', 'success');
        location.reload();
    }).fail(function(xhr) {
        showToast(xhr.responseJSON?.message || 'Failed', 'error');
    });
}

function removeContact(id) {
    if (!confirm('Remove this contact from group?')) return;
    
    $.post('{{ route("client.contact-groups.remove-contacts", $contactGroup) }}', {
        _token: '{{ csrf_token() }}',
        contact_ids: [id]
    }).done(function() {
        showToast('Contact removed', 'success');
        location.reload();
    }).fail(function(xhr) {
        showToast(xhr.responseJSON?.message || 'Failed', '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