@extends('admin.layout.app')
@section('title', 'Create Speech')
@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Add Speech</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Speeches</a></li>
                            <li class="breadcrumb-item active">Add Speech</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card comman-shadow">
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form action="{{ route('speeches.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group local-forms">
                                        <label for="type" class="form-label">Type <span
                                                class="text-danger">*</span></label>
                                        <select name="type" id="type" class="form-control">
                                            <option value="">Select Type</option>
                                            <option value="grammar" {{ old('type') == 'grammar' ? 'selected' : '' }}>Grammar
                                            </option>
                                            <option value="vocabulary" {{ old('type') == 'vocabulary' ? 'selected' : '' }}>
                                                Vocabulary</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- Vocabulary Group -->
                                <div class="col-md-12" id="vocabulary-group" style="display:none;">
                                    <div class="form-group local-forms">
                                        <label for="word" class="form-label">Word <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="word" id="word" class="form-control"
                                            value="{{ old('word') }}">
                                    </div>
                                    <div class="form-group local-forms">
                                        <label for="audio_vocabulary" class="form-label">Audio</label>
                                        <input type="file" class="form-control" name="audio_vocabulary"
                                            id="audio_vocabulary" accept="audio/*">
                                        <small class="form-text text-muted">Accepted formats: MP3, WAV, OGG, M4A (Max:
                                            10MB)</small>
                                        <audio id="audio_preview_vocabulary" controls
                                            style="display:none; margin-top:10px;"></audio>
                                    </div>
                                </div>
                                <!-- Grammar Group -->
                                <div class="col-md-12" id="grammar-group" style="display:none;">
                                    <div class="form-group local-forms">
                                        <label for="question" class="form-label">Question <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="question" id="question" class="form-control"
                                            value="{{ old('question') }}">
                                    </div>
                                    <div class="form-group local-forms">
                                        <label for="answer" class="form-label">Answer <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="answer" id="answer" class="form-control"
                                            value="{{ old('answer') }}">
                                    </div>
                                    <div class="form-group local-forms">
                                        <label for="audio_grammar" class="form-label">Audio</label>
                                        <input type="file" class="form-control" name="audio_grammar" id="audio_grammar"
                                            accept="audio/*">
                                        <small class="form-text text-muted">Accepted formats: MP3, WAV, OGG, M4A (Max:
                                            10MB)</small>
                                        <audio id="audio_preview_grammar" controls
                                            style="display:none; margin-top:10px;"></audio>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 student-submit">
                                <button type="submit" class="btn btn-primary">Create</button>
                                {{-- <a href="{{ route('speeches.index') }}" class="btn btn-secondary">Back</a> --}}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function toggleFields() {
            var type = document.getElementById('type').value;
            document.getElementById('vocabulary-group').style.display = (type === 'vocabulary') ? '' : 'none';
            document.getElementById('grammar-group').style.display = (type === 'grammar') ? '' : 'none';
        }
        document.getElementById('type').addEventListener('change', toggleFields);
        window.onload = toggleFields;

        // Audio preview for vocabulary
        document.getElementById('audio_vocabulary').addEventListener('change', function(e) {
            var audio = document.getElementById('audio_preview_vocabulary');
            if (this.files && this.files[0]) {
                audio.src = URL.createObjectURL(this.files[0]);
                audio.style.display = 'block';
            } else {
                audio.style.display = 'none';
                audio.src = '';
            }
        });

        // Audio preview for grammar
        document.getElementById('audio_grammar').addEventListener('change', function(e) {
            var audio = document.getElementById('audio_preview_grammar');
            if (this.files && this.files[0]) {
                audio.src = URL.createObjectURL(this.files[0]);
                audio.style.display = 'block';
            } else {
                audio.style.display = 'none';
                audio.src = '';
            }
        });
    </script>
@endsection