@extends('root')
@section('title', 'Greeting Message')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Greeting Message',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard Client'],
        ],
        'current' => 'Greeting Message'
    ])

    <div class="row">
        <div class="col-lg-8">
            <div class="card card-body">
                <h5 class="mb-3">Pengaturan Greeting (Service Message)</h5>
                <p class="text-muted small">Pesan sapaan otomatis dikirim sebagai <strong>service message</strong> (bukan campaign), maksimal 1x per 24 jam per nomor. Berlaku per client.</p>

                <form id="form-greeting">
                    @csrf
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" {{ $setting->is_active ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_active">Aktifkan Greeting Message</label>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Template Pesan</label>
                        <textarea class="form-control" id="message_template" name="message_template" rows="5" maxlength="4096" placeholder="{{ \App\Models\GreetingSetting::DEFAULT_TEMPLATE }}">{{ old('message_template', $setting->message_template ?? '') }}</textarea>
                        <div class="form-text">Pesan utility, non-marketing. Aman untuk kebijakan WABA.</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Aktifkan untuk tipe paket</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="apply_for_shared" name="apply_for_shared" {{ ($setting->apply_for_shared ?? true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="apply_for_shared">Shared</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="apply_for_dedicated" name="apply_for_dedicated" {{ ($setting->apply_for_dedicated ?? true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="apply_for_dedicated">Dedicated</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="apply_for_self_service" name="apply_for_self_service" {{ ($setting->apply_for_self_service ?? true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="apply_for_self_service">Self Service</label>
                        </div>
                    </div>

                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="only_registered_contact" name="only_registered_contact" {{ ($setting->only_registered_contact ?? true) ? 'checked' : '' }}>
                        <label class="form-check-label" for="only_registered_contact">Hanya kirim jika nomor terdaftar di kontak (khusus Shared)</label>
                    </div>

                    <button type="submit" class="btn btn-primary">Simpan</button>
                </form>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card card-body">
                <h5 class="mb-3">Preview</h5>
                <div id="preview-box" class="border rounded p-3 bg-light small text-muted" style="white-space: pre-wrap;">{{ $setting->message_template ?: \App\Models\GreetingSetting::DEFAULT_TEMPLATE }}</div>
            </div>

            <div class="card card-body mt-3">
                <h5 class="mb-3">Test Kirim</h5>
                <div class="mb-2">
                    <label class="form-label">Nomor tujuan</label>
                    <input type="text" id="test_phone" class="form-control" placeholder="6281234567890" maxlength="20">
                </div>
                @if($wabaPools->isNotEmpty())
                    <div class="mb-2">
                        <label class="form-label">Device (opsional)</label>
                        <select id="test_waba_pool_id" class="form-select">
                            <option value="">— Pertama tersedia —</option>
                            @foreach($wabaPools as $w)
                                <option value="{{ $w->id }}">{{ $w->phone_number }} ({{ $w->type }})</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                <button type="button" id="btn-test-send" class="btn btn-outline-primary">Kirim Test</button>
                <div id="test-result" class="mt-2 small"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var form = document.getElementById('form-greeting');
    var previewBox = document.getElementById('preview-box');
    var messageTemplate = document.getElementById('message_template');
    var btnTest = document.getElementById('btn-test-send');
    var testPhone = document.getElementById('test_phone');
    var testPool = document.getElementById('test_waba_pool_id');
    var testResult = document.getElementById('test-result');

    if (messageTemplate && previewBox) {
        messageTemplate.addEventListener('input', function () {
            previewBox.textContent = this.value || 'Halo 👋\nTerima kasih telah menghubungi kami.\nSilakan kirimkan kebutuhan Anda, tim kami akan segera membantu.';
        });
    }

    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var data = {
                _token: form.querySelector('input[name="_token"]').value,
                is_active: document.getElementById('is_active').checked,
                message_template: messageTemplate ? messageTemplate.value : '',
                only_registered_contact: document.getElementById('only_registered_contact').checked,
                apply_for_shared: document.getElementById('apply_for_shared').checked,
                apply_for_dedicated: document.getElementById('apply_for_dedicated').checked,
                apply_for_self_service: document.getElementById('apply_for_self_service').checked,
            };
            fetch('{{ route("client.settings.greeting-message.store") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': data._token, 'Accept': 'application/json' },
                body: JSON.stringify(data)
            })
            .then(function (r) { return r.json(); })
            .then(function (res) {
                if (res.success) {
                    if (window.toastr) toastr.success(res.message); else alert(res.message);
                } else {
                    if (window.toastr) toastr.error(res.message || 'Gagal menyimpan'); else alert(res.message || 'Gagal menyimpan');
                }
            })
            .catch(function () {
                if (window.toastr) toastr.error('Gagal menyimpan'); else alert('Gagal menyimpan');
            });
        });
    }

    if (btnTest) {
        btnTest.addEventListener('click', function () {
            var phone = testPhone ? testPhone.value.trim() : '';
            if (!phone) {
                testResult.textContent = 'Masukkan nomor tujuan.';
                testResult.className = 'mt-2 small text-danger';
                return;
            }
            testResult.textContent = 'Mengirim...';
            testResult.className = 'mt-2 small text-muted';
            btnTest.disabled = true;
            fetch('{{ route("client.settings.greeting-message.test-send") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value, 'Accept': 'application/json' },
                body: JSON.stringify({ phone: phone, waba_pool_id: testPool ? testPool.value || null : null })
            })
            .then(function (r) { return r.json(); })
            .then(function (res) {
                if (res.success) {
                    testResult.textContent = res.message;
                    testResult.className = 'mt-2 small text-success';
                } else {
                    testResult.textContent = res.message || 'Gagal mengirim';
                    testResult.className = 'mt-2 small text-danger';
                }
            })
            .catch(function () {
                testResult.textContent = 'Gagal mengirim. Cek koneksi.';
                testResult.className = 'mt-2 small text-danger';
            })
            .finally(function () { btnTest.disabled = false; });
        });
    }
});
</script>
@endpush