@extends('layouts.app')

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

@section('content')

<style>
    .wa-template-hero {
        background: linear-gradient(135deg, #075e54, #128c7e 55%, #25d366);
        color: #fff;
        border-radius: 18px;
        padding: 22px;
        margin-bottom: 18px;
        box-shadow: 0 18px 40px rgba(7, 94, 84, .18);
    }
    .wa-template-hero h3 { margin: 0; font-weight: 900; }
    .wa-template-hero p { margin: 7px 0 0; color: rgba(255,255,255,.82); }
    .wa-template-pill { display: inline-block; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 800; }
    .wa-template-pill.meta { background: #eef2ff; color: #4338ca; }
    .wa-template-pill.b2b { background: #dcfce7; color: #166534; }
</style>

<div class="wa-template-hero">
    <h3><i class="fas fa-layer-group"></i> WhatsApp Templates</h3>
    <p>Manage POS notifications, payment reminders, manual sends, and B2B login OTP templates from one place.</p>
</div>

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

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

    @if($templates->isEmpty())
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i>
            {{ __('whatsappnotification::lang.no_templates_yet') }}
            <a href="{{ route('whatsappnotification.templates.create') }}" class="alert-link">
                {{ __('whatsappnotification::lang.create_first_template') }}
            </a>
        </div>
    @else
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>{{ __('whatsappnotification::lang.template_name') }}</th>
                        <th>{{ __('whatsappnotification::lang.trigger_type') }}</th>
                        <th>{{ __('whatsappnotification::lang.reminder_days') }}</th>
                        <th>{{ __('whatsappnotification::lang.send_time') }}</th>
                        <th>{{ __('whatsappnotification::lang.status') }}</th>
                        <th>{{ __('lang_v1.action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($templates as $template)
                    <tr>
                        <td>
                            <strong>{{ $template->name }}</strong>
                            @if(in_array($template->name, ['B2B Login OTP', 'b2b_login_otp']))
                                <span class="wa-template-pill b2b">B2B OTP</span>
                            @endif
                            @if(($template->provider ?? 'unofficial') === 'meta_official')
                                <span class="wa-template-pill meta">Meta Official</span>
                            @endif
                            @if($template->message_title)
                                <br><small class="text-muted">{{ Str::limit($template->message_title, 60) }}</small>
                            @endif
                            @if(!empty($template->meta_template_name))
                                <br><small class="text-muted">Meta: {{ $template->meta_template_name }} / {{ $template->meta_language }}</small>
                            @endif
                        </td>
                        <td>
                            @php
                                $badge_class = [
                                    'new_sale'         => 'success',
                                    'sale_update'      => 'warning',
                                    'payment_reminder' => 'danger',
                                    'manual'           => 'info',
                                ][$template->trigger_type] ?? 'default';
                            @endphp
                            <span class="label label-{{ $badge_class }}">
                                {{ $trigger_labels[$template->trigger_type] ?? $template->trigger_type }}
                            </span>
                        </td>
                        <td>
                            @if($template->trigger_type === 'payment_reminder')
                                @if(!is_null($template->reminder_days_overdue))
                                    {{ $template->reminder_days_overdue }} {{ __('whatsappnotification::lang.days') }}
                                @else
                                    <span class="text-muted">{{ __('whatsappnotification::lang.any_due') }}</span>
                                @endif
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>
                            @if($template->trigger_type === 'payment_reminder' && $template->reminder_send_time)
                                <i class="fas fa-clock"></i> {{ \Carbon\Carbon::createFromTimeString($template->reminder_send_time)->format('h:i A') }}
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="label label-{{ $template->is_active ? 'success' : 'default' }} toggle-status"
                                  data-id="{{ $template->id }}"
                                  style="cursor: pointer; font-size: 12px;"
                                  title="Click to toggle">
                                {{ $template->is_active ? __('lang_v1.active') : __('lang_v1.inactive') }}
                            </span>
                        </td>
                        <td>
                            <a href="{{ route('whatsappnotification.templates.edit', $template->id) }}"
                               class="btn btn-xs btn-primary">
                                <i class="fas fa-edit"></i> {{ __('lang_v1.edit') }}
                            </a>
                            <button type="button" class="btn btn-xs btn-danger delete-template"
                                    data-id="{{ $template->id }}"
                                    data-url="{{ route('whatsappnotification.templates.destroy', $template->id) }}"
                                    data-name="{{ $template->name }}">
                                <i class="fas fa-trash"></i> {{ __('lang_v1.delete') }}
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

    {{-- Delete form (hidden) --}}
    <form id="delete-template-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>

@endcomponent
@stop

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

    // Toggle active status
    $(document).on('click', '.toggle-status', function() {
        var $badge = $(this);
        var id = $badge.data('id');

        $.ajax({
            url: '/whatsapp-notification/templates/' + id + '/toggle',
            method: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            success: function(response) {
                if (response.success) {
                    if (response.is_active) {
                        $badge.removeClass('label-default').addClass('label-success').text('{{ __("lang_v1.active") }}');
                    } else {
                        $badge.removeClass('label-success').addClass('label-default').text('{{ __("lang_v1.inactive") }}');
                    }
                    toastr.success('{{ __("whatsappnotification::lang.template_status_updated") }}');
                }
            },
            error: function() {
                toastr.error('Error updating status');
            }
        });
    });

    // Delete template
    $(document).on('click', '.delete-template', function() {
        var id = $(this).data('id');
        var name = $(this).data('name');
        var url = $(this).data('url');

        if (!confirm('Delete template "' + name + '"? This cannot be undone.')) {
            return;
        }

        var $form = $('#delete-template-form');
        $form.attr('action', url).submit();
    });
});
</script>
@endsection