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

<section class="about section-padding style-4">
    <div class="integration">
        <div class="section-head style-4">
            <h2 class="mb-20  text-center ">Our <span>Channel</span> </h2>
            <div class="container mt-5">
                <div class="row" id="youtube-container">
                </div>

                <div class="d-flex align-items-center justify-content-center mt-50">

                    <a href="https://www.youtube.com/@Moolah_Tech" class="btn rounded-pill hover-blue4 fw-bold mt-50 px-5 border-blue4" target="_blank">
                        <small>Visit More</small>
                    </a>

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


<script>

    const apiKey = 'AIzaSyAClv0JQw2D2UMTk1g6D93SlTNXGeRYWYg';
    const channelId = 'UC43_LpKA_BZ6Q2Nk_X-riWw';
    const maxResults = 15;

    fetch(`https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&type=video&maxResults=${maxResults}`)
        .then(response => response.json())
        .then(data => {
            // Handle the retrieved data and display videos on your website
            const videosContainer = document.getElementById('youtube-container');

            // Loop through the videos and create Bootstrap card elements
            data.items.forEach(video => {
                const videoTitle = video.snippet.title;
                const videoDescription = video.snippet.description;
                const videoId = video.id.videoId;
                const videoPublishedAt = new Date(video.snippet.publishedAt).toLocaleDateString();

                // Fetch video duration from the YouTube Data API
                fetch(`https://www.googleapis.com/youtube/v3/videos?key=${apiKey}&part=contentDetails&id=${videoId}`)
                    .then(response => response.json())
                    .then(videoData => {
                        const videoDuration = parseISO8601Duration(videoData.items[0].contentDetails.duration);

                        // Create a Bootstrap card
                        const card = document.createElement('div');
                        card.className = 'col-lg-4 col-md-6 mb-4 video-card';

                        // Create card body
                        const cardBody = document.createElement('div');
                        cardBody.className = 'card border-0 h-100 d-flex flex-column';

                        // Create YouTube Embedded Player
                        const youtubePlayer = document.createElement('iframe');
                        youtubePlayer.src = `https://www.youtube.com/embed/${videoId}`;
                        youtubePlayer.width = '100%';
                        youtubePlayer.height = '180'; // Adjust the height as needed
                        youtubePlayer.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
                        youtubePlayer.allowfullscreen = true;

                        // Create card title
                        const titleElement = document.createElement('h3');
                        titleElement.className = 'card-title video-title';
                        titleElement.textContent = videoTitle;

                        // Create card text
                        const descriptionElement = document.createElement('p');
                        descriptionElement.className = 'card-text video-description';
                        descriptionElement.textContent = videoDescription;

                        // Create video info
                        const infoElement = document.createElement('p');
                        infoElement.className = 'card-text video-info title_small';
                        infoElement.textContent = `Published on ${videoPublishedAt} • ${videoDuration}`;

                        // Create a button to go to the YouTube video page
                        const youtubeButton = document.createElement('a');
                        youtubeButton.href = `https://www.youtube.com/watch?v=${videoId}`;
                        youtubeButton.target = '_blank'; // Open in a new tab
                        youtubeButton.className = 'mt-auto btn rounded-pill bg-blue4 fw-bold text-white'; // Use 'mt-auto' for margin-top auto
                        youtubeButton.textContent = 'Watch on YouTube';

                        // Append elements to the card body
                        cardBody.appendChild(youtubePlayer);
                        cardBody.appendChild(titleElement);
                        cardBody.appendChild(descriptionElement);
                        cardBody.appendChild(infoElement);
                        cardBody.appendChild(youtubeButton);

                        // Append the card body to the card
                        card.appendChild(cardBody);

                        // Append the card to the container
                        videosContainer.appendChild(card);
                    })
                    .catch(error => console.error('Error fetching video details:', error));
            });
        })
        .catch(error => console.error('Error fetching videos:', error));

    // Function to parse ISO 8601 duration format (PT1H30M45S)
    function parseISO8601Duration(duration) {
        const match = duration.match(/PT(\d+H)?(\d+M)?(\d+S)?/);

        const hours = match[1] ? parseInt(match[1], 10) : 0;
        const minutes = match[2] ? parseInt(match[2], 10) : 0;
        const seconds = match[3] ? parseInt(match[3], 10) : 0;

        const formattedDuration = [];

        if (hours > 0) {
            formattedDuration.push(`${hours}h`);
        }
        if (minutes > 0) {
            formattedDuration.push(`${minutes}m`);
        }
        if (seconds > 0) {
            formattedDuration.push(`${seconds}s`);
        }

        return formattedDuration.join(' ');
    }
</script>

@endsection