@extends('root')
@section('title', 'Log Aktivitas - ' . ($wabaPool->whatsapp_name ?: $wabaPool->phone_number))

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Log Aktivitas',
        'links' => [
            ['label' => 'Autoreply', 'url' => route('client.autoreply.index')],
            ['label' => $wabaPool->whatsapp_name ?: $wabaPool->phone_number, 'url' => route('client.autoreply.settings', $wabaPool)]
        ],
        'current' => 'Log Aktivitas'
    ])

    <div class="row">
        <div class="col-lg-3 mb-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0 text-white">{{ $wabaPool->whatsapp_name ?: 'WABA' }}</h6>
                    <small class="opacity-75">{{ $wabaPool->phone_number }}</small>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('client.autoreply.settings', $wabaPool) }}" class="list-group-item list-group-item-action">
                        <i class="ti ti-settings me-2"></i> Pengaturan Umum
                    </a>
                    <a href="{{ route('client.autoreply.ai-config', $wabaPool) }}" class="list-group-item list-group-item-action">
                        <i class="ti ti-robot me-2"></i> Konfigurasi AI
                    </a>
                    <a href="{{ route('client.autoreply.buttons', $wabaPool) }}" class="list-group-item list-group-item-action">
                        <i class="ti ti-click me-2"></i> Button Menu
                    </a>
                    <a href="{{ route('client.autoreply.logs', $wabaPool) }}" class="list-group-item list-group-item-action active">
                        <i class="ti ti-history me-2"></i> Log Aktivitas
                    </a>
                </div>
            </div>
        </div>

        <div class="col-lg-9">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-history text-primary me-2"></i>Log Autoreply</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-4">
                        <div class="col-md-3">
                            <select class="form-select" id="filterType">
                                <option value="">Semua Tipe</option>
                                <option value="ai">AI</option>
                                <option value="button">Button</option>
                                <option value="handover">Handover</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <input type="date" class="form-control" id="filterDateFrom" placeholder="Dari">
                        </div>
                        <div class="col-md-3">
                            <input type="date" class="form-control" id="filterDateTo" placeholder="Sampai">
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-primary" id="applyFilter"><i class="ti ti-filter me-1"></i>Filter</button>
                            <button class="btn btn-outline-secondary" id="resetFilter"><i class="ti ti-x"></i></button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover" id="logsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Waktu</th>
                                    <th>Pesan Masuk</th>
                                    <th>Response</th>
                                    <th>Tipe</th>
                                    <th>Confidence</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const table = $('#logsTable').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        ajax: {
            url: '{{ route('client.autoreply.logs', $wabaPool) }}',
            data: function(d) {
                d.reply_type = $('#filterType').val();
                d.date_from = $('#filterDateFrom').val();
                d.date_to = $('#filterDateTo').val();
            }
        },
        columns: [
            { data: 'created_at', render: d => d ? new Date(d).toLocaleString('id-ID', {day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'}) : '-' },
            { data: 'message_in', render: d => d && d.length > 40 ? d.substring(0,40)+'...' : (d||'-') },
            { data: 'message_out', render: d => d && d.length > 40 ? d.substring(0,40)+'...' : (d||'-') },
            { data: 'reply_type', render: d => ({ai:'<span class="badge bg-info">AI</span>',button:'<span class="badge bg-warning">Button</span>',handover:'<span class="badge bg-primary">Handover</span>'}[d] || d) },
            { data: 'confidence_score', render: d => d ? Math.round(d*100)+'%' : '-' }
        ],
        language: { emptyTable: "Belum ada log" }
    });

    $('#applyFilter').on('click', () => table.ajax.reload());
    $('#resetFilter').on('click', () => { $('#filterType, #filterDateFrom, #filterDateTo').val(''); table.ajax.reload(); });
});
</script>
@endpush