@extends('layout.app')

@section('title', 'Pengaturan WhatsApp Gateway - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Pengaturan WhatsApp Gateway" 
    subtitle="Atur kredensial dan otomatisasi pengiriman notifikasi WhatsApp"
    :breadcrumbs="[
        ['name' => 'Pengaturan', 'url' => route('pengaturan.dashboard')],
        ['name' => 'WhatsApp Gateway']
    ]"
>
    <button type="button" class="btn btn-sm bg-gradient-secondary mb-0 me-2" id="refresh-stats-btn">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">bar_chart</i> Refresh Statistik
    </button>
    <button type="button" class="btn btn-sm bg-gradient-success mb-0" id="test-connection-btn">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">check_circle</i> Tes Koneksi
    </button>
</x-material-page-header>

<div class="container-fluid py-4">
    @if(session('success'))
        <div class="alert alert-success text-white alert-dismissible fade show shadow-sm" role="alert">
            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger text-white alert-dismissible fade show shadow-sm" role="alert">
            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-xl-8">
            <form action="{{ route('pengaturan.whatsapp.update') }}" method="POST">
                @csrf
                <div class="card my-4">
                    <div class="card-header pb-0 pt-3">
                        <h6 class="mb-0">
                            <i class="fab fa-whatsapp text-success me-2" style="font-size: 20px; vertical-align: middle;"></i>
                            Konfigurasi Gateway
                        </h6>
                    </div>
                    <div class="card-body pt-0">
                        <div class="form-check form-switch mb-3">
                            <input type="checkbox"
                                   class="form-check-input"
                                   id="wa-enabled"
                                   name="enabled"
                                   value="1"
                                   {{ old('enabled', $settings['enabled']) ? 'checked' : '' }}>
                            <label class="form-check-label font-weight-bold" for="wa-enabled">
                                Aktifkan WhatsApp Gateway
                            </label>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Provider</label>
                                <select name="provider" class="form-control">
                                    @php
                                        $providers = [
                                            'meta' => 'Meta WhatsApp Cloud API',
                                            'fonnte' => 'Fonnte',
                                            'qontak' => 'Qontak',
                                            'manual' => 'Custom Gateway'
                                        ];
                                    @endphp
                                    @foreach($providers as $value => $label)
                                        <option value="{{ $value }}" {{ old('provider', $settings['provider']) === $value ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('provider')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                            <div class="col-md-3">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Kode Negara</label>
                                <input type="text"
                                       name="default_country_code"
                                       class="form-control"
                                       value="{{ old('default_country_code', $settings['default_country_code']) }}"
                                       placeholder="62">
                            </div>
                            <div class="form-group col-md-3">
                                <label class="form-control-label font-weight-bold">Nomor Uji Default</label>
                                <input type="text"
                                       name="test_phone"
                                       class="form-control"
                                       value="{{ old('test_phone', $settings['test_phone']) }}"
                                       placeholder="08xxxxxxxxxx">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card my-4">
                    <div class="card-header pb-0 pt-3 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="material-symbols-rounded text-primary me-2" style="font-size: 20px; vertical-align: middle;">key</i>
                            Kredensial API
                        </h6>
                        <span class="text-sm text-muted">Terakhir disimpan: {{ $settings['last_updated_at'] ?? '-' }}</span>
                    </div>
                    <div class="card-body pt-0">
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label font-weight-bold">API URL</label>
                            <input type="text"
                                   name="api_url"
                                   class="form-control"
                                   value="{{ old('api_url', $settings['api_url']) }}"
                                   placeholder="https://graph.facebook.com/v17.0">
                            @error('api_url')<small class="text-danger">{{ $message }}</small>@enderror
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Phone Number ID</label>
                                    <input type="text"
                                           name="phone_number_id"
                                           class="form-control"
                                           value="{{ old('phone_number_id', $settings['phone_number_id']) }}"
                                           placeholder="Masukkan phone number ID">
                                    @error('phone_number_id')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Business Account ID</label>
                                    <input type="text"
                                           name="business_account_id"
                                           class="form-control"
                                           value="{{ old('business_account_id', $settings['business_account_id']) }}"
                                           placeholder="Opsional">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Access Token</label>
                                    <input type="password"
                                           name="access_token"
                                           class="form-control"
                                           value="{{ old('access_token', $settings['access_token']) }}"
                                           placeholder="Masukkan access token">
                                    @error('access_token')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">API Key / App Secret (opsional)</label>
                                    <input type="password"
                                           name="api_key"
                                           class="form-control"
                                           value="{{ old('api_key', $settings['api_key']) }}"
                                           placeholder="Opsional sesuai provider">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Verify Token</label>
                                    <input type="text"
                                           name="verify_token"
                                           class="form-control"
                                           value="{{ old('verify_token', $settings['verify_token']) }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Webhook Token</label>
                                    <input type="text"
                                           name="webhook_token"
                                           class="form-control"
                                           value="{{ old('webhook_token', $settings['webhook_token']) }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Webhook URL</label>
                                    <input type="text"
                                           name="webhook_url"
                                           class="form-control"
                                           value="{{ old('webhook_url', $settings['webhook_url']) }}"
                                           placeholder="{{ url('/whatsapp/webhook') }}">
                                    @error('webhook_url')<small class="text-danger d-block">{{ $message }}</small>@enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card my-4">
                    <div class="card-header pb-0 pt-3">
                        <h6 class="mb-0">
                            <i class="material-symbols-rounded text-info me-2" style="font-size: 20px; vertical-align: middle;">chat</i>
                            Automasi & Batasan
                        </h6>
                    </div>
                    <div class="card-body pt-0">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check form-switch mb-3">
                                    <input type="checkbox"
                                           class="form-check-input"
                                           id="auto-reply-enabled"
                                           name="auto_reply_enabled"
                                           value="1"
                                           {{ old('auto_reply_enabled', $settings['auto_reply_enabled']) ? 'checked' : '' }}>
                                    <label class="form-check-label font-weight-bold" for="auto-reply-enabled">
                                        Aktifkan Auto Reply
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch mb-3">
                                    <input type="checkbox"
                                           class="form-check-input"
                                           id="rate-limit-enabled"
                                           name="rate_limit_enabled"
                                           value="1"
                                           {{ old('rate_limit_enabled', $settings['rate_limit_enabled']) ? 'checked' : '' }}>
                                    <label class="form-check-label font-weight-bold" for="rate-limit-enabled">
                                        Rate Limiting
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label font-weight-bold">Balasan Default</label>
                            <textarea name="auto_reply_default"
                                      rows="2"
                                      class="form-control"
                                      placeholder="Balasan ketika kata kunci tidak ditemukan">{{ old('auto_reply_default', $settings['auto_reply_default']) }}</textarea>
                        </div>
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label font-weight-bold d-flex justify-content-between align-items-center">
                                Kata Kunci Auto Reply
                                <small class="text-muted">Format: kata kunci | balasan</small>
                            </label>
                            <textarea name="auto_reply_keywords"
                                      rows="5"
                                      class="form-control"
                                      placeholder="cari tagihan | Untuk cek tagihan...">{{ old('auto_reply_keywords', $settings['auto_reply_textarea']) }}</textarea>
                        </div>
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <div class="input-group input-group-outline mb-3">
                                    <label class="form-label font-weight-bold">Maks Pesan/menit</label>
                                <input type="number"
                                       name="max_messages_per_minute"
                                       class="form-control"
                                       min="1"
                                       max="120"
                                       value="{{ old('max_messages_per_minute', $settings['max_messages_per_minute']) }}">
                            </div>
                            <div class="form-group col-md-4">
                                <label class="form-control-label font-weight-bold">Delay antar pesan (detik)</label>
                                <input type="number"
                                       step="0.1"
                                       min="0"
                                       max="30"
                                       name="delay_between_messages"
                                       class="form-control"
                                       value="{{ old('delay_between_messages', $settings['delay_between_messages']) }}">
                            </div>
                            <div class="form-group col-md-4">
                                <label class="form-control-label font-weight-bold">Log Channel</label>
                                <input type="text"
                                       name="log_channel"
                                       class="form-control"
                                       value="{{ old('log_channel', $settings['log_channel']) }}"
                                       placeholder="daily">
                            </div>
                        </div>
                        <div class="custom-control custom-switch">
                            <input type="checkbox"
                                   class="custom-control-input"
                                   id="logging-enabled"
                                   name="logging_enabled"
                                   value="1"
                                   {{ old('logging_enabled', $settings['logging_enabled']) ? 'checked' : '' }}>
                            <label class="custom-control-label font-weight-bold" for="logging-enabled">
                                Simpan log pengiriman WhatsApp
                            </label>
                        </div>
                        <div class="text-end mt-4">
                            <button type="submit" class="btn bg-gradient-primary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i>Simpan Pengaturan
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-xl-4">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded text-success me-2" style="font-size: 20px; vertical-align: middle;">signal_cellular_alt</i>
                        Status Gateway
                    </h6>
                </div>
                <div class="card-body pt-0">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Status Konfigurasi</span>
                        @if($connectionReady)
                            <span class="badge badge-sm bg-gradient-success">Siap Digunakan</span>
                        @else
                            <span class="badge badge-sm bg-gradient-warning">Belum Lengkap</span>
                        @endif
                    </div>
                    <ul class="list-unstyled mb-3">
                        <li class="d-flex justify-content-between align-items-center">
                            <span>Endpoint</span>
                            <span class="text-sm text-muted">{{ \Illuminate\Support\Str::limit($settings['api_url'] ?? '-', 24) }}</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center">
                            <span>Phone Number ID</span>
                            <span class="text-sm text-muted">{{ $settings['phone_number_id'] ?: '-' }}</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center">
                            <span>Webhook</span>
                            <span class="badge {{ $settings['webhook_url'] ? 'badge-success' : 'badge-secondary' }}">
                                {{ $settings['webhook_url'] ? 'Aktif' : 'Belum diatur' }}
                            </span>
                        </li>
                    </ul>
                    <div id="test-connection-result" class="text-sm text-muted"></div>
                </div>
            </div>

            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded text-info me-2" style="font-size: 20px; vertical-align: middle;">send</i>
                        Kirim Pesan Uji
                    </h6>
                </div>
                <div class="card-body pt-0">
                    <form id="test-message-form">
                        @csrf
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label font-weight-bold">Nomor Tujuan</label>
                            <input type="text"
                                   name="phone"
                                   class="form-control"
                                   value="{{ $settings['test_phone'] ?? '' }}"
                                   placeholder="62xxxxxxxxxx">
                        </div>
                        <div class="input-group input-group-outline mb-3">
                            <label class="form-label font-weight-bold">Pesan</label>
                            <textarea name="message"
                                      rows="3"
                                      class="form-control"
                                      placeholder="Halo, ini pesan uji dari sistem ISP."></textarea>
                        </div>
                        <button type="submit" class="btn bg-gradient-success mb-0 w-100">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">send</i>Kirim Pesan Uji
                        </button>
                    </form>
                    <div id="test-message-result" class="text-sm mt-3"></div>
                </div>
            </div>

            <div class="card my-4">
                <div class="card-header pb-0 pt-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded text-warning me-2" style="font-size: 20px; vertical-align: middle;">pie_chart</i>
                        Statistik WhatsApp
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <h5 class="text-muted text-uppercase">Total</h5>
                            <span class="h2 font-weight-bold" id="wa-total">{{ $stats['total'] }}</span>
                        </div>
                        <div class="col-6 mb-3">
                            <h5 class="text-muted text-uppercase">Berhasil</h5>
                            <span class="h2 font-weight-bold text-success" id="wa-success">{{ $stats['success'] }}</span>
                        </div>
                        <div class="col-6 mb-3">
                            <h5 class="text-muted text-uppercase">Gagal</h5>
                            <span class="h2 font-weight-bold text-danger" id="wa-failed">{{ $stats['failed'] }}</span>
                        </div>
                        <div class="col-6 mb-3">
                            <h5 class="text-muted text-uppercase">Pending</h5>
                            <span class="h2 font-weight-bold text-warning" id="wa-pending">{{ $stats['pending'] }}</span>
                        </div>
                    </div>
                    <div class="text-center">
                        <p class="mb-1 text-sm text-muted">Success Rate</p>
                        <span class="h3 text-primary" id="wa-success-rate">{{ $stats['success_rate'] }}%</span>
                        <p class="mt-2 mb-0 text-sm text-muted">Terakhir kirim: <span id="wa-last-sent">{{ $stats['last_sent_at'] }}</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    const testConnectionBtn = document.getElementById('test-connection-btn');
    const testConnectionResult = document.getElementById('test-connection-result');
    const testMessageForm = document.getElementById('test-message-form');
    const testMessageResult = document.getElementById('test-message-result');
    const refreshStatsBtn = document.getElementById('refresh-stats-btn');

    function setResult(el, message, isSuccess) {
        if (!el) return;
        el.textContent = message;
        el.classList.remove('text-success', 'text-danger', 'text-muted');
        el.classList.add(isSuccess ? 'text-success' : 'text-danger');
    }

    if (testConnectionBtn) {
        testConnectionBtn.addEventListener('click', function () {
            testConnectionBtn.disabled = true;
            setResult(testConnectionResult, 'Menghubungkan ke WhatsApp API...', true);

            fetch('{{ route('pengaturan.whatsapp.test-connection') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({})
            })
            .then(async response => {
                const data = await response.json();
                if (response.ok) {
                    setResult(testConnectionResult, data.message || 'Koneksi berhasil.', true);
                } else {
                    setResult(testConnectionResult, data.message || 'Tes koneksi gagal.', false);
                }
            })
            .catch(() => setResult(testConnectionResult, 'Terjadi kesalahan saat menghubungi API.', false))
            .finally(() => {
                testConnectionBtn.disabled = false;
            });
        });
    }

    if (testMessageForm) {
        testMessageForm.addEventListener('submit', function (event) {
            event.preventDefault();
            testMessageResult.textContent = 'Mengirim pesan uji...';
            testMessageResult.classList.remove('text-success', 'text-danger');
            testMessageResult.classList.add('text-muted');

            const formData = new FormData(testMessageForm);

            fetch('{{ route('pengaturan.whatsapp.send-test') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                body: formData
            })
            .then(async response => {
                const data = await response.json();
                if (response.ok) {
                    setResult(testMessageResult, data.message || 'Pesan uji terkirim.', true);
                } else {
                    setResult(testMessageResult, data.message || 'Gagal mengirim pesan uji.', false);
                }
            })
            .catch(() => setResult(testMessageResult, 'Terjadi kesalahan saat mengirim pesan.', false));
        });
    }

    if (refreshStatsBtn) {
        refreshStatsBtn.addEventListener('click', function () {
            refreshStatsBtn.disabled = true;
            refreshStatsBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-1"></span> Memuat';

            fetch('{{ route('pengaturan.whatsapp.stats') }}')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('wa-total').textContent = data.total ?? '-';
                    document.getElementById('wa-success').textContent = data.success ?? '-';
                    document.getElementById('wa-failed').textContent = data.failed ?? '-';
                    document.getElementById('wa-pending').textContent = data.pending ?? '-';
                    document.getElementById('wa-success-rate').textContent = (data.success_rate ?? 0) + '%';
                    document.getElementById('wa-last-sent').textContent = data.last_sent_at ?? '-';
                })
                .catch(() => alert('Gagal memuat statistik WhatsApp'))
                .finally(() => {
                    refreshStatsBtn.disabled = false;
                    refreshStatsBtn.innerHTML = '<i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">bar_chart</i> Refresh Statistik';
                });
        });
    }
});
</script>
@endsection