@extends('layouts/contentLayoutMaster')

@section('title', __('WhatsApp Templates'))

@section('content')

    <div class="content-body">

        @include('customer.WhatsAppTemplates._connect_account')

        {{-- Templates Table --}}
        <div class="card mt-2">
            <div class="card-header d-flex align-items-center flex-wrap">
                <h4 class="card-title me-auto mb-0">
                    {{ __('locale.whatsapp_templates.templates') }}
                    @if($gatewayId)
                        <small class="text-muted ms-2">— filtered by gateway</small>
                    @endif
                </h4>
                @if($hasOwnAccount && $ownGateway)
                    <form action="{{ route('customer.whatsapp_templates.sync') }}"
                          method="POST"
                          class="sync-templates-form">
                        @csrf
                        <input type="hidden" name="gateway_id" value="{{ $ownGateway->id }}">
                        <button type="submit" class="btn btn-primary">
                            <i data-feather="refresh-cw" class="me-25"></i>
                            {{ __('locale.whatsapp_composer.sync_templates') }}
                        </button>
                    </form>
                @endif
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered mb-0">
                        <thead class="table-light">
                        <tr>
                            <th>Name</th>
                            <th>Language</th>
                            <th>Category</th>
                            <th>Status</th>
                            <th>Variables</th>
                            <th>Last Synced</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($templates as $template)
                            <tr>
                                <td>
                                    <strong>{{ $template->template_name }}</strong>
                                    @if($template->body_text)
                                        <br><small class="text-muted">{{ Str::limit($template->body_text, 60) }}</small>
                                    @endif
                                </td>
                                <td><code>{{ $template->language }}</code></td>
                                <td>
                                    <span class="badge bg-secondary">{{ $template->category->label() }}</span>
                                </td>
                                <td>
                                    <span class="{{ $template->status->badgeClass() }}">
                                        {{ $template->status->label() }}
                                    </span>
                                </td>
                                <td class="text-center">{{ $template->variable_count }}</td>
                                <td>
                                    {{ $template->last_synced_at ? $template->last_synced_at->diffForHumans() : '—' }}
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-info text-white view-template"
                                            data-id="{{ $template->id }}"
                                            data-url="{{ route('customer.whatsapp_templates.show', $template->id) }}"
                                            data-variable-names-url="{{ route('customer.whatsapp_templates.update_variable_names', $template->id) }}">
                                        <i data-feather="eye"></i>
                                    </button>
                                    @if($hasOwnAccount && (int) $template->user_id === (int) auth()->id())
                                    <button type="button" class="btn btn-sm text-white btn-danger delete-template"
                                            data-url="{{ route('customer.whatsapp_templates.destroy', $template->id) }}">
                                        <i data-feather="trash-2"></i>
                                    </button>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-4 text-muted">
                                    {{ __('locale.whatsapp_templates.empty_customer') }}
                                </td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    {{-- Template Detail Modal --}}
    <div class="modal fade" id="templateDetailModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Template Details &amp; Variable Names</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="templateDetailBody">
                    <div class="text-center py-4"><div class="spinner-border"></div></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    @if($hasOwnAccount)
                    <button type="button" class="btn btn-primary d-none" id="saveVariableNames">Save Variable Names</button>
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection

