@extends('root')

@section('title', 'Add Contact')

@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;
    }
    .tag-input-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        min-height: 42px;
    }
    .tag-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: #e8f4fd;
        color: #0066cc;
        border-radius: 12px;
        font-size: 0.85rem;
    }
    .tag-badge button {
        border: none;
        background: none;
        color: #666;
        cursor: pointer;
        padding: 0;
        font-size: 1rem;
    }
    .tag-input {
        border: none;
        outline: none;
        flex: 1;
        min-width: 100px;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="form-card">
        <div class="form-header">
            <a href="{{ route('client.contacts.index') }}" class="text-muted mb-2 d-inline-block">
                <i class="ti ti-arrow-left me-1"></i>Back to Contacts
            </a>
            <h2><i class="ti ti-user-plus me-2"></i>Add New Contact</h2>
        </div>

        <form id="contact-form">
            <div class="form-group">
                <label class="form-label">Name *</label>
                <input type="text" name="name" class="form-control" required placeholder="Contact name">
            </div>

            <div class="form-group">
                <label class="form-label">Phone Number (WhatsApp) *</label>
                <input type="text" name="phone_number" class="form-control" required placeholder="628123456789">
                <small class="text-muted">Format E.164: 62 + nomor tanpa 0 di depan</small>
            </div>

            <div class="form-group">
                <label class="form-label">Email</label>
                <input type="email" name="email" class="form-control" placeholder="email@example.com">
            </div>

            <div class="form-group">
                <label class="form-label">Groups</label>
                <select name="group_ids[]" id="groups-select" class="form-select" multiple>
                    @foreach($groups as $group)
                        <option value="{{ $group->id }}">{{ $group->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">Tags</label>
                <div class="tag-input-wrapper" id="tags-wrapper">
                    <input type="text" class="tag-input" id="tag-input" placeholder="Type and press Enter">
                </div>
                <input type="hidden" name="tags" id="tags-hidden">
            </div>

            <div class="form-group">
                <label class="form-label">Notes</label>
                <textarea name="notes" class="form-control" rows="3" placeholder="Additional notes..."></textarea>
            </div>

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

@push('scripts')
<script>
let tags = [];

$(document).ready(function() {
    // Initialize Select2 for groups
    $('#groups-select').select2({
        placeholder: 'Pilih groups...',
        allowClear: true,
        width: '100%'
    });

    $('#tag-input').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            const val = $(this).val().trim();
            if (val && !tags.includes(val)) {
                tags.push(val);
                renderTags();
            }
            $(this).val('');
        }
    });

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

function renderTags() {
    let html = '';
    tags.forEach((t, i) => {
        html += `<span class="tag-badge">${escapeHtml(t)} <button type="button" onclick="removeTag(${i})">&times;</button></span>`;
    });
    $('#tags-wrapper').html(html + '<input type="text" class="tag-input" id="tag-input" placeholder="Type and press Enter">');
    $('#tags-hidden').val(JSON.stringify(tags));
    
    // Rebind event
    $('#tag-input').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            const val = $(this).val().trim();
            if (val && !tags.includes(val)) {
                tags.push(val);
                renderTags();
            }
            $(this).val('');
        }
    });
}

function removeTag(index) {
    tags.splice(index, 1);
    renderTags();
}

function saveContact() {
    const formData = {
        _token: '{{ csrf_token() }}',
        name: $('[name="name"]').val(),
        phone_number: $('[name="phone_number"]').val(),
        email: $('[name="email"]').val() || null,
        group_ids: $('#groups-select').val() || [],
        tags: tags,
        notes: $('[name="notes"]').val() || null
    };

    $.post('{{ route("client.contacts.store") }}', formData)
        .done(function(response) {
            showToast('Contact saved successfully', 'success');
            setTimeout(() => window.location.href = '{{ route("client.contacts.index") }}', 1000);
        })
        .fail(function(xhr) {
            showToast(xhr.responseJSON?.message || 'Failed to save', '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