@extends('business::layouts.app')

@section('title', 'Templates — BizWap')

@push('styles')
<style>
    /* Keep DataTables controls aligned with our layout */
    #templates-table_wrapper .dt-layout-row:first-child {
        display: none; /* hide default search — we use our own */
    }

    #templates-table_wrapper .dt-layout-row:last-child {
        margin-top: 0.75rem;
        padding: 0 1rem 0.75rem;
    }

    #templates-table thead th {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--bw-text-muted);
        border-bottom: 1px solid var(--bw-border);
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }

    #templates-table tbody td {
        padding: 0.85rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--bw-border);
        font-size: 0.875rem;
    }

    #templates-table tbody tr:last-child td {
        border-bottom: none;
    }

    #templates-table tbody tr:hover {
        background: var(--bw-primary-light);
    }

    .template-name-link {
        font-weight: 500;
        color: var(--bw-primary);
        text-decoration: none;
    }

    .template-name-link:hover {
        text-decoration: underline;
    }

    /* Spinning refresh icon while loading */
    .btn-refresh .bi { transition: transform 0.3s; }
    .btn-refresh.loading .bi { animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Filter bar */
    .filter-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .filter-bar .form-select,
    .filter-bar .form-control {
        min-width: 0;
        font-size: 0.875rem;
    }

    [data-bs-theme="dark"] #templates-table thead th {
        background: var(--bw-surface);
    }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0">Templates</h4>
        <p class="text-muted small mb-0">Manage your WhatsApp message templates</p>
    </div>
    <a href="{{ route('business.templates.create') }}" class="btn btn-success btn-sm">
        <i class="bi bi-plus-lg me-1"></i> New Template
    </a>
</div>

