@extends('layouts.app')

@section('title', __('whatsappnotification::lang.whatsapp_notification') . ' - ' . ($template ? __('whatsappnotification::lang.edit_template') : __('whatsappnotification::lang.add_template')))

@section('content')

@component('components.widget', ['class' => 'box-primary'])
    @slot('title')
        <i class="fab fa-whatsapp" style="color: #25D366;"></i>
        {{ $template ? __('whatsappnotification::lang.edit_template') : __('whatsappnotification::lang.add_template') }}
    @endslot
    @slot('tool')
        <a href="{{ route('whatsappnotification.templates.index') }}" class="btn btn-default btn-sm">
            <i class="fas fa-arrow-left"></i> {{ __('whatsappnotification::lang.back_to_templates') }}
        </a>
    @endslot

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <style>
        .wa-template-helper {
            border: 1px solid #bbf7d0;
            border-radius: 16px;
            background: linear-gradient(135deg, #f0fdf4, #ecfeff);
            padding: 16px;
            margin-bottom: 18px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
        }
        .wa-template-helper h4 { margin: 0 0 8px; color: #075e54; font-weight: 900; }
        .wa-template-helper code { background: #dcfce7; color: #166534; border-radius: 6px; padding: 2px 6px; }
    </style>

    <div class="wa-template-helper">
        <h4><i class="fas fa-key"></i> Quick Template Presets</h4>
        <p>
            Choose a preset, then select your provider. For Official Meta Cloud API, click Load templates and choose your approved Meta template.
        </p>
        <button type="button" class="btn btn-success btn-sm" id="use_b2b_otp_preset">
            <i class="fas fa-magic"></i> Use B2B Login OTP Preset
        </button>
        <button type="button" class="btn btn-primary btn-sm use_meta_preset" data-preset="new_sale">
            <i class="fas fa-shopping-cart"></i> New Sale
        </button>
        <button type="button" class="btn btn-warning btn-sm use_meta_preset" data-preset="abandoned_cart">
            <i class="fas fa-cart-arrow-down"></i> Abandoned Cart
        </button>
        <button type="button" class="btn btn-danger btn-sm use_meta_preset" data-preset="due_reminder">
            <i class="fas fa-bell"></i> Due Reminder
        </button>
    </div>

    @php
        $form_action = $template
            ? route('whatsappnotification.templates.update', $template->id)
            : route('whatsappnotification.templates.store');
        $buttons = $template ? ($template->template_buttons ?? []) : [];
        $trigger_type = old('trigger_type', $template->trigger_type ?? 'new_sale');
        $provider     = old('provider', $template->provider ?? 'unofficial');
        $meta_body_params = old('meta_body_params',
            (isset($template) && !empty($template->meta_components_mapping['body_params']))
                ? implode("\n", $template->meta_components_mapping['body_params'])
                : ''
        );
        $meta_header_media_url = old('meta_header_media_url',
            (isset($template) && !empty($template->meta_components_mapping['header_media_url']))
                ? $template->meta_components_mapping['header_media_url']
                : ''
        );
    @endphp

    {!! Form::open(['url' => $form_action, 'method' => $template ? 'PUT' : 'POST']) !!}

    {{-- Basic Info --}}
    <div class="row">
        <div class="col-md-12">
            <h4 class="text-primary"><i class="fas fa-info-circle"></i> {{ __('whatsappnotification::lang.template_info') }}</h4>
            <hr>
        </div>
    </div>

    <div class="row">
        <div class="col-md-5">
            <div class="form-group">
                {!! Form::label('name', __('whatsappnotification::lang.template_name') . ':') !!}
                {!! Form::text('name', old('name', $template->name ?? ''), ['class' => 'form-control', 'placeholder' => 'e.g. Payment Reminder - Overdue 7 Days', 'required' => true]) !!}
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                {!! Form::label('trigger_type', __('whatsappnotification::lang.trigger_type') . ':') !!}
                {!! Form::select('trigger_type', $trigger_labels, old('trigger_type', $template->trigger_type ?? 'new_sale'), ['class' => 'form-control', 'id' => 'trigger_type_select']) !!}
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>&nbsp;</label><br>
                <div class="checkbox" style="margin-top: 6px;">
                    <label>
                        {!! Form::checkbox('is_active', 1, old('is_active', $template->is_active ?? true), ['class' => 'input-icheck']) !!}
                        <strong>{{ __('whatsappnotification::lang.active') }}</strong>
                    </label>
                </div>
            </div>
        </div>
    </div>

    {{-- Provider selection: unofficial (default) or Meta Official Cloud API --}}
    <div class="row">
        <div class="col-md-5">
            <div class="form-group">
                {!! Form::label('provider', 'Send via:') !!}
                {!! Form::select('provider',
                    ['unofficial' => 'Unofficial (personal WhatsApp / QR-paired)', 'meta_official' => 'Meta Official Cloud API'],
                    $provider,
                    ['class' => 'form-control', 'id' => 'provider_select']) !!}
                <p class="help-block">Unofficial = free-form text via QR-paired instance. Meta = billable, template-only, higher deliverability.</p>
            </div>
        </div>
    </div>

    {{-- Meta template config — visible only when provider = meta_official --}}
    <div id="meta-section" style="{{ $provider === 'meta_official' ? '' : 'display:none;' }}">
        <div class="row">
            <div class="col-md-12">
                <h4 class="text-primary"><i class="fab fa-meta"></i> Meta Official Template</h4>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5">
                <div class="form-group">
                    {!! Form::label('meta_template_name', 'Approved Meta Template:') !!}
                    <select id="meta_template_select" class="form-control">
                        <option value="">-- click to load --</option>
                    </select>
                    <input type="hidden" name="meta_template_name" id="meta_template_name_hidden"
                        value="{{ old('meta_template_name', $template->meta_template_name ?? '') }}">
                    <input type="hidden" name="meta_language" id="meta_language_hidden"
                        value="{{ old('meta_language', $template->meta_language ?? '') }}">
                    <p class="help-block">
                        <button type="button" id="load_meta_templates_btn" class="btn btn-xs btn-default">
                            <i class="fas fa-sync"></i> Load templates
                        </button>
                        Loads only <strong>approved</strong> templates from your Meta WABA. Save Meta API key in Settings first.
                    </p>
                    @if(!empty($template->meta_template_name))
                        <p class="text-muted" style="margin-top:4px;"><em>Currently: {{ $template->meta_template_name }} ({{ $template->meta_language }})</em></p>
                    @endif
                </div>
            </div>
            <div class="col-md-7">
                <div class="form-group">
                    {!! Form::label('meta_body_params', 'Body Parameters (one per line, in order):') !!}
                    {!! Form::textarea('meta_body_params', $meta_body_params,
                        ['class' => 'form-control', 'rows' => 4, 'placeholder' => "{customer_name}\n{invoice_no}\n{total_amount}"]) !!}
                    <p class="help-block">
                        Each line maps to one Meta variable position (@{{1}}, @{{2}}, …) in your template's body, in order. Use any placeholder tag from the list below (e.g. <code>{customer_name}</code>, <code>{invoice_no}</code>).
                    </p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    {!! Form::label('meta_header_media_url', 'Header Media URL (optional):') !!}
                    {!! Form::text('meta_header_media_url', $meta_header_media_url,
                        ['class' => 'form-control', 'placeholder' => 'e.g. {invoice_pdf_url} — leave blank if template has no media header']) !!}
                    <p class="help-block">Used only if your Meta template has an image/video/document header. Supports placeholders like <code>{invoice_pdf_url}</code>.</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Payment Reminder Settings (shown only when trigger_type = payment_reminder) --}}
    <div id="payment-reminder-section" style="{{ $trigger_type === 'payment_reminder' ? '' : 'display:none;' }}">
        <div class="row">
            <div class="col-md-12">
                <h4 class="text-primary"><i class="fas fa-bell"></i> {{ __('whatsappnotification::lang.payment_reminder_settings') }}</h4>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('reminder_days_overdue', __('whatsappnotification::lang.reminder_days_overdue') . ':') !!}
                    {!! Form::number('reminder_days_overdue', old('reminder_days_overdue', $template->reminder_days_overdue ?? 0), ['class' => 'form-control', 'min' => 0, 'placeholder' => '0 = any outstanding balance']) !!}
                    <p class="help-block">{{ __('whatsappnotification::lang.reminder_days_overdue_help') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('reminder_send_time', __('whatsappnotification::lang.reminder_send_time') . ':') !!}
                    {!! Form::time('reminder_send_time', old('reminder_send_time', $template->reminder_send_time ?? '09:00'), ['class' => 'form-control']) !!}
                    <p class="help-block">{{ __('whatsappnotification::lang.reminder_send_time_help') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="alert alert-warning" style="margin-top: 25px; font-size: 13px;">
                    <i class="fas fa-info-circle"></i>
                    {{ __('whatsappnotification::lang.payment_reminder_cron_note') }}
                </div>
            </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', old('message_title', $template->message_title ?? ''), ['class' => 'form-control', 'rows' => 5, 'placeholder' => 'Dear {customer_name}, your invoice #{invoice_no} has an outstanding due of ₹{total_due}.']) !!}
            </div>
            <div class="form-group">
                {!! Form::label('message_footer', __('whatsappnotification::lang.message_footer') . ':') !!}
                {!! Form::text('message_footer', old('message_footer', $template->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>
                <div style="font-family: monospace; font-size: 11px; line-height: 2;">
                    <code>{invoice_no}</code> — Invoice No<br>
                    <code>{invoice_url}</code> — Invoice 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> — Mobile<br>
                    <code>{business_name}</code> — Business Name<br>
                    <code>{transaction_date}</code> — Date<br>
                    <code>{payment_status}</code> — Payment Status<br>
                    <strong class="text-danger" id="reminder-tags-hint" style="{{ $trigger_type === 'payment_reminder' ? '' : 'display:none;' }}">
                        — Payment Reminder Tags —<br>
                    </strong>
                    <span id="reminder-tags" style="{{ $trigger_type === 'payment_reminder' ? '' : 'display:none;' }}">
                        <code>{overdue_days}</code> — Days Overdue<br>
                        <code>{due_date}</code> — Due Date<br>
                    </span>
                </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>

    <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="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"><i class="fas fa-trash"></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;">Max 3 buttons per message</span>
        </div>
    </div>

    <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>
            <a href="{{ route('whatsappnotification.templates.index') }}" class="btn btn-default btn-lg">
                {{ __('lang_v1.cancel') }}
            </a>
        </div>
    </div>

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

@endcomponent
@stop

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

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

    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="DISCOUNT20"></div>';
        }
        return '';
    }

    $('#add-template-button').on('click', function() {
        if ($('#template-buttons-container .template-button-row').length >= maxButtons) {
            toastr.warning('Maximum ' + maxButtons + ' buttons allowed.');
            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"><i class="fas fa-trash"></i></button>' +
                '</div></div></div>';
        $('#template-buttons-container').append(html);
    });

    $(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));
    });

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

    // Show/hide payment reminder section
    $('#trigger_type_select').on('change', function() {
        var val = $(this).val();
        if (val === 'payment_reminder') {
            $('#payment-reminder-section').slideDown(200);
            $('#reminder-tags, #reminder-tags-hint').show();
        } else {
            $('#payment-reminder-section').slideUp(200);
            $('#reminder-tags, #reminder-tags-hint').hide();
        }
    });

    // -------- Meta Official provider toggle + template loader --------
    $('#provider_select').on('change', function() {
        if ($(this).val() === 'meta_official') {
            $('#meta-section').slideDown(200);
        } else {
            $('#meta-section').slideUp(200);
        }
    });

    // AJAX-load approved Meta templates and populate the dropdown.
    $('#load_meta_templates_btn').on('click', function() {
        var $btn = $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Loading...');
        var $select = $('#meta_template_select').empty().append(new Option('Loading...', ''));
        $.getJSON("{{ route('whatsappnotification.meta_templates') }}")
            .done(function(resp) {
                $select.empty();
                if (!resp.success) {
                    toastr.error(resp.message || 'Failed to load Meta templates');
                    $select.append(new Option('-- error --', ''));
                    return;
                }
                if (!resp.data || !resp.data.length) {
                    $select.append(new Option('-- no approved templates found --', ''));
                    return;
                }
                $select.append(new Option('-- select --', ''));
                var currentName = $('#meta_template_name_hidden').val();
                var currentLang = $('#meta_language_hidden').val();
                resp.data.forEach(function(t) {
                    var label = t.name + ' (' + t.language + ', ' + (t.category || 'unknown') + ')';
                    var opt = new Option(label, t.name + '|' + t.language);
                    if (t.name === currentName && t.language === currentLang) opt.selected = true;
                    $select.append(opt);
                });
            })
            .fail(function(xhr) {
                toastr.error('Request failed: HTTP ' + xhr.status);
                $select.empty().append(new Option('-- error --', ''));
            })
            .always(function() {
                $btn.prop('disabled', false).html('<i class="fas fa-sync"></i> Reload templates');
            });
    });

    $('#meta_template_select').on('change', function() {
        var val = $(this).val() || '';
        var parts = val.split('|');
        $('#meta_template_name_hidden').val(parts[0] || '');
        $('#meta_language_hidden').val(parts[1] || '');
    });

    $('#use_b2b_otp_preset').on('click', function() {
        $('input[name="name"]').val('B2B Login OTP');
        $('#trigger_type_select').val('manual').trigger('change');
        $('#provider_select').val('meta_official').trigger('change');
        $('textarea[name="meta_body_params"]').val('{otp}');
        $('textarea[name="message_title"]').val('Your OTP is {otp}. This code is valid for 10 minutes.');
        $('input[name="message_footer"]').val('B2B Portal Login');
        toastr.success('B2B Login OTP preset applied. Now load/select your approved Meta template and save.');
    });

    $('.use_meta_preset').on('click', function() {
        var preset = $(this).data('preset');
        $('#provider_select').val('meta_official').trigger('change');

        if (preset === 'new_sale') {
            $('input[name="name"]').val('New Sale - Meta');
            $('#trigger_type_select').val('new_sale').trigger('change');
            $('textarea[name="meta_body_params"]').val('{contact_name}\n{invoice_no}\n{total_amount}');
            $('textarea[name="message_title"]').val('New sale message for invoice {invoice_no}.');
            $('input[name="message_footer"]').val('{business_name}');
        } else if (preset === 'abandoned_cart') {
            $('input[name="name"]').val('Abandoned Cart - Meta');
            $('#trigger_type_select').val('manual').trigger('change');
            $('textarea[name="meta_body_params"]').val('{contact_name}\n{business_name}');
            $('textarea[name="message_title"]').val('Reminder for abandoned B2B cart.');
            $('input[name="message_footer"]').val('{business_name}');
            toastr.info('Abandoned cart sending needs its trigger job/API wired separately; this preset prepares the Meta template row.');
            return;
        } else if (preset === 'due_reminder') {
            $('input[name="name"]').val('Due Reminder - Meta');
            $('#trigger_type_select').val('payment_reminder').trigger('change');
            $('textarea[name="meta_body_params"]').val('{contact_name}\n{total_due}\n{due_date}');
            $('textarea[name="message_title"]').val('Due reminder for {contact_name}.');
            $('input[name="message_footer"]').val('{business_name}');
        }

        toastr.success('Preset applied. Load/select your approved Meta template and save.');
    });

});
</script>
@endsection