@extends('layouts.app')

@section('title', 'Tambah Kontak')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Tambah Kontak Baru</h1>
        <p class="page-subtitle">Isi informasi kontak / lead</p>
    </div>
    <a href="{{ route('contacts.index') }}" class="btn btn-secondary">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Kembali
    </a>
</div>

<div style="max-width:720px;">
    <div class="card">
        <div class="card-header"><span class="card-title">Informasi Kontak</span></div>
        <div class="card-body">
            <form method="POST" action="{{ route('contacts.store') }}" id="contactForm">
                @csrf

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Nama Lengkap <span class="required">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}" placeholder="Nama kontak" required autofocus>
                        @error('name')<p class="field-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Nomor WhatsApp <span class="required">*</span></label>
                        <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror"
                               value="{{ old('phone') }}" placeholder="08xx / 628xx">
                        <p class="field-hint">Format: 08xx atau 628xx — akan dinormalisasi otomatis</p>
                        @error('phone')<p class="field-error">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email') }}" placeholder="email@example.com">
                        @error('email')<p class="field-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Perusahaan</label>
                        <input type="text" name="company" class="form-control"
                               value="{{ old('company') }}" placeholder="Nama perusahaan">
                    </div>
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Jabatan</label>
                        <input type="text" name="position" class="form-control"
                               value="{{ old('position') }}" placeholder="Jabatan / posisi">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Sumber Lead</label>
                        <select name="source" class="form-control">
                            <option value="">Pilih sumber...</option>
                            @foreach(\App\Models\Contact::SOURCE_LABELS as $val => $label)
                            <option value="{{ $val }}" {{ old('source', 'manual') === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-control">
                            @foreach(\App\Models\Contact::STATUS_LABELS as $val => $label)
                            <option value="{{ $val }}" {{ old('status', 'new') === $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Assign Ke</label>
                        <select name="assigned_to" class="form-control">
                            <option value="">Assign ke saya</option>
                            @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('assigned_to') === $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Kota</label>
                        <input type="text" name="city" class="form-control"
                               value="{{ old('city') }}" placeholder="Kota">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Provinsi</label>
                        <input type="text" name="province" class="form-control"
                               value="{{ old('province') }}" placeholder="Provinsi">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Tags</label>
                    <input type="text" id="tagsInput" class="form-control"
                           placeholder="Ketik tag lalu tekan Enter (misal: premium, dokter, klinik)">
                    <div id="tagsContainer" style="display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem;"></div>
                    <p class="field-hint">Tekan Enter atau koma untuk menambah tag</p>
                </div>

                <div class="form-group">
                    <label class="form-label">Catatan</label>
                    <textarea name="notes" class="form-control" rows="3"
                              placeholder="Catatan tambahan tentang kontak ini...">{{ old('notes') }}</textarea>
                </div>

                <div style="display:flex;gap:.75rem;justify-content:flex-end;padding-top:.5rem;">
                    <a href="{{ route('contacts.index') }}" class="btn btn-secondary">Batal</a>
                    <button type="submit" class="btn btn-primary">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        Simpan Kontak
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
(function() {
    var tags = [];
    var input = document.getElementById('tagsInput');
    var container = document.getElementById('tagsContainer');

    function renderTags() {
        container.innerHTML = '';
        tags.forEach(function(tag, i) {
            var el = document.createElement('span');
            el.style.cssText = 'display:inline-flex;align-items:center;gap:4px;background:var(--primary-50);color:var(--primary);padding:3px 10px;border-radius:20px;font-size:.8125rem;font-weight:500;';
            el.innerHTML = tag + '<button type="button" onclick="removeTag(' + i + ')" style="background:none;border:none;cursor:pointer;color:inherit;padding:0;line-height:1;font-size:.875rem;">&times;</button>';
            container.appendChild(el);
        });
        // Update hidden inputs
        document.querySelectorAll('input[name="tags[]"]').forEach(function(el){ el.remove(); });
        tags.forEach(function(tag) {
            var inp = document.createElement('input');
            inp.type = 'hidden'; inp.name = 'tags[]'; inp.value = tag;
            document.getElementById('contactForm').appendChild(inp);
        });
    }

    window.removeTag = function(i) { tags.splice(i, 1); renderTags(); };

    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ',') {
            e.preventDefault();
            var val = input.value.trim().replace(/,/g, '');
            if (val && !tags.includes(val)) { tags.push(val); renderTags(); }
            input.value = '';
        }
    });

    // Pre-fill old tags
    @if(old('tags'))
    @foreach(old('tags') as $tag)
    tags.push('{{ $tag }}');
    @endforeach
    renderTags();
    @endif
})();
</script>
@endpush