@extends('layouts.app')

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

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Edit Kontak</h1>
        <p class="page-subtitle">{{ $contact->name }}</p>
    </div>
    <a href="{{ route('contacts.show', $contact) }}" 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.update', $contact) }}" id="contactForm">
                @csrf @method('PUT')

                <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', $contact->name) }}" required>
                        @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', $contact->phone) }}" required>
                        @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"
                               value="{{ old('email', $contact->email) }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Perusahaan</label>
                        <input type="text" name="company" class="form-control"
                               value="{{ old('company', $contact->company) }}">
                    </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', $contact->position) }}">
                    </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', $contact->source) === $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', $contact->status) === $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="">— Tidak diassign —</option>
                            @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('assigned_to', $contact->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', $contact->city) }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Provinsi</label>
                        <input type="text" name="province" class="form-control" value="{{ old('province', $contact->province) }}">
                    </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">
                    <div id="tagsContainer" style="display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem;"></div>
                </div>

                <div class="form-group">
                    <label class="form-label">Catatan</label>
                    <textarea name="notes" class="form-control" rows="3">{{ old('notes', $contact->notes) }}</textarea>
                </div>

                <div style="display:flex;gap:.75rem;justify-content:flex-end;padding-top:.5rem;">
                    <a href="{{ route('contacts.show', $contact) }}" 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 Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
(function() {
    var tags = @json($contact->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;">&times;</button>';
            container.appendChild(el);
        });
        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 = '';
        }
    });

    renderTags();
})();
</script>
@endpush