@extends('layouts.app')

@section('title', __('whatsappnotification::lang.whatsapp_notification') . ' - ' . __('whatsappnotification::lang.settings'))

@section('content')

<style>
    .wa-connect-hero {
        background: linear-gradient(135deg, #075e54 0%, #128c7e 45%, #25d366 100%);
        color: #fff;
        border-radius: 18px;
        padding: 24px;
        margin-bottom: 20px;
        box-shadow: 0 18px 44px rgba(7, 94, 84, .22);
    }
    .wa-connect-hero h2 { margin: 0; font-weight: 900; }
    .wa-connect-hero p { color: rgba(255,255,255,.82); margin: 8px 0 0; }
    .wa-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
    .wa-setup-card { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 14px; }
    .wa-setup-card strong { display: block; font-size: 15px; margin-bottom: 5px; }
    .wa-b2b-box {
        border: 1px solid #bbf7d0;
        border-radius: 16px;
        background: linear-gradient(135deg, #f0fdf4, #ecfeff);
        padding: 18px;
        margin-bottom: 20px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    }
    .wa-b2b-box h4 { margin-top: 0; font-weight: 900; color: #075e54; }
    .wa-b2b-box code { background: #dcfce7; color: #166534; border-radius: 6px; padding: 2px 6px; }
    .wa-modern-panel {
        border: 1px solid #e5eaf2;
        border-radius: 16px;
        background: #fff;
        padding: 18px;
        margin-bottom: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
    }
</style>

<div class="wa-connect-hero">
    <h2><i class="fab fa-whatsapp"></i> WhatsApp Connect</h2>
    <p>Configure Big Brains Flow / Meta Official API once, then use it for POS notifications and B2B customer login OTP.</p>
    <div class="wa-setup-grid">
        <div class="wa-setup-card"><strong>1. Save Meta credentials</strong>Enter Meta API Key and Connection ID below.</div>
        <div class="wa-setup-card"><strong>2. Create OTP template</strong>Add template named <b>B2B Login OTP</b>.</div>
        <div class="wa-setup-card"><strong>3. Map OTP variable</strong>Use <code>{otp}</code> as body parameter.</div>
        <div class="wa-setup-card"><strong>4. Enable module</strong>Keep WhatsApp Connect active.</div>
    </div>
</div>

@component('components.widget', ['class' => 'box-primary'])
    @slot('title')
        <i class="fab fa-whatsapp" style="color: #25D366;"></i> {{ __('whatsappnotification::lang.whatsapp_notification') }} — {{ __('whatsappnotification::lang.settings') }}
    @endslot
    @slot('tool')
        <a href="{{ route('whatsappnotification.templates.index') }}" class="btn btn-success btn-sm">
            <i class="fas fa-layer-group"></i> {{ __('whatsappnotification::lang.manage_templates') }}
        </a>
        <a href="{{ route('whatsappnotification.logs') }}" class="btn btn-default btn-sm">
            <i class="fas fa-history"></i> {{ __('whatsappnotification::lang.notification_logs') }}
        </a>
    @endslot

    @if(session('status'))
        @if(session('status.success'))
            <div class="alert alert-success">{{ session('status.msg') }}</div>
        @else
            <div class="alert alert-danger">{{ session('status.msg') }}</div>
        @endif
    @endif

    <div class="wa-b2b-box">
        <h4><i class="fas fa-key"></i> B2B Portal Login OTP Setup</h4>
        <p>For B2B customer authentication, create one active template in <strong>Manage Templates</strong> with these exact settings:</p>
        <ol>
            <li><strong>Template Name:</strong> <code>B2B Login OTP</code></li>
            <li><strong>Trigger Type:</strong> Manual</li>
            <li><strong>Send via:</strong> Meta Official Cloud API</li>
            <li><strong>Approved Meta Template:</strong> choose your approved OTP template from Meta</li>
            <li><strong>Body Parameters:</strong> add <code>{otp}</code> on its own line</li>
            <li><strong>Active:</strong> checked</li>
        </ol>
        <a href="{{ route('whatsappnotification.templates.create') }}" class="btn btn-success btn-sm">
            <i class="fas fa-plus"></i> Create B2B Login OTP Template
        </a>
    </div>

    {{-- WhatsApp Connection Panel --}}
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-12">
            <div class="panel panel-default" style="border: 2px solid #25D366; border-radius: 8px;">
                <div class="panel-heading" style="background: #25D366; color: #fff; border-radius: 6px 6px 0 0; padding: 12px 16px;">
                    <h4 style="margin: 0;"><i class="fab fa-whatsapp"></i> WhatsApp Connection</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8">
                            <p class="text-muted" style="margin-bottom: 15px; font-size: 13px;">
                                Use the buttons below to connect your WhatsApp account to this instance.
                                Save your <strong>Access Token</strong> and <strong>API URL</strong> first, then click <strong>Create Instance</strong> if you don't have an Instance ID yet, or <strong>Get QR Code</strong> to scan with WhatsApp.
                            </p>
                            <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
                                <button type="button" id="btn_create_instance" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus-circle"></i> Create Instance
                                </button>
                                <button type="button" id="btn_get_qrcode" class="btn btn-success btn-sm">
                                    <i class="fas fa-qrcode"></i> Get QR Code
                                </button>
                                <button type="button" id="btn_reconnect" class="btn btn-warning btn-sm">
                                    <i class="fas fa-sync-alt"></i> Reconnect
                                </button>
                                <span id="instance_action_result" class="help-block" style="margin: 0; font-size: 13px;"></span>
                            </div>
                        </div>
                        <div class="col-md-4 text-center">
                            <div id="qrcode_container" style="display:none; margin-top: 5px;">
                                <p class="text-muted small" style="margin-bottom: 8px;"><i class="fas fa-mobile-alt"></i> Scan this QR code with WhatsApp</p>
                                <img id="qrcode_image" src="" alt="QR Code" style="max-width: 200px; border: 2px solid #25D366; border-radius: 6px; padding: 4px;">
                                <div id="qrcode_text" style="display:none; font-size: 11px; word-break: break-all; margin-top: 5px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {!! Form::open(['route' => 'whatsappnotification.save_settings', 'method' => 'POST']) !!}

    {{-- API Configuration --}}
    <div class="row">
        <div class="col-md-12">
            <h4 class="text-primary"><i class="fas fa-cog"></i> {{ __('whatsappnotification::lang.api_configuration') }}</h4>
            <hr>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                {!! Form::label('api_url', __('whatsappnotification::lang.api_url') . ':') !!}
                {!! Form::text('api_url', $settings->api_url, ['class' => 'form-control', 'placeholder' => 'https://multicrm.bigbrainscrm.com/api/send_template']) !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('instance_id', __('whatsappnotification::lang.instance_id') . ':') !!}
                {!! Form::text('instance_id', $settings->instance_id, ['class' => 'form-control', 'required', 'placeholder' => 'Your Instance ID']) !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('access_token', __('whatsappnotification::lang.access_token') . ':') !!}
                {!! Form::text('access_token', $settings->access_token, ['class' => 'form-control', 'required', 'placeholder' => 'Your Access Token']) !!}
            </div>
        </div>
    </div>

    <hr>
    <h4 class="text-primary"><i class="fab fa-meta"></i> Meta Official Cloud API <small class="text-muted">(optional — per-template opt-in)</small></h4>
    <p class="help-block">
        Set these to enable the Meta Official Cloud API path. In each Template you can then choose which provider (unofficial / Meta) to use for that trigger. Get your key from <strong>API Keys</strong> in the MultiCRM sidebar; the Connection ID is from the <strong>Connections</strong> page.
    </p>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                {!! Form::label('meta_api_key', 'Meta API Key:') !!}
                {!! Form::text('meta_api_key', $settings->meta_api_key ?? '', ['class' => 'form-control', 'placeholder' => 'mck_live_...']) !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('meta_connection_id', 'Meta Connection ID:') !!}
                {!! Form::text('meta_connection_id', $settings->meta_connection_id ?? '', ['class' => 'form-control', 'placeholder' => 'e.g. 12']) !!}
            </div>
        </div>
    </div>
    <hr>

    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('type', __('whatsappnotification::lang.message_type') . ':') !!}
                {!! Form::select('type', ['button' => 'Button', 'list' => 'List'], $settings->type, ['class' => 'form-control']) !!}
            </div>
        </div>
    </div>

    {{-- Message Template --}}
    <div class="row">
        <div class="col-md-12">
            <h4 class="text-primary"><i class="fas fa-envelope"></i> {{ __('whatsappnotification::lang.message_template') }}</h4>
            <hr>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                {!! Form::label('message_title', __('whatsappnotification::lang.message_title') . ':') !!}
                {!! Form::textarea('message_title', $settings->message_title, ['class' => 'form-control', 'rows' => 5, 'placeholder' => 'Thank you for your order #{invoice_no}! Your total is ₹{total_amount}.']) !!}
            </div>
            <div class="form-group">
                {!! Form::label('message_footer', __('whatsappnotification::lang.message_footer') . ':') !!}
                {!! Form::text('message_footer', $settings->message_footer, ['class' => 'form-control', 'placeholder' => '{business_name} - {business_phone}']) !!}
            </div>
        </div>
        <div class="col-md-4">
            <div class="well" style="background: #f9f9f9; padding: 15px; border-radius: 5px;">
                <h5><i class="fas fa-tags"></i> {{ __('whatsappnotification::lang.available_tags') }}</h5>
                <p class="text-muted small">{{ __('whatsappnotification::lang.tags_help') }}</p>
                <div style="font-family: monospace; font-size: 12px; line-height: 2;">
                    <code>{invoice_no}</code> — Invoice Number<br>
                    <code>{invoice_url}</code> — Invoice URL (public link)<br>
                    <code>{invoice_pdf_url}</code> — Invoice PDF URL<br>
                    <code>{total_amount}</code> — Total Amount<br>
                    <code>{total_paid}</code> — Total Paid<br>
                    <code>{total_due}</code> — Total Due<br>
                    <code>{contact_name}</code> — Customer Name<br>
                    <code>{customer_mobile}</code> — Customer Mobile<br>
                    <code>{business_name}</code> — Business Name<br>
                    <code>{business_phone}</code> — Business Phone<br>
                    <code>{transaction_date}</code> — Transaction Date<br>
                    <code>{product_list}</code> — Product List<br>
                    <code>{item_count}</code> — Total Items<br>
                    <code>{discount}</code> — Discount<br>
                    <code>{tax}</code> — Tax Amount<br>
                    <code>{shipping}</code> — Shipping<br>
                    <code>{sale_note}</code> — Sale Note<br>
                    <code>{payment_status}</code> — Payment Status<br>
                </div>
            </div>
        </div>
    </div>

    {{-- Template Buttons --}}
    <div class="row">
        <div class="col-md-12">
            <h4 class="text-primary"><i class="fas fa-hand-pointer"></i> {{ __('whatsappnotification::lang.template_buttons') }}</h4>
            <p class="text-muted">{{ __('whatsappnotification::lang.template_buttons_help') }}</p>
            <hr>
        </div>
    </div>

    @php
        $buttons = $settings->template_buttons ?? [];
        // Normalize old format (keyed by type) to new format (indexed array)
        if (!empty($buttons) && !isset($buttons[0])) {
            $normalized = [];
            foreach ($buttons as $type => $btn) {
                $btn['type'] = $type;
                $normalized[] = $btn;
            }
            $buttons = $normalized;
        }
    @endphp

    <div id="template-buttons-container">
        @foreach($buttons as $index => $btn)
        <div class="template-button-row" data-index="{{ $index }}">
            <div class="row" style="margin-bottom: 10px; padding: 12px; background: #f9f9f9; border-radius: 5px; border-left: 3px solid #25D366;">
                <div class="col-md-2">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label>Type</label>
                        <select name="buttons[{{ $index }}][type]" class="form-control btn-type-select">
                            <option value="urlButton" {{ ($btn['type'] ?? '') == 'urlButton' ? 'selected' : '' }}>🔗 URL Button</option>
                            <option value="callButton" {{ ($btn['type'] ?? '') == 'callButton' ? 'selected' : '' }}>📞 Call Button</option>
                            <option value="quickReplyButton" {{ ($btn['type'] ?? '') == 'quickReplyButton' ? 'selected' : '' }}>💬 Quick Reply</option>
                            <option value="copyCodeButton" {{ ($btn['type'] ?? '') == 'copyCodeButton' ? 'selected' : '' }}>📋 Copy Code</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group" style="margin-bottom: 0;">
                        <label>Button Text</label>
                        <input type="text" name="buttons[{{ $index }}][displayText]" class="form-control" value="{{ $btn['displayText'] ?? '' }}" placeholder="e.g., View Invoice">
                    </div>
                </div>
                <div class="col-md-5 btn-extra-fields">
                    @if(($btn['type'] ?? 'urlButton') == 'urlButton')
                        <div class="form-group" style="margin-bottom: 0;">
                            <label>URL</label>
                            <input type="text" name="buttons[{{ $index }}][url]" class="form-control" value="{{ $btn['url'] ?? '' }}" placeholder="https://example.com or {invoice_url}">
                        </div>
                    @elseif(($btn['type'] ?? '') == 'callButton')
                        <div class="form-group" style="margin-bottom: 0;">
                            <label>Phone Number</label>
                            <input type="text" name="buttons[{{ $index }}][phoneNumber]" class="form-control" value="{{ $btn['phoneNumber'] ?? '' }}" placeholder="919876543210">
                        </div>
                    @elseif(($btn['type'] ?? '') == 'quickReplyButton')
                        <div class="form-group" style="margin-bottom: 0;">
                            <label>Button ID</label>
                            <input type="text" name="buttons[{{ $index }}][id]" class="form-control" value="{{ $btn['id'] ?? '' }}" placeholder="quick_reply_1">
                        </div>
                    @elseif(($btn['type'] ?? '') == 'copyCodeButton')
                        <div class="form-group" style="margin-bottom: 0;">
                            <label>Code to Copy</label>
                            <input type="text" name="buttons[{{ $index }}][copyCode]" class="form-control" value="{{ $btn['copyCode'] ?? '' }}" placeholder="e.g., DISCOUNT20">
                        </div>
                    @endif
                </div>
                <div class="col-md-2 text-center" style="padding-top: 22px;">
                    <button type="button" class="btn btn-danger btn-sm remove-button-row" title="Remove"><i class="fas fa-trash"></i></button>
                    <button type="button" class="btn btn-default btn-sm move-up-btn" title="Move Up"><i class="fas fa-arrow-up"></i></button>
                    <button type="button" class="btn btn-default btn-sm move-down-btn" title="Move Down"><i class="fas fa-arrow-down"></i></button>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="row" style="margin-bottom: 15px;">
        <div class="col-md-12">
            <button type="button" id="add-template-button" class="btn btn-success btn-sm">
                <i class="fas fa-plus"></i> {{ __('whatsappnotification::lang.add_button') }}
            </button>
            <span class="text-muted small" style="margin-left: 10px;">You can add up to 3 buttons per message</span>
        </div>
    </div>

    {{-- Trigger Settings --}}
    <div class="row">
        <div class="col-md-12">
            <h4 class="text-primary"><i class="fas fa-bolt"></i> {{ __('whatsappnotification::lang.trigger_settings') }}</h4>
            <hr>
        </div>
    </div>

    {{-- Master Switch --}}
    <div class="row">
        <div class="col-md-12">
            <div class="well" style="background: #f0fff0; border: 2px solid #25D366; border-radius: 8px; padding: 20px;">
                <div class="checkbox" style="margin: 0;">
                    <label style="font-size: 16px;">
                        {!! Form::checkbox('is_active', 1, $settings->is_active, ['class' => 'input-icheck', 'id' => 'is_active_toggle']) !!}
                        <strong style="color: #25D366;"><i class="fab fa-whatsapp"></i> {{ __('whatsappnotification::lang.enable_module') }}</strong>
                    </label>
                </div>
                <p class="text-muted" style="margin: 5px 0 0 25px; font-size: 13px;">
                    {{ __('whatsappnotification::lang.enable_module_help') }}
                </p>
            </div>
        </div>
    </div>

    <br>

    {{-- Auto Notification Triggers --}}
    <div id="auto-trigger-settings">
        <div class="row">
            <div class="col-md-12">
                <h5 class="text-primary"><i class="fas fa-robot"></i> {{ __('whatsappnotification::lang.auto_notification_triggers') }}</h5>
                <p class="text-muted" style="font-size: 13px;">{{ __('whatsappnotification::lang.auto_trigger_help') }}</p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default" style="border-left: 4px solid #25D366;">
                    <div class="panel-body">
                        <div class="checkbox" style="margin: 0;">
                            <label style="font-size: 14px;">
                                {!! Form::checkbox('notify_on_new_sale', 1, $settings->notify_on_new_sale, ['class' => 'input-icheck']) !!}
                                <strong>{{ __('whatsappnotification::lang.notify_on_new_sale') }}</strong>
                            </label>
                        </div>
                        <p class="text-muted" style="margin: 5px 0 0 25px; font-size: 12px;">
                            {{ __('whatsappnotification::lang.notify_on_new_sale_help') }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default" style="border-left: 4px solid #f0ad4e;">
                    <div class="panel-body">
                        <div class="checkbox" style="margin: 0;">
                            <label style="font-size: 14px;">
                                {!! Form::checkbox('notify_on_sale_update', 1, $settings->notify_on_sale_update, ['class' => 'input-icheck']) !!}
                                <strong>{{ __('whatsappnotification::lang.notify_on_sale_update') }}</strong>
                            </label>
                        </div>
                        <p class="text-muted" style="margin: 5px 0 0 25px; font-size: 12px;">
                            {{ __('whatsappnotification::lang.notify_on_sale_update_help') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-info" style="font-size: 13px;">
                    <i class="fas fa-info-circle"></i> <strong>{{ __('whatsappnotification::lang.how_it_works') }}:</strong>
                    {{ __('whatsappnotification::lang.how_it_works_desc') }}
                </div>
            </div>
        </div>
    </div>

    <br>

    {{-- Test Notification --}}
    <div class="row">
        <div class="col-md-12">
            <h4 class="text-primary"><i class="fas fa-vial"></i> {{ __('whatsappnotification::lang.test_notification') }}</h4>
            <hr>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="input-group">
                <input type="text" id="test_number" class="form-control" placeholder="919876543210">
                <span class="input-group-btn">
                    <button type="button" id="send_test_btn" class="btn btn-success">
                        <i class="fab fa-whatsapp"></i> {{ __('whatsappnotification::lang.send_test') }}
                    </button>
                </span>
            </div>
            <div id="test_result" class="help-block" style="margin-top: 5px;"></div>
        </div>
    </div>

    <br>
    <hr>

    <div class="row">
        <div class="col-md-12">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-save"></i> {{ __('whatsappnotification::lang.save') }}
            </button>
        </div>
    </div>

    {!! Form::close() !!}

    <hr>
    <div class="text-center" style="padding: 10px 0; color: #999; font-size: 12px;">
        <i class="fab fa-whatsapp" style="color: #25D366;"></i> 
        <strong>WhatsApp Connect</strong> v{{ config('whatsappnotification.module_version', '1.0') }} — 
        {{ __('whatsappnotification::lang.powered_by') }} | 
        <a href="https://bigbrainstechnolabs.com" target="_blank" style="color: #25D366;">bigbrainstechnolabs.com</a>
    </div>

@endcomponent

@stop

@section('javascript')
<script>
$(document).ready(function() {

    // ============ MASTER TOGGLE: SHOW/HIDE AUTO TRIGGERS ============

    function toggleAutoTriggerVisibility() {
        var isActive = $('#is_active_toggle').is(':checked');
        if (isActive) {
            $('#auto-trigger-settings').slideDown(200);
        } else {
            $('#auto-trigger-settings').slideUp(200);
        }
    }

    // Initial state
    toggleAutoTriggerVisibility();

    // Listen to iCheck events (the AdminLTE iCheck plugin)
    $('#is_active_toggle').on('ifChecked ifUnchecked', function() {
        toggleAutoTriggerVisibility();
    });
    // Also handle native change (fallback)
    $('#is_active_toggle').on('change', function() {
        toggleAutoTriggerVisibility();
    });

    // ============ DYNAMIC TEMPLATE BUTTONS ============

    var buttonIndex = {{ count($buttons) }};
    var maxButtons = 3;

    // Get extra fields HTML based on type
    function getExtraFieldsHtml(type, idx) {
        if (type === 'urlButton') {
            return '<div class="form-group" style="margin-bottom:0;"><label>URL</label>' +
                '<input type="text" name="buttons[' + idx + '][url]" class="form-control" placeholder="https://example.com or {invoice_url}"></div>';
        } else if (type === 'callButton') {
            return '<div class="form-group" style="margin-bottom:0;"><label>Phone Number</label>' +
                '<input type="text" name="buttons[' + idx + '][phoneNumber]" class="form-control" placeholder="919876543210"></div>';
        } else if (type === 'quickReplyButton') {
            return '<div class="form-group" style="margin-bottom:0;"><label>Button ID</label>' +
                '<input type="text" name="buttons[' + idx + '][id]" class="form-control" placeholder="quick_reply_1"></div>';
        } else if (type === 'copyCodeButton') {
            return '<div class="form-group" style="margin-bottom:0;"><label>Code to Copy</label>' +
                '<input type="text" name="buttons[' + idx + '][copyCode]" class="form-control" placeholder="e.g., DISCOUNT20"></div>';
        }
        return '';
    }

    // Add new button row
    $('#add-template-button').on('click', function() {
        var currentCount = $('#template-buttons-container .template-button-row').length;
        if (currentCount >= maxButtons) {
            toastr.warning('Maximum ' + maxButtons + ' buttons allowed per message.');
            return;
        }

        var idx = buttonIndex++;
        var html = '<div class="template-button-row" data-index="' + idx + '">' +
            '<div class="row" style="margin-bottom:10px; padding:12px; background:#f9f9f9; border-radius:5px; border-left:3px solid #25D366;">' +
                '<div class="col-md-2"><div class="form-group" style="margin-bottom:0;"><label>Type</label>' +
                    '<select name="buttons[' + idx + '][type]" class="form-control btn-type-select">' +
                        '<option value="urlButton">🔗 URL Button</option>' +
                        '<option value="callButton">📞 Call Button</option>' +
                        '<option value="quickReplyButton">💬 Quick Reply</option>' +
                        '<option value="copyCodeButton">📋 Copy Code</option>' +
                    '</select></div></div>' +
                '<div class="col-md-3"><div class="form-group" style="margin-bottom:0;"><label>Button Text</label>' +
                    '<input type="text" name="buttons[' + idx + '][displayText]" class="form-control" placeholder="e.g., View Invoice"></div></div>' +
                '<div class="col-md-5 btn-extra-fields">' + getExtraFieldsHtml('urlButton', idx) + '</div>' +
                '<div class="col-md-2 text-center" style="padding-top:22px;">' +
                    '<button type="button" class="btn btn-danger btn-sm remove-button-row" title="Remove"><i class="fas fa-trash"></i></button> ' +
                    '<button type="button" class="btn btn-default btn-sm move-up-btn" title="Move Up"><i class="fas fa-arrow-up"></i></button> ' +
                    '<button type="button" class="btn btn-default btn-sm move-down-btn" title="Move Down"><i class="fas fa-arrow-down"></i></button>' +
                '</div>' +
            '</div></div>';

        $('#template-buttons-container').append(html);
        updateButtonCount();
    });

    // When type dropdown changes, swap extra fields
    $(document).on('change', '.btn-type-select', function() {
        var row = $(this).closest('.template-button-row');
        var idx = row.data('index');
        var type = $(this).val();
        row.find('.btn-extra-fields').html(getExtraFieldsHtml(type, idx));
    });

    // Remove button row
    $(document).on('click', '.remove-button-row', function() {
        $(this).closest('.template-button-row').fadeOut(200, function() {
            $(this).remove();
            updateButtonCount();
        });
    });

    // Move button up
    $(document).on('click', '.move-up-btn', function() {
        var row = $(this).closest('.template-button-row');
        var prev = row.prev('.template-button-row');
        if (prev.length) {
            row.insertBefore(prev);
        }
    });

    // Move button down
    $(document).on('click', '.move-down-btn', function() {
        var row = $(this).closest('.template-button-row');
        var next = row.next('.template-button-row');
        if (next.length) {
            row.insertAfter(next);
        }
    });

    function updateButtonCount() {
        var count = $('#template-buttons-container .template-button-row').length;
        if (count >= maxButtons) {
            $('#add-template-button').prop('disabled', true).addClass('disabled');
        } else {
            $('#add-template-button').prop('disabled', false).removeClass('disabled');
        }
    }
    updateButtonCount();

    // ============ WHATSAPP CONNECTION MANAGEMENT ============

    function setInstanceResult(msg, type) {
        var cls = type === 'success' ? 'text-success' : (type === 'warning' ? 'text-warning' : 'text-danger');
        var icon = type === 'success' ? 'fa-check-circle' : (type === 'warning' ? 'fa-exclamation-circle' : 'fa-times-circle');
        $('#instance_action_result').html('<i class="fas ' + icon + '"></i> <span class="' + cls + '">' + msg + '</span>');
    }

    $('#btn_create_instance').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Creating...');
        $('#instance_action_result').html('');

        $.ajax({
            url: "{{ route('whatsappnotification.instance_create') }}",
            method: 'POST',
            data: { _token: "{{ csrf_token() }}" },
            success: function(res) {
                if (res.success) {
                    setInstanceResult('Instance created! ID: <strong>' + res.instance_id + '</strong> — saved automatically. Now click <em>Get QR Code</em>.', 'success');
                    // Update the instance_id field on the page
                    $('input[name="instance_id"]').val(res.instance_id);
                } else {
                    setInstanceResult(res.message, 'danger');
                }
            },
            error: function(xhr) {
                setInstanceResult('Request failed: ' + xhr.statusText, 'danger');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fas fa-plus-circle"></i> Create Instance');
            }
        });
    });

    $('#btn_get_qrcode').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Fetching QR...');
        $('#instance_action_result').html('');
        $('#qrcode_container').hide();

        $.ajax({
            url: "{{ route('whatsappnotification.instance_qrcode') }}",
            method: 'POST',
            data: { _token: "{{ csrf_token() }}" },
            success: function(res) {
                if (res.success && res.data) {
                    var d = res.data;
                    // Try to find image: data.qrcode, data.qr, data.base64, data.image
                    var qrSrc = d.qrcode || d.qr || d.base64 || d.image || null;
                    if (qrSrc) {
                        // Prepend data: prefix if it looks like base64 without header
                        if (qrSrc.indexOf('http') !== 0 && qrSrc.indexOf('data:') !== 0) {
                            qrSrc = 'data:image/png;base64,' + qrSrc;
                        }
                        $('#qrcode_image').attr('src', qrSrc).show();
                        $('#qrcode_text').hide();
                    } else if (d.status === 'connected') {
                        setInstanceResult('WhatsApp is already connected!', 'success');
                        $('#qrcode_container').hide();
                        return;
                    } else {
                        // Show raw response if no image found
                        $('#qrcode_image').hide();
                        $('#qrcode_text').text(JSON.stringify(d)).show();
                    }
                    $('#qrcode_container').show();
                    setInstanceResult('Scan the QR code with your WhatsApp app (Settings → Linked Devices)', 'warning');
                } else {
                    setInstanceResult(res.message || 'Failed to get QR code', 'danger');
                }
            },
            error: function(xhr) {
                setInstanceResult('Request failed: ' + xhr.statusText, 'danger');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fas fa-qrcode"></i> Get QR Code');
            }
        });
    });

    $('#btn_reconnect').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Reconnecting...');
        $('#instance_action_result').html('');

        $.ajax({
            url: "{{ route('whatsappnotification.instance_reconnect') }}",
            method: 'POST',
            data: { _token: "{{ csrf_token() }}" },
            success: function(res) {
                if (res.success) {
                    setInstanceResult(res.message, 'success');
                } else {
                    setInstanceResult(res.message, 'danger');
                }
            },
            error: function(xhr) {
                setInstanceResult('Request failed: ' + xhr.statusText, 'danger');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fas fa-sync-alt"></i> Reconnect');
            }
        });
    });

    // ============ TEST NOTIFICATION ============

    // Send test notification
    $('#send_test_btn').on('click', function() {
        var number = $('#test_number').val();
        var btn = $(this);
        var resultDiv = $('#test_result');

        if (!number) {
            resultDiv.html('<span class="text-danger">Please enter a phone number</span>');
            return;
        }

        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Sending...');
        resultDiv.html('');

        $.ajax({
            url: "{{ route('whatsappnotification.send_test') }}",
            method: 'POST',
            data: {
                test_number: number,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.success) {
                    resultDiv.html('<span class="text-success"><i class="fas fa-check"></i> ' + response.message + '</span>');
                } else {
                    resultDiv.html('<span class="text-danger"><i class="fas fa-times"></i> ' + response.message + '</span>');
                }
            },
            error: function(xhr) {
                resultDiv.html('<span class="text-danger"><i class="fas fa-times"></i> Connection error</span>');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fab fa-whatsapp"></i> {{ __("whatsappnotification::lang.send_test") }}');
            }
        });
    });
});
</script>
@endsection