@extends('layouts.public2')
@section('infosradio', 'Audios')
@section('radio_name', $radio->name)
@section('radio_description', $radio->description)
@section('radio_contact', $radio->phone)
@section('radio_adresse', $radio->address)
@section('radio_email', $radio->email)

@section('content')
    <main class="main-content h-100">
        <div class="position-relative overflow-hidden" style="height: 200px;">
            <img src="{{ asset('images/G7.jpg') }}" class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover"
                style="filter: blur(5px); z-index: 0;" alt="Background flou">

            <div class="position-relative z-1 text-white d-flex align-items-center justify-content-center h-100">
                <div class="p-5 rounded">
                    <h2 class="mb-3">{!! nl2br('Audiothèque : ' . $radio->name) !!}</h2>
                </div>
            </div>
        </div>
        <section class="bg-color2 p-md-5 p-1 h-100">
            <div class="bg-white p-4 container-xxl rounded-4 shadow-sm">
                <div class="col-md-4 mt-4 mb-3">
                    <input type="hidden" value="{{ request()->route('radio_id') }}" id="radio_id">
                    <select class="form-select" name="type" id="audio_select" onchange="handleAudio()"
                        style="height: 50px; width:fit-content;">
                        <option value="all">Tous les types</option>
                        @foreach($genres as $genre)
                            <option value="{{ $genre->genre_slug }}" {{ request()->get('type') == $genre->genre_slug ? 'selected' : '' }}>
                                {{ $genre->genre_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="row gy-4">
                    @if($audios->count() > 0)
                        @foreach($audios as $audio)

                            <x-audio-card :audio="$audio" :audioG="$genre_audio" />
                        @endforeach
                    @else
                        <div class="bg-white rounded-3 p-5 text-center text-black fw-bold fs-4">
                        Aucun contenu {{ $genre_audio->genre_name ? 'de type ' . $genre_audio->genre_name : 'audio' }} disponible
                        </div>
                    @endif
                </div>
                <div class="audio-part">
                    <audio id="sound" src="" type="audio/mpeg"></audio>
                </div>
                <div class="mt-5 d-flex justify-content-center">
                    {{ $audios->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </section>
    </main>
@endsection

@section('scripts')
  <script src="{{ asset('assets/js/player-audio.js') }}"></script>
    <script>
        function handleAudio() {
            const selected_value = document.getElementById('audio_select').value;

            const radio_id = document.getElementById('radio_id').value;

            if (selected_value != '') {
                window.location.href = `${radio_id}?type=${selected_value}`;
            }
        }
    </script>
@endsection