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

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

@push('styles')
<style>
    #logs-table_wrapper .dt-layout-row:first-child {
        display: none;
    }

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

    #logs-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;
    }

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

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

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

    .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"] #logs-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">Logs</h4>
        <p class="text-muted small mb-0">Message delivery history for your account</p>
    </div>
</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 phone or template…">
            </div>
            <select id="filter-status" class="form-select form-select-sm" style="width: auto;">
                <option value="">All statuses</option>
                <option value="pending">Pending</option>
                <option value="sent">Sent</option>
                <option value="failed">Failed</option>
            </select>
            <input type="date" id="filter-date-from" class="form-control form-control-sm" style="width: auto;"
                   title="From date">
            <input type="date" id="filter-date-to" class="form-control form-control-sm" style="width: auto;"
                   title="To date">
            <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="logs-table" class="table table-hover align-middle mb-0 w-100">
                <thead>
                    <tr>
                        <th>Phone Number</th>
                        <th>Template</th>
                        <th>Status</th>
                        <th>Sent At</th>
                        <th>Queued At</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

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

    const DATATABLE_URL = @json(route('business.logs.datatable'));

    // Default date range: last 30 days
    const today  = new Date();
    const past30 = new Date(today);
    past30.setDate(past30.getDate() - 29);

    const fmt = (d) => d.toISOString().slice(0, 10);

    document.getElementById('filter-date-from').value = fmt(past30);
    document.getElementById('filter-date-to').value   = fmt(today);

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

    // ── DataTable init ────────────────────────────────────────────────────
    const table = new DataTable('#logs-table', {
        processing: true,
        serverSide: true,
        ajax: {
            url: DATATABLE_URL,
            data: function (d) {
                d.search    = $('#search-input').val();
                d.status    = $('#filter-status').val();
                d.date_from = $('#filter-date-from').val();
                d.date_to   = $('#filter-date-to').val();
            },
        },
        columns: [
            { data: 'phone_number', orderable: false },
            { data: 'template_name', orderable: false },
            {
                data: null,
                orderable: false,
                render: (row) => statusBadge(row.status, row.badge),
            },
            {
                data: 'sent_at',
                orderable: false,
                render: (val) => val
                    ? `<span class="text-muted">${val}</span>`
                    : '<span class="text-muted">—</span>',
            },
            {
                data: 'created_at',
                orderable: false,
                render: (val) => `<span class="text-muted">${val}</span>`,
            },
        ],
        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-journal-text" style="font-size:2rem;opacity:.3;"></i><p class="mt-2 mb-0">No logs found for this period.</p></div>',
            emptyTable:  '<div class="text-center text-muted py-4"><i class="bi bi-journal-text" style="font-size:2rem;opacity:.3;"></i><p class="mt-2 mb-0">No messages sent yet.</p></div>',
            paginate: { previous: '&lsaquo;', next: '&rsaquo;' },
        },
        dom: 'rtip',
    });

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

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

    $('#clear-filters').on('click', function () {
        $('#search-input').val('');
        $('#filter-status').val('');
        $('#filter-date-from').val(fmt(past30));
        $('#filter-date-to').val(fmt(today));
        table.draw();
        $(this).addClass('d-none');
    });

    function syncClearBtn() {
        const defaultFrom = fmt(past30);
        const defaultTo   = fmt(today);
        const active =
            $('#search-input').val() ||
            $('#filter-status').val() ||
            $('#filter-date-from').val() !== defaultFrom ||
            $('#filter-date-to').val()   !== defaultTo;
        $('#clear-filters').toggleClass('d-none', !active);
    }
}());
</script>
@endpush