<div class="card border-0 shadow-sm">
    {{-- Filter bar --}}
    <div class="card-body border-bottom pb-3">
        <div class="filter-bar">
            <div class="flex-grow-1" style="max-width: 280px;">
                <input type="text" id="search-input" class="form-control form-control-sm"
                       placeholder="Search by name…">
            </div>
            <select id="filter-status" class="form-select form-select-sm" style="width: auto;">
                <option value="">All statuses</option>
                <option value="DRAFT">Draft</option>
                <option value="PENDING">Pending</option>
                <option value="APPROVED">Approved</option>
                <option value="REJECTED">Rejected</option>
                <option value="PAUSED">Paused</option>
                <option value="DISABLED">Disabled</option>
            </select>
            <select id="filter-category" class="form-select form-select-sm" style="width: auto;">
                <option value="">All categories</option>
                <option value="MARKETING">Marketing</option>
                <option value="UTILITY">Utility</option>
                <option value="AUTHENTICATION">Authentication</option>
            </select>
            <button id="clear-filters" class="btn btn-sm btn-outline-secondary d-none">
                <i class="bi bi-x-lg me-1"></i>Clear
            </button>
        </div>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="templates-table" class="table table-hover align-middle mb-0 w-100">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Language</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    'use strict';

    const DATATABLE_URL = @json(route('business.templates.datatable'));
    const CSRF          = document.querySelector('meta[name="csrf-token"]').content;

    // ── Status badge helper ───────────────────────────────────────────────
    function statusBadge(status, badge) {
        return `<span class="badge bg-${badge}-subtle text-${badge}-emphasis text-uppercase">${status}</span>`;
    }

    // ── DataTable init ────────────────────────────────────────────────────
    const table = new DataTable('#templates-table', {
        processing: true,
        serverSide: true,
        ajax: {
            url: DATATABLE_URL,
            data: function (d) {
                d.search   = $('#search-input').val();
                d.status   = $('#filter-status').val();
                d.category = $('#filter-category').val();
            },
        },
        columns: [
            {
                data: null,
                render: (row) =>
                    `<a href="${row.show_url}" class="template-name-link">${row.name}</a>`,
                orderable: false,
            },
            {
                data: 'category',
                render: (val) =>
                    `<span class="badge bg-secondary-subtle text-secondary-emphasis">${val}</span>`,
                orderable: false,
            },
            { data: 'language', orderable: false },
            {
                data: null,
                render: (row) => statusBadge(row.status, row.badge),
                orderable: false,
            },
            { data: 'created_at', orderable: false },
            {
                data: null,
                className: 'text-end',
                orderable: false,
                render: (row) => {
                    let html = `<a href="${row.show_url}" class="btn btn-sm btn-outline-secondary me-1">View</a>`;

                    if (row.refresh_url) {
                        html += `<button
                            class="btn btn-sm btn-outline-primary btn-refresh"
                            data-url="${row.refresh_url}"
                            data-id="${row.id}"
                            title="Refresh status from Meta">
                            <i class="bi bi-arrow-clockwise"></i>
                        </button>`;
                    }

                    return html;
                },
            },
        ],
        pageLength: 15,
        lengthMenu: [10, 15, 25, 50],
        language: {
            processing:  '<div class="text-muted small py-2">Loading…</div>',
            zeroRecords: '<div class="text-center text-muted py-4"><i class="bi bi-layout-text-sidebar-reverse" style="font-size:2rem;opacity:.3;"></i><p class="mt-2 mb-0">No templates found.</p></div>',
            emptyTable:  '<div class="text-center text-muted py-4"><i class="bi bi-layout-text-sidebar-reverse" style="font-size:2rem;opacity:.3;"></i><p class="mt-2 mb-0">No templates yet. <a href="{{ route('business.templates.create') }}">Create your first template</a>.</p></div>',
            paginate: { previous: '&lsaquo;', next: '&rsaquo;' },
        },
        dom: 'rtip',  // table, info, pagination only — no default search/length inputs
    });

    // ── Filter triggers ───────────────────────────────────────────────────
    let searchTimer;
    $('#search-input').on('input', function () {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => { table.draw(); syncClearBtn(); }, 350);
    });

    $('#filter-status, #filter-category').on('change', function () {
        table.draw();
        syncClearBtn();
    });

    $('#clear-filters').on('click', function () {
        $('#search-input').val('');
        $('#filter-status, #filter-category').val('');
        table.draw();
        $(this).addClass('d-none');
    });

    function syncClearBtn() {
        const active = $('#search-input').val() ||
                       $('#filter-status').val() ||
                       $('#filter-category').val();
        $('#clear-filters').toggleClass('d-none', !active);
    }

    // ── Refresh button (delegated — rows re-render after each draw) ───────
    $('#templates-table').on('click', '.btn-refresh', function () {
        const btn = $(this);
        const url = btn.data('url');

        if (btn.hasClass('loading')) return;
        btn.addClass('loading').prop('disabled', true);

        $.ajax({
            url:     url,
            method:  'POST',
            headers: { 'X-CSRF-TOKEN': CSRF },
            success: function (res) {
                if (res.success) {
                    // Find the status cell in the same row and update in-place
                    const td = btn.closest('tr').find('td:nth-child(4)');
                    td.html(statusBadge(res.status, res.badge));

                    // Hide refresh button if template moved to DRAFT (shouldn't happen, but safe)
                    if (res.status === 'DRAFT') btn.remove();

                    Swal.fire({
                        toast: true, position: 'top-end', icon: 'success',
                        title: `Status updated: ${res.status}`,
                        showConfirmButton: false, timer: 2500, timerProgressBar: true,
                    });
                }
            },
            error: function (xhr) {
                const msg = xhr.responseJSON?.message ?? 'Could not refresh status.';
                Swal.fire({
                    toast: true, position: 'top-end', icon: 'error',
                    title: msg, showConfirmButton: false, timer: 3500,
                });
            },
            complete: function () {
                btn.removeClass('loading').prop('disabled', false);
            },
        });
    });
}());
</script>
@endpush