@extends('root')

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

@push('styles')
<style>
    .form-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        max-width: 600px;
        margin: 0 auto;
        padding: 2rem;
    }
    .form-header {
        margin-bottom: 1.5rem;
    }
    .form-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }
    .form-group {
        margin-bottom: 1rem;
    }
    .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        display: block;
    }
    .contacts-select {
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0.5rem;
    }
    .contact-option {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        border-radius: 6px;
        cursor: pointer;
    }
    .contact-option:hover {
        background: #f5f5f5;
    }
    .contact-option input {
        margin-right: 0.75rem;
    }
    .contact-option-name {
        font-weight: 500;
    }
    .contact-option-phone {
        color: #666;
        font-size: 0.85rem;
        margin-left: auto;
    }
</style>
@endpush

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

        <form id="group-form">
            <div class="form-group">
                <label class="form-label">Group Name *</label>
                <input type="text" name="name" class="form-control" required placeholder="e.g. VIP Customers" value="{{ $contactGroup->name }}">
            </div>

            <div class="form-group">
                <label class="form-label">Description</label>
                <textarea name="description" class="form-control" rows="2" placeholder="Optional description">{{ $contactGroup->description }}</textarea>
            </div>

            <div class="form-group">
                <label class="form-label">Contacts in Group</label>
                <div class="mb-2">
                    <input type="text" id="contact-search" class="form-control form-control-sm" placeholder="Search contacts...">
                </div>
                <div class="contacts-select" id="contacts-list">
                    @forelse($contacts as $contact)
                        <label class="contact-option">
                            <input type="checkbox" name="contact_ids[]" value="{{ $contact->id }}" {{ $contactGroup->contacts->contains($contact->id) ? 'checked' : '' }}>
                            <span class="contact-option-name">{{ $contact->name }}</span>
                            <span class="contact-option-phone">{{ $contact->phone_number }}</span>
                        </label>
                    @empty
                        <p class="text-muted text-center py-3">No contacts yet. <a href="{{ route('client.contacts.create') }}">Add contacts first</a></p>
                    @endforelse
                </div>
            </div>

            <div class="d-flex gap-2 mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="ti ti-check me-1"></i>Update Group
                </button>
                <a href="{{ route('client.contact-groups.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#contact-search').on('input', function() {
        const q = $(this).val().toLowerCase();
        $('.contact-option').each(function() {
            const text = $(this).text().toLowerCase();
            $(this).toggle(text.includes(q));
        });
    });

    $('#group-form').on('submit', function(e) {
        e.preventDefault();
        saveGroup();
    });
});

function saveGroup() {
    const contactIds = [];
    $('[name="contact_ids[]"]:checked').each(function() {
        contactIds.push($(this).val());
    });

    const formData = {
        _token: '{{ csrf_token() }}',
        _method: 'PUT',
        name: $('[name="name"]').val(),
        description: $('[name="description"]').val() || null,
        contact_ids: contactIds
    };

    $.ajax({
        url: '{{ route("client.contact-groups.update", $contactGroup) }}',
        method: 'POST',
        data: formData
    })
    .done(function(response) {
        showToast('Group updated successfully', 'success');
        setTimeout(() => window.location.href = '{{ route("client.contact-groups.index") }}', 1000);
    })
    .fail(function(xhr) {
        showToast(xhr.responseJSON?.message || 'Failed to update', 'error');
    });
}

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