@extends('crm.layouts.master')
@section('title','Messaging')

@section('page-css')
<style>
.msg-page { font-family: inherit; }
.msg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.msg-head h3 { margin: 0; font-size: 1.65rem; font-weight: 700; color: #1a1f36; line-height: 1.2; }
.msg-head p  { margin: .3rem 0 0; color: #8a93a6; font-size: .9rem; }

.msg-card {
    background: #fff; border: 1px solid #e8eaf0; border-radius: 14px;
    padding: 1.75rem; margin-bottom: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.msg-card-title {
    font-size: 1.05rem; font-weight: 700; color: #1a1f36;
    display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem;
    padding-bottom: .85rem; border-bottom: 1px solid #f0f2f8;
}
.msg-card-title i { font-size: 1.1rem; color: #2CA5E0; }

.msg-field { margin-bottom: 1.1rem; }
.msg-field label { display: block; font-size: .82rem; font-weight: 600; color: #4b5468; margin-bottom: .35rem; }
.msg-field input[type=text], .msg-field input[type=password] {
    width: 100%; padding: .55rem .85rem; border: 1px solid #dde1ee; border-radius: 8px;
    font-size: .9rem; color: #1a1f36; background: #fafbfd; transition: border-color .15s;
}
.msg-field input:focus { outline: none; border-color: #7c69ef; background: #fff; }
.msg-hint { font-size: .76rem; color: #8a93a6; margin-top: .3rem; }
.msg-hint code { background: #f0f2f8; padding: .1rem .35rem; border-radius: 4px; font-family: monospace; }

/* Toggle rows */
.tg-toggle-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 2rem;
}
@media (max-width: 640px) { .tg-toggle-grid { grid-template-columns: 1fr; } }

.tg-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem .9rem; background: #f7f8fc; border-radius: 10px; border: 1px solid #eaecf4;
}
.tg-toggle-label { font-size: .88rem; font-weight: 600; color: #2d3748; }
.tg-toggle-sub   { font-size: .74rem; color: #8a93a6; margin-top: .1rem; }

/* iOS-style toggle */
.tg-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.tg-switch input { opacity: 0; width: 0; height: 0; }
.tg-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: #ccd0dc; border-radius: 24px; transition: .25s;
}
.tg-slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.tg-switch input:checked + .tg-slider { background: #25D366; }
.tg-switch input:checked + .tg-slider:before { transform: translateX(20px); }

/* Buttons */
.msg-btn-primary {
    background: #7c69ef; color: #fff; border: 0; border-radius: 9px;
    padding: .6rem 1.4rem; font-size: .9rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: .45rem;
}
.msg-btn-primary:hover { background: #6b58e0; }
.msg-btn-outline {
    background: #fff; color: #7c69ef; border: 1.5px solid #7c69ef; border-radius: 9px;
    padding: .55rem 1.2rem; font-size: .9rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: .45rem;
}
.msg-btn-outline:hover { background: #f4f2ff; }
.msg-btn-actions { display: flex; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* Alert */
.msg-alert { border-radius: 9px; padding: .8rem 1.1rem; font-size: .88rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.msg-alert-success { background: #e8faf2; color: #0d7a4e; border: 1px solid #b2e8d0; }
.msg-alert-danger  { background: #fef0f0; color: #c0392b; border: 1px solid #f5c0bc; }

/* How-to hint box */
.msg-howto {
    background: #f0f6ff; border: 1px solid #c5daf7; border-radius: 10px;
    padding: .85rem 1rem; font-size: .82rem; color: #2563a8; margin-top: .6rem; line-height: 1.6;
}
.msg-howto ol { margin: .4rem 0 0 1rem; padding: 0; }
</style>
@endsection

@section('main-content')
<div class="msg-page">

    <div class="msg-head">
        <div>
            <h3><i class="ti ti-brand-telegram me-2" style="color:#2CA5E0"></i>Messaging</h3>
            <p>Configure the Telegram bot that forwards CRM events to your team group.</p>
        </div>
    </div>

    @if(session('success'))
        <div class="msg-alert msg-alert-success"><i class="ti ti-circle-check"></i>{{ session('success') }}</div>
    @endif

    <form method="POST" action="{{ route('crm.messaging.update') }}" id="msg-form">
        @csrf

        {{-- Telegram Bot Setup --}}
        <div class="msg-card">
            <div class="msg-card-title">
                <i class="ti ti-brand-telegram"></i> Telegram Bot Configuration
            </div>

            <div class="msg-field">
                <label>Bot Token</label>
                <input type="text" name="telegram_bot_token"
                       value="{{ old('telegram_bot_token', $settings->telegram_bot_token) }}"
                       placeholder="1234567890:AABBccDDee...">
                <div class="msg-hint">Your bot token from <code>@BotFather</code>. Already pre-filled with <code>@allstocktrading_bot</code>.</div>
            </div>

            <div class="msg-field">
                <label>Group Chat ID</label>
                <input type="text" name="telegram_group_id"
                       value="{{ old('telegram_group_id', $settings->telegram_group_id) }}"
                       placeholder="-1001234567890" id="group-id-input">
                <div class="msg-hint">Negative number for groups/supergroups, e.g. <code>-1001234567890</code>.</div>
                <div class="msg-howto">
                    <strong>How to get the Group ID:</strong>
                    <ol>
                        <li>Add <code>@allstocktrading_bot</code> to your Telegram group as an admin.</li>
                        <li>Send any message in the group.</li>
                        <li>Open in browser: <code>https://api.telegram.org/bot8906230124:AAGvSbq-kiNr57VyBN7izjgKkkB-kTsqtzw/getUpdates</code></li>
                        <li>Look for <code>"chat":{"id":-100xxxxxxxxxx}</code> — that is your Group ID.</li>
                    </ol>
                </div>
            </div>

            <div class="msg-btn-actions" style="margin-top:.75rem">
                <button type="button" id="test-btn" class="msg-btn-outline">
                    <i class="ti ti-send"></i> Send Test Message
                </button>
                <span id="test-result" style="font-size:.84rem;align-self:center"></span>
            </div>
        </div>

        {{-- Bot Commands & Webhook --}}
        <div class="msg-card">
            <div class="msg-card-title">
                <i class="ti ti-terminal" style="color:#7c69ef"></i> Bot Commands &amp; Webhook
            </div>
            <p style="font-size:.84rem;color:#8a93a6;margin-bottom:1.1rem">
                Register the webhook so the bot can receive commands in your Telegram group.
                After registering, add <code style="background:#f0f2f8;padding:.1rem .35rem;border-radius:4px">@allstocktrading_bot</code> to your group and type a command.
            </p>

            <div style="background:#f7f8fc;border:1px solid #eaecf4;border-radius:10px;padding:1rem 1.2rem;margin-bottom:1.1rem">
                <div style="font-size:.88rem;font-weight:700;color:#2d3748;margin-bottom:.6rem">Available Commands</div>
                <table style="width:100%;border-collapse:collapse;font-size:.85rem">
                    <tr>
                        <td style="padding:.3rem .6rem .3rem 0;color:#7c69ef;font-family:monospace;font-weight:700;white-space:nowrap">/groupid</td>
                        <td style="padding:.3rem 0;color:#4b5468">Bot replies with the current group's Chat ID — paste it into the Group Chat ID field above</td>
                    </tr>
                    <tr>
                        <td style="padding:.3rem .6rem .3rem 0;color:#7c69ef;font-family:monospace;font-weight:700;white-space:nowrap">/status</td>
                        <td style="padding:.3rem 0;color:#4b5468">Bot replies with the current notification settings and which events are active</td>
                    </tr>
                    <tr>
                        <td style="padding:.3rem .6rem .3rem 0;color:#7c69ef;font-family:monospace;font-weight:700;white-space:nowrap">/help</td>
                        <td style="padding:.3rem 0;color:#4b5468">List all available bot commands</td>
                    </tr>
                </table>
            </div>

            <div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap">
                <button type="button" id="register-webhook-btn" class="msg-btn-primary">
                    <i class="ti ti-link"></i> Register Webhook
                </button>
                <button type="button" id="check-webhook-btn" class="msg-btn-outline">
                    <i class="ti ti-info-circle"></i> Check Status
                </button>
                <span id="webhook-result" style="font-size:.84rem;align-self:center"></span>
            </div>

            <div id="webhook-status-box" style="display:none;margin-top:.85rem;background:#f0f6ff;border:1px solid #c5daf7;border-radius:9px;padding:.8rem 1rem;font-size:.83rem;color:#2563a8;line-height:1.6">
            </div>
        </div>

        {{-- Notification Toggles --}}
        <div class="msg-card">
            <div class="msg-card-title">
                <i class="ti ti-bell" style="color:#f0a500"></i> Notification Events
            </div>
            <p style="font-size:.84rem;color:#8a93a6;margin-bottom:1.1rem">
                Choose which events trigger a Telegram message to your group.
            </p>

            <div class="tg-toggle-grid">

                <div class="tg-toggle-row">
                    <div>
                        <div class="tg-toggle-label">Help Desk Ticket</div>
                        <div class="tg-toggle-sub">Client submits a support ticket from portal</div>
                    </div>
                    <label class="tg-switch">
                        <input type="checkbox" name="tg_tickets" {{ $settings->tg_tickets ? 'checked' : '' }}>
                        <span class="tg-slider"></span>
                    </label>
                </div>

                <div class="tg-toggle-row">
                    <div>
                        <div class="tg-toggle-label">Contact Us Form</div>
                        <div class="tg-toggle-sub">Visitor submits the website contact form</div>
                    </div>
                    <label class="tg-switch">
                        <input type="checkbox" name="tg_contact" {{ $settings->tg_contact ? 'checked' : '' }}>
                        <span class="tg-slider"></span>
                    </label>
                </div>

                <div class="tg-toggle-row">
                    <div>
                        <div class="tg-toggle-label">New Client Registration</div>
                        <div class="tg-toggle-sub">A new lead is created in the system</div>
                    </div>
                    <label class="tg-switch">
                        <input type="checkbox" name="tg_new_lead" {{ $settings->tg_new_lead ? 'checked' : '' }}>
                        <span class="tg-slider"></span>
                    </label>
                </div>

                <div class="tg-toggle-row">
                    <div>
                        <div class="tg-toggle-label">New Deposit</div>
                        <div class="tg-toggle-sub">A deposit is recorded for a client</div>
                    </div>
                    <label class="tg-switch">
                        <input type="checkbox" name="tg_deposit" {{ $settings->tg_deposit ? 'checked' : '' }}>
                        <span class="tg-slider"></span>
                    </label>
                </div>

                <div class="tg-toggle-row">
                    <div>
                        <div class="tg-toggle-label">KYC Document Submitted</div>
                        <div class="tg-toggle-sub">Client uploads identity documents</div>
                    </div>
                    <label class="tg-switch">
                        <input type="checkbox" name="tg_kyc" {{ $settings->tg_kyc ? 'checked' : '' }}>
                        <span class="tg-slider"></span>
                    </label>
                </div>

                <div class="tg-toggle-row">
                    <div>
                        <div class="tg-toggle-label">Trade Opened</div>
                        <div class="tg-toggle-sub">Client opens a new CFD/spot trade</div>
                    </div>
                    <label class="tg-switch">
                        <input type="checkbox" name="tg_trade" {{ $settings->tg_trade ? 'checked' : '' }}>
                        <span class="tg-slider"></span>
                    </label>
                </div>

                <div class="tg-toggle-row">
                    <div>
                        <div class="tg-toggle-label">Binary Option Placed</div>
                        <div class="tg-toggle-sub">Client places a binary options trade</div>
                    </div>
                    <label class="tg-switch">
                        <input type="checkbox" name="tg_binary_option" {{ $settings->tg_binary_option ? 'checked' : '' }}>
                        <span class="tg-slider"></span>
                    </label>
                </div>

                <div class="tg-toggle-row">
                    <div>
                        <div class="tg-toggle-label">Client Chat Message</div>
                        <div class="tg-toggle-sub">Client sends a message via portal chat</div>
                    </div>
                    <label class="tg-switch">
                        <input type="checkbox" name="tg_chat_message" {{ $settings->tg_chat_message ? 'checked' : '' }}>
                        <span class="tg-slider"></span>
                    </label>
                </div>

            </div>

            <div class="msg-btn-actions">
                <button type="submit" class="msg-btn-primary">
                    <i class="ti ti-device-floppy"></i> Save Settings
                </button>
            </div>
        </div>

    </form>
</div>
@endsection

@section('bottom-js')
<script>
var CSRF = document.querySelector('meta[name=csrf-token]').getAttribute('content');

function crmPost(url, data) {
    return fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': CSRF,
            'Accept': 'application/json',
        },
        body: JSON.stringify(data),
        credentials: 'same-origin',
    }).then(r => r.json());
}

document.getElementById('register-webhook-btn').addEventListener('click', function () {
    var btn    = this;
    var result = document.getElementById('webhook-result');
    var token  = document.querySelector('[name=telegram_bot_token]').value.trim();

    if (!token) {
        result.style.color = '#c0392b';
        result.textContent = 'Save the Bot Token first.';
        return;
    }

    btn.disabled = true;
    btn.innerHTML = '<i class="ti ti-loader" style="animation:spin 1s linear infinite;display:inline-block"></i> Registering…';
    result.textContent = '';

    crmPost('{{ route('crm.messaging.register-webhook') }}', { telegram_bot_token: token })
    .then(d => {
        if (d.success) {
            result.style.color = '#0d7a4e';
            result.textContent = '✓ ' + d.message;
        } else {
            result.style.color = '#c0392b';
            result.textContent = '✗ ' + d.message;
        }
    })
    .catch(() => { result.style.color = '#c0392b'; result.textContent = 'Network error.'; })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="ti ti-link"></i> Register Webhook';
    });
});

document.getElementById('check-webhook-btn').addEventListener('click', function () {
    var btn    = this;
    var box    = document.getElementById('webhook-status-box');
    var result = document.getElementById('webhook-result');
    var token  = document.querySelector('[name=telegram_bot_token]').value.trim();

    if (!token) {
        result.style.color = '#c0392b';
        result.textContent = 'Save the Bot Token first.';
        return;
    }

    btn.disabled = true;
    btn.innerHTML = '<i class="ti ti-loader" style="animation:spin 1s linear infinite;display:inline-block"></i>';
    result.textContent = '';
    box.style.display = 'none';

    crmPost('{{ route('crm.messaging.webhook-info') }}', { telegram_bot_token: token })
    .then(d => {
        if (!d.success) {
            result.style.color = '#c0392b';
            result.textContent = '✗ ' + d.message;
            return;
        }
        box.style.display = 'block';
        var status = d.has_webhook
            ? '✅ <b>Webhook active</b>'
            : '⚠️ <b>No webhook registered</b>';
        var rows = status;
        if (d.url)     rows += '<br>URL: <code style="font-size:.8rem">' + d.url + '</code>';
        if (d.pending) rows += '<br>Pending updates: ' + d.pending;
        if (d.last_error) rows += '<br>Last error: <span style="color:#c0392b">' + d.last_error + '</span>';
        box.innerHTML = rows;
    })
    .catch(() => { result.style.color = '#c0392b'; result.textContent = 'Network error.'; })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="ti ti-info-circle"></i> Check Status';
    });
});

document.getElementById('test-btn').addEventListener('click', function () {
    var btn    = this;
    var result = document.getElementById('test-result');
    var token  = document.querySelector('[name=telegram_bot_token]').value.trim();
    var group  = document.querySelector('[name=telegram_group_id]').value.trim();

    if (!token || !group) {
        result.style.color = '#c0392b';
        result.textContent = 'Please fill in the Bot Token and Group ID first.';
        return;
    }

    btn.disabled = true;
    btn.innerHTML = '<i class="ti ti-loader" style="animation:spin 1s linear infinite;display:inline-block"></i> Sending…';
    result.textContent = '';

    fetch('{{ route('crm.messaging.test') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').getAttribute('content'),
            'Accept': 'application/json',
        },
        body: JSON.stringify({ telegram_bot_token: token, telegram_group_id: group }),
        credentials: 'same-origin',
    })
    .then(r => r.json())
    .then(d => {
        if (d.success) {
            result.style.color = '#0d7a4e';
            result.textContent = '✓ ' + d.message;
        } else {
            result.style.color = '#c0392b';
            result.textContent = '✗ ' + d.message;
        }
    })
    .catch(() => {
        result.style.color = '#c0392b';
        result.textContent = 'Network error. Please try again.';
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="ti ti-send"></i> Send Test Message';
    });
});
</script>
@endsection