<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <i class="fa fa-history"></i> <?php echo _l('desk_moloni_sync_logs'); ?>
                </h3>
            </div>
            <div class="panel-body">

                <!-- Filters -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="filter_entity_type"><?php echo _l('entity_type'); ?></label>
                            <select id="filter_entity_type" class="form-control selectpicker">
                                <option value=""><?php echo _l('all'); ?></option>
                                <?php foreach($entity_types as $type): ?>
                                    <option value="<?php echo h($type); ?>"><?php echo _l($type); ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="filter_status"><?php echo _l('status'); ?></label>
                            <select id="filter_status" class="form-control selectpicker">
                                <option value=""><?php echo _l('all'); ?></option>
                                <option value="success"><?php echo _l('success'); ?></option>
                                <option value="error"><?php echo _l('error'); ?></option>
                                <option value="pending"><?php echo _l('pending'); ?></option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="filter_date_from"><?php echo _l('date_from'); ?></label>
                            <input type="date" id="filter_date_from" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="filter_date_to"><?php echo _l('date_to'); ?></label>
                            <input type="date" id="filter_date_to" class="form-control">
                        </div>
                    </div>
                </div>

                <!-- Statistics -->
                <?php if(!empty($log_stats)): ?>
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            <strong><?php echo _l('statistics'); ?>:</strong>
                            Total: <?php echo h($log_stats['total'] ?? 0); ?> |
                            Success: <?php echo h($log_stats['success'] ?? 0); ?> |
                            Errors: <?php echo h($log_stats['errors'] ?? 0); ?> |
                            Pending: <?php echo h($log_stats['pending'] ?? 0); ?>
                        </div>
                    </div>
                </div>
                <?php endif; ?>

                <!-- Logs Table -->
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered" id="logs-table">
                            <thead>
                                <tr>
                                    <th><?php echo _l('date'); ?></th>
                                    <th><?php echo _l('entity_type'); ?></th>
                                    <th><?php echo _l('entity_id'); ?></th>
                                    <th><?php echo _l('action'); ?></th>
                                    <th><?php echo _l('status'); ?></th>
                                    <th><?php echo _l('message'); ?></th>
                                    <th><?php echo _l('actions'); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#logs-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: admin_url + 'desk_moloni/logs/get_logs',
            type: 'POST',
            data: function(d) {
                d.entity_type = $('#filter_entity_type').val();
                d.status = $('#filter_status').val();
                d.date_from = $('#filter_date_from').val();
                d.date_to = $('#filter_date_to').val();
            }
        },
        columns: [
            { data: 'created_at' },
            { data: 'entity_type' },
            { data: 'entity_id' },
            { data: 'action' },
            {
                data: 'status',
                render: function(data) {
                    var badge_class = 'default';
                    if (data === 'success') badge_class = 'success';
                    else if (data === 'error') badge_class = 'danger';
                    else if (data === 'pending') badge_class = 'warning';

                    return '<span class="badge badge-' + badge_class + '">' + data + '</span>';
                }
            },
            {
                data: 'message',
                render: function(data) {
                    return data ? data.substring(0, 100) + (data.length > 100 ? '...' : '') : '';
                }
            },
            {
                data: 'id',
                orderable: false,
                render: function(data) {
                    return '<button class="btn btn-sm btn-info" onclick="viewLogDetails(' + data + ')">' +
                           '<i class="fa fa-eye"></i></button>';
                }
            }
        ],
        order: [[0, 'desc']],
        pageLength: 25
    });

    // Filter change handlers
    $('#filter_entity_type, #filter_status, #filter_date_from, #filter_date_to').on('change', function() {
        table.draw();
    });
});

function viewLogDetails(logId) {
    // Load log details in modal
    $.get(admin_url + 'desk_moloni/logs/get_log_details/' + logId, function(response) {
        alert('Log details: ' + JSON.stringify(response));
    });
}
</script>