@extends('layout.app')

@section('title', 'Mikrotik Bandwidth Logs')

@section('content')
<x-material-page-header 
    title="Mikrotik Bandwidth Logs" 
    :breadcrumbs="[
        ['name' => 'Mikrotik', 'url' => route('mikrotik.index')],
        ['name' => 'Bandwidth Logs']
    ]"
    :secondaryAction="'syncBandwidth()'"
    secondaryActionLabel="Sync Bandwidth"
    secondaryActionIcon="refresh"
    :tertiaryAction="route('mikrotik.export-bandwidth')"
    tertiaryActionLabel="Export"
    tertiaryActionIcon="download"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Log Bandwidth Mikrotik</h6>
                </div>
                <div class="card-body pt-0">
                    <!-- Filter Form -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <form method="GET" class="row g-3">
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline">
                                        <input type="text" name="username" class="form-control" placeholder="Username" value="{{ request('username') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline">
                                        <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="input-group input-group-outline">
                                        <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <button type="submit" class="btn bg-gradient-primary mb-0">
                                        <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">search</i>Filter
                                    </button>
                                    <a href="{{ route('mikrotik.bandwidth-logs') }}" class="btn bg-gradient-secondary mb-0">
                                        <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">close</i>Clear
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Bandwidth Logs Table -->
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th>Customer</th>
                                    <th>Username</th>
                                    <th>IP Address</th>
                                    <th>Download (Bytes)</th>
                                    <th>Upload (Bytes)</th>
                                    <th>Download Rate</th>
                                    <th>Upload Rate</th>
                                    <th>Timestamp</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($logs as $log)
                                    <tr>
                                        <td>{{ $log->pelanggan->nama ?? '-' }}</td>
                                        <td>{{ $log->username }}</td>
                                        <td>{{ $log->ip_address }}</td>
                                        <td>{{ number_format($log->download_bytes) }}</td>
                                        <td>{{ number_format($log->upload_bytes) }}</td>
                                        <td>{{ number_format($log->download_rate) }} bps</td>
                                        <td>{{ number_format($log->upload_rate) }} bps</td>
                                        <td>{{ $log->created_at->format('Y-m-d H:i:s') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No bandwidth logs found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if($logs->hasPages())
                        <div class="d-flex justify-content-center">
                            {{ $logs->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>
function syncBandwidth() {
    if (confirm('Are you sure you want to sync bandwidth data from Mikrotik?')) {
        fetch('{{ route("mikrotik.sync-bandwidth") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Success: ' + data.message + ' (Count: ' + data.count + ')');
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while syncing bandwidth data');
        });
    }
}
</script>
@endsection