@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-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);
    }
    .wa-channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 18px; }
    .wa-channel-card {
        cursor: pointer;
        border: 2px solid #e5eaf2;
        border-radius: 16px;
        padding: 16px;
        background: #fff;
        transition: all .15s ease;
        min-height: 138px;
    }
    .wa-channel-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,23,42,.08); }
    .wa-channel-card.active { border-color: #25d366; background: linear-gradient(135deg, #f0fdf4, #fff); }
    .wa-channel-card h4 { margin: 0 0 8px; font-weight: 900; color: #111827; }
    .wa-channel-card p { color: #667085; margin: 0; }
    .wa-channel-section {
        border: 1px solid #e5eaf2;
        border-radius: 16px;
        background: #fff;
        padding: 18px;
        margin-bottom: 18px;
        box-shadow: 0 10px 26px rgba(15,23,42,.06);
    }
    .wa-flow-list { margin: 10px 0 0; padding-left: 18px; color: #475467; }
    .wa-flow-list li { margin-bottom: 5px; }
</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

    @php
        $selected_channel = !empty($settings->meta_api_key) || !empty($settings->meta_connection_id) ? 'meta_official' : 'unofficial';
    @endphp

    <div class="wa-channel-grid">
        <label class="wa-channel-card {{ $selected_channel === 'meta_official' ? 'active' : '' }}" data-channel-card="meta_official">
            <input type="radio" name="wa_channel_choice" value="meta_official" class="wa-channel-choice" {{ $selected_channel === 'meta_official' ? 'checked' : '' }}>
            <h4><i class="fab fa-meta"></i> Official Meta Cloud API</h4>
            <p>Use Big Brains Flow API key, Meta connection ID, and approved templates. Best for B2B OTP, new sale, abandoned cart, due reminders, and compliant automation.</p>
        </label>
        <label class="wa-channel-card {{ $selected_channel === 'unofficial' ? 'active' : '' }}" data-channel-card="unofficial">
            <input type="radio" name="wa_channel_choice" value="unofficial" class="wa-channel-choice" {{ $selected_channel === 'unofficial' ? 'checked' : '' }}>
            <h4><i class="fab fa-whatsapp"></i> Unofficial WhatsApp / QR</h4>
            <p>Use instance ID, access token, and QR code pairing. Easier setup, but less suitable for high-volume or template-compliant automation.</p>
        </label>
    </div>

    {{-- WhatsApp Connection Panel --}}
    <div class="row wa-unofficial-section" 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']) !!}

    {{-- Compatibility flags for the legacy sale listener.
        Template activation now controls the actual automation/message setup from Manage Templates. --}}
    <input type="hidden" name="notify_on_new_sale" value="1">
    @if(!empty($settings->notify_on_sale_update))
        <input type="hidden" name="notify_on_sale_update" value="1">
    @endif

    {{-- API Configuration --}}
    <div class="row">
        <div class="col-md-12">
            <h4 class="text-primary"><i class="fas fa-cog"></i> Channel Configuration</h4>
            <hr>
        </div>
    </div>

    <div class="wa-channel-section">
        <h4><i class="fas fa-link"></i> Common API Base URL</h4>
        <p class="help-block">Keep this as your Big Brains Flow / MultiCRM API URL. Both official and unofficial channels use it as the base host.</p>
        <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>
    </div>

    <div class="wa-channel-section wa-unofficial-section">
        <h4><i class="fab fa-whatsapp"></i> Unofficial WhatsApp / QR Setup</h4>
        <p class="help-block">Use this only if you selected Unofficial WhatsApp. Create an instance, scan QR, then use templates with provider “Unofficial”.</p>
        <ol class="wa-flow-list">
            <li>Enter Access Token.</li>
            <li>Click Create Instance if you do not have Instance ID.</li>
            <li>Click Get QR Code and scan from WhatsApp Linked Devices.</li>
            <li>Create templates using provider “Unofficial”.</li>
        </ol>
        <div class="row">
        <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 wa-unofficial-input', '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 wa-unofficial-input', 'required', 'placeholder' => 'Your Access Token']) !!}
            </div>
        </div>
        </div>
    </div>

    <div class="wa-channel-section wa-meta-section">
        <h4><i class="fab fa-meta"></i> Official Meta Cloud API Setup</h4>
        <p class="help-block">
            Use this if you selected Official Meta Cloud API. Enter your Big Brains Flow / MultiCRM Meta API key and Meta connection ID, then create active Meta templates for B2B Login OTP, New Sale, Abandoned Cart, and Due Reminders.
        </p>
        <ol class="wa-flow-list">
            <li>Enter Meta API Key from Big Brains Flow / MultiCRM API Keys.</li>
            <li>Enter Meta Connection ID from Connections page.</li>
            <li>Go to Manage Templates and create template rows with provider “Meta Official Cloud API”.</li>
            <li>For B2B OTP, create template name <strong>B2B Login OTP</strong> and body params <code>{otp}</code>.</li>
        </ol>
        <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 wa-meta-input', '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 wa-meta-input', 'placeholder' => 'e.g. 12']) !!}
            </div>
        </div>
        </div>
    </div>

    <div class="row wa-unofficial-section">
        <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 wa-unofficial-input']) !!}
            </div>
        </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>

    <div class="alert alert-info">
        <i class="fas fa-layer-group"></i>
        Message content, buttons, tags, and trigger-specific automation are now managed from
        <a href="{{ route('whatsappnotification.templates.index') }}" class="alert-link">Manage Templates</a>.
    </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() {

    // ============ CHANNEL SELECTOR: OFFICIAL META OR UNOFFICIAL QR ============
    function applyWhatsappChannel() {
        var channel = $('.wa-channel-choice:checked').val() || 'unofficial';
        $('[data-channel-card]').removeClass('active');
        $('[data-channel-card="' + channel + '"]').addClass('active');

        if (channel === 'meta_official') {
            $('.wa-meta-section').slideDown(180);
            $('.wa-unofficial-section').slideUp(180);
            $('.wa-meta-input').prop('disabled', false);
            $('.wa-unofficial-input').prop('disabled', true).prop('required', false);
        } else {
            $('.wa-meta-section').slideUp(180);
            $('.wa-unofficial-section').slideDown(180);
            $('.wa-meta-input').prop('disabled', true);
            $('.wa-unofficial-input').prop('disabled', false);
            $('input[name="instance_id"], input[name="access_token"]').prop('required', true);
        }
    }

    applyWhatsappChannel();
    $('.wa-channel-choice').on('change', applyWhatsappChannel);
    $('.wa-channel-card').on('click', function() {
        $(this).find('.wa-channel-choice').prop('checked', true).trigger('change');
    });

    // ============ 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