@extends('layouts.master')

@section('title', 'Pengaturan WhatsApp')
@section('page-title', 'Pengaturan WhatsApp')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/whatsapp-setting.css') }}">
@endsection

@section('content')
    <div class="whatsapp-setting-page">
        <div class="card wa-header-card mb-3">
            <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h4 class="mb-1">Pengaturan WhatsApp</h4>
                    <small class="text-muted">Fokus gateway Fonnte untuk notifikasi pelanggan dan reminder tagihan.</small>
                </div>
                <a href="{{ route('whatsapp.logs.index') }}" class="btn btn-outline-secondary">
                    <i class="bx bx-list-ul"></i> Log WhatsApp
                </a>
            </div>
        </div>

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Tutup"></button>
            </div>
        @endif

        <form action="{{ route('whatsapp.setting.save') }}" method="post" id="wa-setting-form">
            @csrf
            <div class="row g-3">
                <div class="col-lg-4">
                    <div class="card wa-card mb-3">
                        <div class="card-header d-flex justify-content-between align-items-start gap-2">
                            <div>
                                <div class="wa-section-title">Gateway Utama</div>
                                <h5 class="mb-0">Konfigurasi Fonnte</h5>
                            </div>
                            @if (!empty($setting->token))
                                <span class="badge rounded-pill badge-soft-success">Aktif</span>
                            @else
                                <span class="badge rounded-pill badge-soft-danger">Belum aktif</span>
                            @endif
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Token Fonnte</label>
                                <input type="text" name="token"
                                    class="form-control @error('token') is-invalid @enderror text-monospace"
                                    value="{{ old('token', $setting->token) }}" placeholder="Masukkan token Fonnte">
                                @error('token')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted d-block mt-1">Ambil token dari dashboard Fonnte Anda.</small>
                            </div>

                            <div>
                                <label class="form-label">Nomor CC Global (Opsional)</label>
                                <input type="text" name="global_cc_number"
                                    class="form-control @error('global_cc_number') is-invalid @enderror"
                                    value="{{ old('global_cc_number', $setting->global_cc_number) }}"
                                    placeholder="62812xxxxxxx">
                                @error('global_cc_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted d-block mt-1">Salinan semua pesan akan dikirim ke nomor ini.</small>
                            </div>

                            <hr class="my-3">
                            <div class="notify-toggle-box">
                                <input type="hidden" name="customer_notification_active" value="0">
                                <div class="form-check form-switch mb-1">
                                    <input class="form-check-input" type="checkbox" role="switch"
                                        id="customer_notification_active" name="customer_notification_active" value="1"
                                        @checked(old('customer_notification_active', $setting->customer_notification_active ?? true))>
                                    <label class="form-check-label fw-semibold" for="customer_notification_active">
                                        Aktifkan Notifikasi WA ke Pelanggan
                                    </label>
                                </div>
                                <small class="text-muted d-block">
                                    Jika nonaktif, sistem tidak akan mengirim notifikasi WA ke pelanggan (pembayaran/reminder/tagihan belum diterima).
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="card wa-card mb-3">
                        <div class="card-header">
                            <div class="wa-section-title">Reminder</div>
                            <h5 class="mb-0">Pengingat Jatuh Tempo</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-2">
                                <div class="col-4">
                                    <label class="form-label">H-1</label>
                                    <input type="number" min="0" max="365" name="reminder_days_before_1"
                                        class="form-control @error('reminder_days_before_1') is-invalid @enderror"
                                        value="{{ old('reminder_days_before_1', $setting->reminder_days_before_1) }}">
                                    @error('reminder_days_before_1')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-4">
                                    <label class="form-label">H-2</label>
                                    <input type="number" min="0" max="365" name="reminder_days_before_2"
                                        class="form-control @error('reminder_days_before_2') is-invalid @enderror"
                                        value="{{ old('reminder_days_before_2', $setting->reminder_days_before_2) }}">
                                    @error('reminder_days_before_2')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-4">
                                    <label class="form-label">H+1</label>
                                    <input type="number" min="0" max="365" name="reminder_days_after_1"
                                        class="form-control @error('reminder_days_after_1') is-invalid @enderror"
                                        value="{{ old('reminder_days_after_1', $setting->reminder_days_after_1) }}">
                                    @error('reminder_days_after_1')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <small class="text-muted d-block mt-2">Nilai 0/kosong berarti tidak digunakan.</small>
                        </div>
                    </div>

                </div>

                <div class="col-lg-8">
                    <div class="card wa-card h-100">
                        <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div>
                                <div class="wa-section-title">Template Pesan</div>
                                <h5 class="mb-0">Welcome, Pembayaran, dan Reminder</h5>
                            </div>
                            <button class="btn btn-primary">
                                <i class="bx bx-save"></i> Simpan Pengaturan
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="text-muted small mb-3">
                                Token yang dapat digunakan:
                                <code>{nama}</code> <code>{app_name}</code> <code>{kode_pelanggan}</code> <code>{paket}</code>
                                <code>{periode}</code> <code>{tagihan_total}</code> <code>{dibayar}</code>
                                <code>{sisa}</code> <code>{tanggal_bayar}</code> <code>{jatuh_tempo}</code>
                                <code>{label}</code> <code>{hari_offset}</code> <code>{keterangan_durasi}</code>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Template Welcome</label>
                                    <div class="btn-group btn-group-sm wa-toolbar mb-1" data-target="#tpl_welcome">
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="*"><strong>B</strong></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="_"><em>I</em></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="~"><span class="text-decoration-line-through">S</span></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="`"><code>code</code></button>
                                    </div>
                                    <textarea name="template_welcome" id="tpl_welcome" class="form-control wa-template-editor" rows="10">{{ old('template_welcome', $setting->template_welcome) }}</textarea>
                                    <div class="wa-preview mt-2">
                                        <div class="wa-bubble-text" data-preview-for="tpl_welcome"></div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Template Pembayaran</label>
                                    <div class="btn-group btn-group-sm wa-toolbar mb-1" data-target="#tpl_pembayaran">
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="*"><strong>B</strong></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="_"><em>I</em></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="~"><span class="text-decoration-line-through">S</span></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="`"><code>code</code></button>
                                    </div>
                                    <textarea name="template_pembayaran" id="tpl_pembayaran" class="form-control wa-template-editor" rows="10">{{ old('template_pembayaran', $setting->template_pembayaran) }}</textarea>
                                    <div class="wa-preview mt-2">
                                        <div class="wa-bubble-text" data-preview-for="tpl_pembayaran"></div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Template Reminder</label>
                                    <div class="btn-group btn-group-sm wa-toolbar mb-1" data-target="#tpl_reminder">
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="*"><strong>B</strong></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="_"><em>I</em></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="~"><span class="text-decoration-line-through">S</span></button>
                                        <button type="button" class="btn btn-outline-secondary" data-wrap="`"><code>code</code></button>
                                    </div>
                                    <textarea name="template_reminder" id="tpl_reminder" class="form-control wa-template-editor" rows="10">{{ old('template_reminder', $setting->template_reminder) }}</textarea>
                                    <div class="wa-preview mt-2">
                                        <div class="wa-bubble-text" data-preview-for="tpl_reminder"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="card wa-card mt-3">
            <div class="card-header">
                <div class="wa-section-title">Tes Cepat</div>
                <h5 class="mb-0">Uji Kirim WhatsApp</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('whatsapp.test') }}" method="post" class="row g-2">
                    @csrf
                    <div class="col-md-4">
                        <label class="form-label">Nomor Tujuan</label>
                        <input type="text" name="nomor_test"
                            class="form-control @error('nomor_test') is-invalid @enderror"
                            placeholder="62812xxxxxxx" value="{{ old('nomor_test') }}">
                        @error('nomor_test')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">Pesan Uji Coba</label>
                        <input type="text" name="pesan_test"
                            class="form-control @error('pesan_test') is-invalid @enderror"
                            value="{{ old('pesan_test') }}" placeholder="Kosongkan untuk pesan default">
                        @error('pesan_test')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12 d-flex justify-content-end">
                        <button class="btn btn-success">
                            <i class="bx bx-send"></i> Kirim Tes
                        </button>
                    </div>
                </form>

                @if (session('wa_result'))
                    <div class="small text-muted mt-2 mb-1">Respons Gateway</div>
                    <pre class="bg-light p-2 rounded small mb-0 wa-result">{{ json_encode(session('wa_result'), JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                @endif
            </div>
        </div>

        <div class="card wa-card mt-3">
            <div class="card-header">
                <div class="wa-section-title">Broadcast</div>
                <h5 class="mb-0">Kirim Pesan ke Semua Pelanggan</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('whatsapp.broadcast') }}" method="post" class="row g-2"
                    onsubmit="return confirm('Kirim broadcast ke pelanggan yang dipilih?')">
                    @csrf
                    <div class="col-12">
                        <label class="form-label">Filter Status Pelanggan</label>
                        @php
                            $selectedStatuses = (array) old('status_pelanggan', ['aktif', 'menunggak', 'non_aktif', 'putus']);
                            $statusOptions = ['aktif' => 'Aktif', 'menunggak' => 'Menunggak', 'non_aktif' => 'Non Aktif', 'putus' => 'Putus'];
                        @endphp
                        <div class="broadcast-status-box">
                            @foreach ($statusOptions as $value => $label)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="bc-{{ $value }}"
                                        name="status_pelanggan[]" value="{{ $value }}" @checked(in_array($value, $selectedStatuses, true))>
                                    <label class="form-check-label" for="bc-{{ $value }}">{{ $label }}</label>
                                </div>
                            @endforeach
                        </div>
                        <small class="text-muted">Default: semua status dipilih.</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Kabupaten/Kota</label>
                        <select name="kabupaten" class="form-select" id="broadcast-kabupaten">
                            <option value="">Semua Kabupaten/Kota</option>
                            @foreach (($kabupatenList ?? collect()) as $item)
                                <option value="{{ $item }}" @selected(old('kabupaten') === $item)>{{ $item }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Kecamatan</label>
                        <select name="kecamatan" class="form-select" id="broadcast-kecamatan">
                            <option value="">Semua Kecamatan</option>
                            @foreach (($kecamatanList ?? collect()) as $item)
                                <option value="{{ $item }}" @selected(old('kecamatan') === $item)>{{ $item }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Desa/Kelurahan</label>
                        <select name="desa" class="form-select" id="broadcast-desa">
                            <option value="">Semua Desa/Kelurahan</option>
                            @foreach (($desaList ?? collect()) as $item)
                                <option value="{{ $item }}" @selected(old('desa') === $item)>{{ $item }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Pesan Broadcast</label>
                        <textarea name="pesan_broadcast" rows="4" class="form-control @error('pesan_broadcast') is-invalid @enderror"
                            placeholder="Tulis pesan yang akan dikirim ke seluruh pelanggan...">{{ old('pesan_broadcast') }}</textarea>
                        @error('pesan_broadcast')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12">
                        <div class="broadcast-status-box">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="kirim-bertahap"
                                    name="kirim_bertahap" value="1" @checked(old('kirim_bertahap') === '1')>
                                <label class="form-check-label" for="kirim-bertahap">
                                    Aktifkan kirim bertahap
                                </label>
                            </div>
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <label class="form-label mb-0">Ukuran Batch</label>
                                    <input type="number" name="batch_size" min="1" max="200" class="form-control"
                                        value="{{ old('batch_size', 25) }}">
                                    <small class="text-muted">Jumlah pengiriman sebelum jeda.</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-0">Jeda (detik)</label>
                                    <input type="number" name="jeda_detik" min="0" max="5" class="form-control"
                                        value="{{ old('jeda_detik', 1) }}">
                                    <small class="text-muted">Jeda antar batch untuk mengurangi lonjakan kirim.</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 d-flex justify-content-end">
                        <button class="btn btn-primary">
                            <i class="bx bx-send"></i> Kirim Broadcast
                        </button>
                    </div>
                </form>

                @if (session('broadcast_summary'))
                    @php $bs = session('broadcast_summary'); @endphp
                    <div class="alert alert-light border mt-3 mb-0 small">
                        <div class="fw-semibold mb-1">Ringkasan Broadcast</div>
                        <div>Total target: <b>{{ $bs['total'] ?? 0 }}</b></div>
                        <div>Berhasil: <b class="text-success">{{ $bs['success'] ?? 0 }}</b> | Gagal: <b class="text-danger">{{ $bs['failed'] ?? 0 }}</b></div>
                        <div class="text-muted">
                            Filter wilayah:
                            {{ $bs['kabupaten'] ?: 'Semua kab/kota' }},
                            {{ $bs['kecamatan'] ?: 'Semua kec' }},
                            {{ $bs['desa'] ?: 'Semua desa' }}
                        </div>
                        <div class="text-muted">
                            Mode kirim:
                            @if (!empty($bs['kirim_bertahap']))
                                Bertahap (batch {{ $bs['batch_size'] ?? '-' }}, jeda {{ $bs['jeda_detik'] ?? '-' }} detik)
                            @else
                                Langsung (tanpa jeda)
                            @endif
                        </div>
                        @if (!empty($bs['failed_names']))
                            <div class="text-muted mt-1">Contoh gagal: {{ implode(', ', $bs['failed_names']) }}</div>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        (function() {
            function formatWhatsAppMarkup(text) {
                if (!text) return '';

                let escaped = text
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/\r\n/g, '\n')
                    .replace(/\r/g, '\n')
                    .replace(/\n/g, '<br>');

                escaped = escaped.replace(/\*(.+?)\*/g, '<strong>$1</strong>');
                escaped = escaped.replace(/_(.+?)_/g, '<em>$1</em>');
                escaped = escaped.replace(/~(.+?)~/g, '<span class="wa-strike">$1</span>');
                escaped = escaped.replace(/`(.+?)`/g, '<code>$1</code>');

                return escaped;
            }

            function updatePreviewFor(textarea) {
                const id = textarea.getAttribute('id');
                if (!id) return;
                const target = document.querySelector('.wa-bubble-text[data-preview-for="' + id + '"]');
                if (!target) return;
                const html = formatWhatsAppMarkup(textarea.value || '');
                target.innerHTML = html || '<span class="text-muted">(Belum ada isi template)</span>';
            }

            function wrapSelection(textarea, wrapper) {
                const start = textarea.selectionStart || 0;
                const end = textarea.selectionEnd || 0;
                const value = textarea.value || '';
                const before = value.substring(0, start);
                const selected = value.substring(start, end) || 'teks';
                const after = value.substring(end);
                const wrapped = wrapper + selected + wrapper;

                textarea.value = before + wrapped + after;
                const cursorPos = before.length + wrapped.length;
                textarea.focus();
                textarea.setSelectionRange(cursorPos, cursorPos);
                updatePreviewFor(textarea);
            }

            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.wa-toolbar button[data-wrap]').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        const wrapChar = this.getAttribute('data-wrap');
                        const targetSelector = this.closest('.wa-toolbar').getAttribute('data-target');
                        const textarea = document.querySelector(targetSelector);
                        if (!textarea || !wrapChar) return;
                        wrapSelection(textarea, wrapChar);
                    });
                });

                document.querySelectorAll('.wa-template-editor').forEach(function(textarea) {
                    const render = function() {
                        updatePreviewFor(textarea);
                    };
                    textarea.addEventListener('input', render);
                    textarea.addEventListener('change', render);
                    render();
                });

                const stagedEl = document.getElementById('kirim-bertahap');
                const batchEl = document.querySelector('input[name="batch_size"]');
                const delayEl = document.querySelector('input[name="jeda_detik"]');

                function syncBroadcastStaged() {
                    if (!stagedEl || !batchEl || !delayEl) return;
                    const enabled = stagedEl.checked;
                    batchEl.disabled = !enabled;
                    delayEl.disabled = !enabled;
                    batchEl.classList.toggle('bg-light', !enabled);
                    delayEl.classList.toggle('bg-light', !enabled);
                }

                if (stagedEl) {
                    stagedEl.addEventListener('change', syncBroadcastStaged);
                    syncBroadcastStaged();
                }

                const kabEl = document.getElementById('broadcast-kabupaten');
                const kecEl = document.getElementById('broadcast-kecamatan');
                const desaEl = document.getElementById('broadcast-desa');
                const oldKec = @json(old('kecamatan', ''));
                const oldDesa = @json(old('desa', ''));

                function renderSelectOptions(selectEl, list, placeholder, selected) {
                    if (!selectEl) return;
                    selectEl.innerHTML = '';
                    selectEl.appendChild(new Option(placeholder, ''));
                    (list || []).forEach(function(item) {
                        const opt = new Option(item, item, false, !!selected && selected === item);
                        selectEl.appendChild(opt);
                    });
                }

                function setWilayahLoading(isLoading) {
                    if (!kecEl || !desaEl) return;
                    kecEl.disabled = isLoading;
                    desaEl.disabled = isLoading;
                    kecEl.classList.toggle('bg-light', isLoading);
                    desaEl.classList.toggle('bg-light', isLoading);
                }

                function fetchWilayahOptions(selectedKec, selectedDesa) {
                    if (!kabEl || !kecEl || !desaEl) return;
                    const params = new URLSearchParams({
                        kabupaten: kabEl.value || '',
                        kecamatan: (selectedKec !== undefined ? selectedKec : (kecEl.value || '')) || ''
                    });
                    setWilayahLoading(true);

                    fetch('{{ route('whatsapp.broadcast.wilayah') }}?' + params.toString(), {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    }).then(function(resp) {
                        return resp.json();
                    }).then(function(data) {
                        const currentKec = selectedKec !== undefined ? selectedKec : (kecEl.value || '');
                        const currentDesa = selectedDesa !== undefined ? selectedDesa : (desaEl.value || '');
                        renderSelectOptions(kecEl, data.kecamatan || [], 'Semua Kecamatan', currentKec);
                        renderSelectOptions(desaEl, data.desa || [], 'Semua Desa/Kelurahan', currentDesa);
                    }).catch(function() {
                        // biarkan opsi existing jika gagal
                    }).finally(function() {
                        setWilayahLoading(false);
                    });
                }

                if (kabEl && kecEl && desaEl) {
                    kabEl.addEventListener('change', function() {
                        fetchWilayahOptions('', '');
                    });
                    kecEl.addEventListener('change', function() {
                        fetchWilayahOptions(kecEl.value || '', '');
                    });
                    fetchWilayahOptions(oldKec || '', oldDesa || '');
                }
            });
        })();
    </script>
@endsection