@extends('layouts.apex')

@section('title', 'Activity Logs')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Activity Logs</h1>
            <p class="page-header-subtitle">Riwayat aktivitas pengguna</p>
        </div>
        <button type="button" class="btn btn-secondary" onclick="location.reload()">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            Refresh
        </button>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div class="grid grid-cols-4" style="margin-bottom: 2rem;">
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-primary">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Total Logs</div>
                        <div class="summary-value" id="totalLogs">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-success">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Create</div>
                        <div class="summary-value" id="createCount">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-warning">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Update</div>
                        <div class="summary-value" id="updateCount">-</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="summary-card">
                    <div class="summary-icon summary-icon-danger">
                        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                    </div>
                    <div>
                        <div class="summary-label">Delete</div>
                        <div class="summary-value" id="deleteCount">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card" style="margin-bottom: 2rem;">
        <div class="card-body">
            <div class="grid grid-cols-4" style="gap: 1rem;">
                <div>
                    <label class="form-label">Filter Action</label>
                    <select id="filterAction" class="form-control form-select">
                        <option value="">Semua Action</option>
                        <option value="create">Create</option>
                        <option value="update">Update</option>
                        <option value="delete">Delete</option>
                        <option value="login">Login</option>
                        <option value="logout">Logout</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Filter Module</label>
                    <select id="filterModule" class="form-control form-select">
                        <option value="">Semua Module</option>
                        <option value="pembelian">Pembelian</option>
                        <option value="stok">Stok</option>
                        <option value="mutasi-stok">Mutasi Stok</option>
                        <option value="keuangan">Keuangan</option>
                        <option value="tebar">Tebar</option>
                        <option value="panen">Panen</option>
                        <option value="user">User</option>
                        <option value="kolam">Kolam</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Tanggal Mulai</label>
                    <input type="date" id="filterStartDate" class="form-control">
                </div>
                <div>
                    <label class="form-label">Tanggal Akhir</label>
                    <input type="date" id="filterEndDate" class="form-control">
                </div>
            </div>
            <div style="margin-top: 1rem;">
                <button type="button" class="btn btn-primary" onclick="applyFilters()">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                    </svg>
                    Terapkan Filter
                </button>
                <button type="button" class="btn btn-secondary" onclick="resetFilters()">
                    Reset
                </button>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Log Aktivitas</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="logsTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>User</th>
                            <th>Action</th>
                            <th>Module</th>
                            <th>Deskripsi</th>
                            <th>Waktu</th>
                            <th>IP Address</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    const logsTable = $('#logsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("logs.data") }}',
            data: function(d) {
                d.action = $('#filterAction').val();
                d.module = $('#filterModule').val();
                d.start_date = $('#filterStartDate').val();
                d.end_date = $('#filterEndDate').val();
            },
            dataSrc: function(json) {
                updateSummaryCards(json);
                return json.data;
            }
        },
        columns: [
            { data: 'id' },
            { data: 'user_info' },
            { data: 'action_badge' },
            { data: 'module_badge' },
            { data: 'description_short' },
            { data: 'created_at_format' },
            { data: 'ip_address' }
        ],
        order: [[5, 'desc']],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.7/i18n/id.json'
        }
    });

    window.applyFilters = function() {
        logsTable.ajax.reload(null, false);
    };

    window.resetFilters = function() {
        $('#filterAction').val('');
        $('#filterModule').val('');
        $('#filterStartDate').val('');
        $('#filterEndDate').val('');
        logsTable.ajax.reload(null, false);
    };

    function updateSummaryCards(data) {
        // Update summary cards based on filtered data
        let createCount = 0;
        let updateCount = 0;
        let deleteCount = 0;

        if (data.data) {
            data.data.forEach(function(log) {
                if (log.action === 'create') createCount++;
                else if (log.action === 'update') updateCount++;
                else if (log.action === 'delete') deleteCount++;
            });
        }

        $('#totalLogs').text(data.recordsTotal || 0);
        $('#createCount').text(createCount);
        $('#updateCount').text(updateCount);
        $('#deleteCount').text(deleteCount);
    }
});
</script>
@endsection