@extends('frontend.layouts.main')
@section('content')

<section class="events-hero">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="text-center">Events</h1>
            </div>
        </div>
    </div>
</section>

<section class=" future-ready-section">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="pt-4 pb-3">भविष्य की तैयारी</h2>
        </div>

        <div class="col-lg-12 video-knowledge">
            <div class="row mt-3">
                <div class="col-lg-5">
                    <img src="{{ asset('frontend/assets/image/audio-left-img.png') }}" class="audio-img-left" alt="">
                </div>
                <div class="col-lg-7 audio-bg">
                    <div class="podcast ">Podcast</div>
                    <div class="latest-podcast d-flex">Latest Podcast
                        <div class="button-podcast ">
                            <a><i class="fa-solid fa-podcast"></i></a>

                        </div>
                    </div>
                    @foreach($audios as $audio)
                    <div class="audio-list mt-5 ps-3">
                        <span class="play_icon">
                            <a href="#" class="play-button" data-src="{{ asset($audio->audio) }}">
                                <i class="fas fa-play before_song"></i>
                            </a>
                        </span>
                        <a> <span class="player_song_name transition3">
                                {{$audio->title}}
                            </span></a>
                        <span class="entry_duration mpfe_fix_lh">{{ $audio->duration }}</span>
                    </div>
                    @endforeach

                    <div class="smc_player_progress_bar">
                        <div class="player_time_slider_base"></div>
                        <div class="row">
                            <div class="d-flex">
                                {{-- <div class="col-md-6">
                                    <div class="swp_current_play">
                                        <div class="before_current_song_name">Playing</div>
                                        <div class="current_song_name d-flex">
                                            How To Start A Business? | Wikipedia Of Entrepreneurship ft. CA Mukesh
                                            Shukla
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="col-md-12">
                                    <div class="audio">
                                        <audio class="mt-2" id="audioPlayer" controls style="width: 100%">
                                            <source src="" type="audio/mpeg">
                                        </audio>
    
                                    </div>
                                </div>

                            </div>
                            
                        </div>
                    </div>

                </div>
            </div>
        </div>





        <div class="col-lg-6 video-knowledge mt-3">
            <h4 class="text-start pt-3">मेरी जिज्ञासा</h4>
            <iframe class="pt-2" width="100%" height="350" src="https://www.youtube.com/embed/sXmrSlo7Dn0"
                title="Meet Mukesh Shukla - The Boldest Podcast  | Full Podcast With Arvind Arora |"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
            <iframe class="pt-3" width="100%" height="350" src="https://www.youtube.com/embed/Dd8xePetFCc"
                title="बिज़नेस शुरू करना है तो यहाँ जाए | IID - One Stop Solution For New Businessman"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
            <iframe class="pt-3" width="100%" height="350" src="https://www.youtube.com/embed/oFf4A7f8rBM"
                title="क्यों IID को MSME का INCUBATOR कहते हैं | What is the meaning of an Incubator"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
            <iframe class="mt-3" width="100%" height="350" src="https://www.youtube.com/embed/M-YUhlVsOsw"
                title="Budget 2022 Highlights and Analysis | Taxation, MSME Startups, Digital Rupee, Education | IID"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
            <iframe class="mt-3" width="100%" height="350" src="https://www.youtube.com/embed/oFf4A7f8rBM"
                title="क्यों IID को MSME का INCUBATOR कहते हैं | What is the meaning of an Incubator"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
            <iframe class="mt-3 " width="100%" height="350" src="https://www.youtube.com/embed/ayBW5vlX77I"
                title="How to Start Your Own Business &amp; Entrepreneurship Journey || Institute For Industrial Development"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
        <div class="col-lg-6 text-space  mt-3 ">
            <h4 class="text-start pt-3 ms-2">युवाओं का योगदान</h4>

        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var audioPlayer = document.getElementById('audioPlayer');
        var playButtons = document.querySelectorAll('.play-button');

        playButtons.forEach(function (button) {
            button.addEventListener('click', function (event) {
                event.preventDefault();

                var audioSource = button.getAttribute('data-src');

                audioPlayer.src = audioSource;

                audioPlayer.play();

                var currentSongName = button.parentElement.nextElementSibling.children[0].innerText;
                document.querySelector('.current_song_name .before_current_song_name').innerText = 'Playing';
                document.querySelector('.current_song_name .current_song_name').innerText = currentSongName;
            });
            
        });
    });
</script>
</section>
@endsection