@extends('layouts.app')

@section('title', 'Enter Access Code | Secure Audio Player')

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">Secure Audio Player</h4>
                </div>
                
                <div class="card-body">
                    @if (session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    <p class="text-center mb-4">Please enter your access code to listen to the audio content</p>
                    
                    <form id="accessForm" action="{{ url('/api/access/verify') }}" method="POST">
                        @csrf
                        
                        <div class="mb-4">
                            <label for="code" class="form-label">Access Code</label>
                            <input type="text" class="form-control form-control-lg text-center" id="code" name="code" placeholder="Enter your access code" required autofocus>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">Access Audio</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const accessForm = document.getElementById('accessForm');
        
        accessForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const code = document.getElementById('code').value;
            const formData = new FormData();
            formData.append('code', code);
            
            fetch('/api/access/verify', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    code: code
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    if (data.files && data.files.length > 0) {
                        // Redirect to player with first file's stream token
                        window.location.href = '/player/' + data.files[0].stream_token;
                    }
                } else {
                    // Show error message
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'alert alert-danger mt-3';
                    errorDiv.textContent = data.message || 'An error occurred. Please try again.';
                    
                    const cardBody = document.querySelector('.card-body');
                    const existingAlert = cardBody.querySelector('.alert');
                    
                    if (existingAlert) {
                        cardBody.replaceChild(errorDiv, existingAlert);
                    } else {
                        cardBody.insertBefore(errorDiv, accessForm);
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    });
</script>
@endsection
@endsection