@extends('layouts.admin')

@section('title', 'Access Code Statistics | Admin Dashboard')

@section('page-title', 'Access Code Statistics: ' . $code->code)

@section('content')
<div class="row">
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">Code Information</h5>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Code:</span>
                        <span><code>{{ $code->code }}</code></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Valid From:</span>
                        <span>{{ $code->valid_from->format('Y-m-d H:i') }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Valid Until:</span>
                        <span>{{ $code->valid_until ? $code->valid_until->format('Y-m-d H:i') : 'No expiration' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Created By:</span>
                        <span>{{ $code->creator->username }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Usage:</span>
                        <span>{{ $uses }} / {{ $code->max_uses ? $code->max_uses : '∞' }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Associated Files:</span>
                        <span>{{ $code->audioFiles->count() }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">Usage Over Time</h5>
                <canvas id="usageChart" height="250"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <h5 class="mb-0">Audio File Statistics</h5>
                <a href="{{ route('admin.stats.detailed') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Back to Stats
                </a>
            </div>
            <div class="card-body">
                @if(count($audioStats) > 0)
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Audio File</th>
                                <th>Duration</th>
                                <th>Plays</th>
                                <th>Completions</th>
                                <th>Completion Rate</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($audioStats as $stat)
                            <tr>
                                <td>{{ $stat['audio']->title }}</td>
                                <td>{{ gmdate("i:s", $stat['audio']->duration) }}</td>
                                <td>{{ $stat['plays'] }}</td>
                                <td>{{ $stat['completions'] }}</td>
                                <td>
                                    @if($stat['plays'] > 0)
                                        {{ round(($stat['completions'] / $stat['plays']) * 100) }}%
                                    @else
                                        0%
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <p class="text-center">No audio files associated with this code.</p>
                @endif
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Sample chart initialization - you would replace this with actual data
        const ctx = document.getElementById('usageChart').getContext('2d');
        
        // In a real application, this data would come from your database
        const dates = [];
        const usageCounts = [];
        
        // Generate some sample data for the past 30 days
        const today = new Date();
        for (let i = 30; i >= 0; i--) {
            const date = new Date(today);
            date.setDate(date.getDate() - i);
            dates.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
            
            // Random usage count (would be real data in production)
            usageCounts.push(Math.floor(Math.random() * 5));
        }
        
        const chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: dates,
                datasets: [{
                    label: 'Code Usage',
                    data: usageCounts,
                    backgroundColor: 'rgba(74, 111, 220, 0.7)',
                    borderColor: 'rgba(74, 111, 220, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Number of Uses'
                        },
                        ticks: {
                            stepSize: 1
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Date'
                        }
                    }
                }
            }
        });
    });
</script>
@endsection
@endsection