@extends('layouts.admin')

@section('title', 'Admin Dashboard | Secure Audio Player')

@section('page-title', 'Dashboard')

@section('content')
<div class="row">
    <div class="col-md-3">
        <div class="stat-card">
            <p class="small text-muted mb-0">Total Audio Files</p>
            <h2 class="stat-value">{{ $totalFiles }}</h2>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <p class="small text-muted mb-0">Access Codes</p>
            <h2 class="stat-value">{{ $totalCodes }}</h2>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <p class="small text-muted mb-0">Total Accesses</p>
            <h2 class="stat-value">{{ $totalAccesses }}</h2>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <p class="small text-muted mb-0">Active Streams</p>
            <h2 class="stat-value">{{ $activeStreams }}</h2>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-lg-6">
        <div class="chart-container">
            <h4>Top Audio Files</h4>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Accesses</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($topAudioFiles as $file)
                        <tr>
                            <td>{{ $file->title }}</td>
                            <td>{{ $file->logs_count }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="chart-container">
            <h4>Recent Access Logs</h4>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Code</th>
                            <th>Audio File</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentLogs as $log)
                        <tr>
                            <td>{{ $log->access_time->format('Y-m-d H:i') }}</td>
                            <td>{{ $log->accessCode->code }}</td>
                            <td>{{ $log->audioFile->title }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                    <h4 class="card-title">Quick Actions</h4>
                </div>
                <div class="row g-3">
                    <div class="col-md-3">
                        <a href="{{ route('admin.audio.upload.form') }}" class="btn btn-primary d-block">
                            <i class="bi bi-cloud-upload"></i> Upload Audio
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('admin.codes.create.form') }}" class="btn btn-primary d-block">
                            <i class="bi bi-key"></i> Create Access Code
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="{{ route('admin.stats.detailed') }}" class="btn btn-outline-primary d-block">
                            <i class="bi bi-graph-up"></i> View Detailed Stats
                        </a>
                    </div>
                    <div class="col-md-3">
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-outline-secondary d-block w-100">
                                <i class="bi bi-box-arrow-right"></i> Logout
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // You can add chart initialization here if needed
    });
</script>
@endsection