@section('page-script')
<script>
    let currentTemplateId = null;
    let currentVariableNamesUrl = null;
    const csrfToken = @json(csrf_token());
    const swalButtons = {
        confirmButton: 'btn btn-primary',
        cancelButton: 'btn btn-outline-danger ms-1'
    };

    function showTemplateToast(type, message) {
        const titles = {
            success: @json(__('locale.labels.success').'!'),
            warning: @json(__('locale.labels.warning').'!'),
            error: @json(__('locale.labels.ops').'..!!'),
            info: @json(__('locale.labels.information').'!'),
        };

        toastr[type](message, titles[type] || titles.success, {
            closeButton: true,
            positionClass: 'toast-top-right',
            progressBar: true,
            newestOnTop: true,
            rtl: isRtl
        });
    }

    $('.sync-templates-form').on('submit', function (event) {
        event.preventDefault();

        const form = this;
        const $submitButton = $(form).find('button[type="submit"]');

        $submitButton.prop('disabled', true);

        $.ajax({
            url: form.action,
            type: 'POST',
            data: $(form).serialize(),
            dataType: 'json',
            headers: {
                Accept: 'application/json'
            }
        }).done(function (resp) {
            window.location.href = resp.redirect_url;
        }).fail(function (xhr) {
            const message = xhr.responseJSON?.message
                || Object.values(xhr.responseJSON?.errors || {})[0]?.[0]
                || 'Request failed. Please try again.';

            showTemplateToast('error', message);
        }).always(function () {
            $submitButton.prop('disabled', false);
        });
    });

    function templateModal() {
        const el = document.getElementById('templateDetailModal');
        if (window.bootstrap && bootstrap.Modal) {
            return bootstrap.Modal.getOrCreateInstance(el);
        }
        return {
            show: function () { $(el).modal('show'); },
            hide: function () { $(el).modal('hide'); },
        };
    }

    $(document).on('click', '.view-template', function (event) {
        event.preventDefault();
        event.stopPropagation();

        currentTemplateId = $(this).attr('data-id');
        currentVariableNamesUrl = $(this).attr('data-variable-names-url');
        $('#templateDetailBody').html('<div class="text-center py-4"><div class="spinner-border"></div></div>');
        $('#saveVariableNames').addClass('d-none');
        templateModal().show();

        $.ajax({
            url: $(this).attr('data-url'),
            type: 'GET',
            dataType: 'json',
            headers: {
                Accept: 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        }).done(function (resp) {
            if (resp.status !== 'success') {
                $('#templateDetailBody').html('<p class="text-danger">Failed to load template.</p>');
                return;
            }

            const d = resp.data;
            const escapeHtml = value => $('<div>').text(value ?? '').html();
            let html = `
                <div class="row mb-3">
                    <div class="col-md-6"><strong>Name:</strong> ${escapeHtml(d.template_name)}</div>
                    <div class="col-md-3"><strong>Language:</strong> <code>${escapeHtml(d.language)}</code></div>
                    <div class="col-md-3"><strong>Category:</strong> ${escapeHtml(d.category)}</div>
                </div>`;

            if (d.header_text) html += `<p><strong>Header:</strong> ${escapeHtml(d.header_text)}</p>`;
            if (d.body_text) html += `<p><strong>Body:</strong></p><pre class="bg-light p-2">${escapeHtml(d.body_text)}</pre>`;
            if (d.footer_text) html += `<p><strong>Footer:</strong> ${escapeHtml(d.footer_text)}</p>`;

            if (d.variables && d.variables.length > 0) {
                html += `<hr><h6>Variable Definitions (set friendly names for your team)</h6>
                    <form id="variableNamesForm">
                    <table class="table table-sm table-bordered">
                    <thead><tr><th>Component</th><th>Position</th><th>Example</th><th>Name / Label</th></tr></thead><tbody>`;

                d.variables.forEach(v => {
                    const placeholder = '\x7b\x7b' + v.variable_position + '\x7d\x7d';
                    html += '<tr>'
                        + '<td><span class="badge bg-secondary">' + escapeHtml(v.component_type) + '</span></td>'
                        + '<td><code>' + escapeHtml(placeholder) + '</code></td>'
                        + '<td>' + escapeHtml(v.example_value || '—') + '</td>'
                        + '<td><input type="text" class="form-control form-control-sm"'
                        +    ' name="variable_names[' + v.id + ']"'
                        +    ' value="' + escapeHtml(v.variable_name || '') + '"'
                        +    ' placeholder="e.g. otp, customer_name, minutes"></td>'
                        + '</tr>';
                });

                html += `</tbody></table></form>`;
            } else {
                html += `<p class="text-muted">No variables defined for this template.</p>`;
            }

            $('#templateDetailBody').html(html);
            $('#saveVariableNames').toggleClass('d-none', !d.can_manage);
        }).fail(function (xhr) {
            const message = xhr.responseJSON?.message || 'Failed to load template details.';
            $('#templateDetailBody').html($('<p>', { class: 'text-danger', text: message }));
        });
    });

    $('#saveVariableNames').on('click', function () {
        if (!currentTemplateId || !currentVariableNamesUrl) return;

        const formData = $('#variableNamesForm').serialize();

        $.ajax({
            url: currentVariableNamesUrl,
            type: 'POST',
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                Accept: 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            data: formData + '&_token=' + encodeURIComponent(csrfToken)
        }).done(function (resp) {
            if (resp.status === 'success') {
                templateModal().hide();
                showTemplateToast('success', resp.message);
            } else {
                showTemplateToast('error', resp.message || 'Save failed.');
            }
        }).fail(function (xhr) {
            showTemplateToast('error', xhr.responseJSON?.message || 'Request failed. Please try again.');
        });
    });

    $(document).on('click', '.delete-template', function (event) {
        event.preventDefault();
        event.stopPropagation();

        const url = $(this).attr('data-url');

        Swal.fire({
            title: 'Delete this template?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Delete',
            customClass: swalButtons,
            buttonsStyling: false
        }).then(function (result) {
            if (!result.isConfirmed && !result.value) {
                return;
            }

            $.ajax({
                url: url,
                type: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    Accept: 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                data: {
                    _method: 'DELETE',
                    _token: csrfToken
                }
            }).done(function (resp) {
                if (resp.status === 'success') {
                    window.location.reload();
                    return;
                }
                showTemplateToast('error', resp.message || 'Template not found.');
            }).fail(function (xhr) {
                showTemplateToast('error', xhr.responseJSON?.message || 'Request failed. Please try again.');
            });
        });
    });

    $('#disconnect-wa-account-btn').on('click', function () {
        const form = document.getElementById('disconnect-wa-account');
        if (!form) {
            return;
        }

        Swal.fire({
            title: $(this).attr('data-confirm'),
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'OK',
            customClass: swalButtons,
            buttonsStyling: false
        }).then(function (result) {
            if (result.isConfirmed || result.value) {
                form.submit();
            }
        });
    });

    $('#toggle-access-token').on('click', function () {
        const input = document.getElementById('access_token');
        if (!input) {
            return;
        }
        input.type = input.type === 'password' ? 'text' : 'password';
    });
</script>
@endsection