@extends('dashboard.layouts.master')
@section('title', 'Transaction Logs | Admin Panel')

@push('after-styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" type="text/css" />
<style>
    /* ── Filter Tabs ── */
    .filter-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
    .filter-tab {
        padding:7px 18px; border-radius:20px; border:1px solid #ddd;
        background:#fff; cursor:pointer; font-size:13px; font-weight:600;
        color:#555; transition:all .2s;
    }
    .filter-tab:hover { border-color:#002868; color:#002868; }
    .filter-tab.active { background:#002868; color:#fff; border-color:#002868; }
    .tab-count {
        background:rgba(0,0,0,.08); border-radius:10px;
        padding:1px 8px; font-size:11px; margin-left:4px;
    }
    .filter-tab.active .tab-count { background:rgba(255,255,255,.25); }

    /* ── Status Indicators ── */
    .text-success { color: #28a745 !important; }
    .text-danger { color: #dc3545 !important; }
    .text-warning { color: #ffc107 !important; }
    .text-info { color: #17a2b8 !important; }
    
    .label { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
    .label.primary { background: #e7f1ff; color: #007bff; }
    .label.info { background: #e1faff; color: #055160; }
    .label.success { background: #e6ffed; color: #1a7f37; }
    .label.warning { background: #fff8e6; color: #9a6700; }
    .label.danger { background: #ffebe9; color: #cf222e; }
    .label.secondary { background: #f6f8fa; color: #57606a; }
</style>
@endpush

@section('content')
    @if(\Helper::canAccessModule('unified_transaction_logs'))
<div class="loader" id="loader"></div>
<div class="padding">
    <div class="box">
        {{-- ── Page Header ── --}}
        <div class="box-header m-b-2">
            <div class="box-header-left">
                <h3 class="d-block">Transaction Logs</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">Dashboard</a> /
                    <span>Unified Transaction Log</span>
                </small>
            </div>
            <div class="box-header-right">
                <button class="btn btn-default btn-sm" onclick="location.reload()">
                    <i class="material-icons md-18">refresh</i> Refresh
                </button>
            </div>
        </div>

        <div class="box-body">
            {{-- ── Filter Tabs ── --}}
            <div class="filter-tabs">
                <button class="filter-tab active" data-type="">
                    All Transactions <span class="tab-count" id="cnt-all">—</span>
                </button>
                <button class="filter-tab" data-type="subscription">
                    Subscription <span class="tab-count" id="cnt-subscription">—</span>
                </button>
                <button class="filter-tab" data-type="promotion">
                    Promotion <span class="tab-count" id="cnt-promotion">—</span>
                </button>
                <button class="filter-tab" data-type="supplier_purchase">
                    Supplier <span class="tab-count" id="cnt-supplier">—</span>
                </button>
                <button class="filter-tab" data-type="commission">
                    Commission <span class="tab-count" id="cnt-commission">—</span>
                </button>
                <button class="filter-tab" data-type="refund">
                    Refunds <span class="tab-count" id="cnt-refund">—</span>
                </button>
            </div>

            {{-- ── DataTable ── --}}
            <div class="table-responsive">
                <table class="table table-striped b-t" id="transactionTable">
                    <thead>
                        <tr>
                            <th width="30"><label class="ui-check m-a-0"><input type="checkbox" id="checkAll"><i class="dark-white"></i></label></th>
                            <th>TXN Number</th>
                            <th>User / Entity</th>
                            <th>Business</th>
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th width="50">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
    @else
        <script>window.location.href = "{{ route('adminHome') }}";</script>
    @endif
@endsection

@push('after-scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    let activeType = '';

    const table = $('#transactionTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('transactions.anyData') }}",
            type: 'POST',
            data: function(d) {
                d._token = "{{ csrf_token() }}";
                d.transaction_type = activeType;
            }
        },
        columns: [
            { data: 'checkbox',      name: 'checkbox',      orderable: false, searchable: false },
            { data: 'transaction_number', name: 'transaction_number' },
            { data: 'user_name',     name: 'user.name' },
            { data: 'business_name', name: 'business.business_name' },
            { data: 'type',          name: 'type' },
            { data: 'amount',        name: 'amount' },
            { data: 'status',        name: 'status' },
            { data: 'created_at',    name: 'created_at' },
            { data: 'options',       name: 'options',      orderable: false, searchable: false },
        ],
        order: [[7, 'desc']],
        pageLength: 15,
        language: { 
            processing: '<div class="loader"></div>',
            emptyTable: "No transactions found"
        },
        drawCallback: function() { $('#loader').css('visibility','hidden'); },
        preDrawCallback: function() { $('#loader').css('visibility','visible'); }
    });

    /* ── Filter tabs ── */
    $(document).on('click', '.filter-tab', function() {
        $('.filter-tab').removeClass('active');
        $(this).addClass('active');
        activeType = $(this).data('type');
        table.ajax.reload();
    });

    /* ── Select all checkbox ── */
    $('#checkAll').on('change', function() {
        $('input[name="ids[]"]').prop('checked', this.checked);
    });

    /* ── Tab counts (Simplified) ── */
    function loadTabCounts() {
        const types = ['', 'subscription', 'promotion', 'supplier_purchase', 'commission', 'refund'];
        types.forEach(function(t) {
            $.post("{{ route('transactions.anyData') }}", {
                _token: "{{ csrf_token() }}",
                transaction_type: t,
                start: 0, length: 1, draw: 1
            }, function(data) {
                const el = t === '' ? '#cnt-all' : '#cnt-' + (t.split('_')[0]); // Simple mapping
                $(el).text(data.iTotalRecords);
            });
        });
    }
    loadTabCounts();
});
</script>
@endpush