@php
    $section_content = (array) ($section_content ?? []);
    $upload_base = asset((config('paths.upload', 'assets/uploads')) . '/service-landing');
    $audio_src = !empty($section_content['audio_file']) ? ($upload_base . '/' . $section_content['audio_file']) : asset('assets/site/img/1-3.mp3');
@endphp

<section class="mt-5 mb-5">
    <div class="custom-audio-player shadow-sm bg-white p-4 mx-auto" style="max-width: 450px; border-radius: 20px; border: 1px solid #f1f1f1;">

        <audio class="audio-element" src="{{ $audio_src }}" preload="metadata"></audio>

        <!-- Cover Art (Music Note) -->
        <div class="text-center mb-4 mt-2">
            <img class="w-50 h-auto" src="{{ asset('assets/site/img/wired-outline-43-music-note-hover-bounce.gif') }}" alt="Cover Art">
        </div>

        <!-- Info Section -->
        <div class="text-center mb-4 px-2">
            <div class="d-flex align-items-center justify-content-center mb-2">
                <!-- Logo fallback (hides if network fails) -->
                <img width="30" src="{{ asset('assets/site/img/logo-number.png') }}" alt="logo" class="me-2" onerror="this.style.display='none'">
                <h5 class="bold dark-gray mb-0" style="font-size: 16px;">{{ $section_content['title'] ?? 'عنوان فایل صوتی' }}</h5>
            </div>
            
            <p class="font-13 light-gray mb-0 lh-lg" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 48px;">
                {{ $section_content['short_description'] ?? 'متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است.' }}
            </p>
        </div>

        <!-- Controls Section -->
        <div class="d-flex flex-column align-items-center px-1">
            
            <!-- Timeline / Progress Bar -->
            <div class="w-100 d-flex align-items-center mb-4" dir="ltr"> <!-- dir=ltr for LTR slider behavior -->
                <span class="font-12 light-gray current-time mx-3" style="width: 35px; text-align: right; font-family: tahoma, sans-serif;">0:00</span>
                <!-- Removed form-range clashing class -->
                <input type="range" class="flex-grow-1 custom-progress-bar" value="0" min="0" max="100" step="1">
                <span class="font-12 light-gray duration-time mx-3" style="width: 35px; text-align: left; font-family: tahoma, sans-serif;">0:00</span>
            </div>

            <!-- Buttons: Play & Mute -->
            <div class="position-relative w-100 d-flex justify-content-center align-items-center mt-2 mb-2" dir="rtl">
                
                <!-- Play Button Center -->
                <button class="btn rounded-circle play-pause-btn d-flex align-items-center justify-content-center shadow" style="width: 65px; height: 65px; background-color: #029a49; border: none; transition: transform 0.2s; z-index: 2;">
                    <!-- Play Icon -->
                    <svg class="play-icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white" style="margin-right: -4px;"><path d="M8 5v14l11-7z"/></svg>
                    <!-- Pause Icon (hidden initially) -->
                    <svg class="pause-icon d-none" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                </button>

                <!-- Mute Icon Positioned slightly inward from the corner -->
                <button class="btn btn-light rounded-circle mute-btn d-flex align-items-center justify-content-center position-absolute" style="width: 45px; height: 45px; border: none; left: 15%; background-color: #f8f9fa;">
                   <svg width="22" height="22" fill="#555" viewBox="0 0 24 24"><path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" /></svg>
                </button>
            </div>
        </div>
    </div>
</section>

<!-- CSS استایل‌های اختصاصی کنترل صدا -->
<style>
.custom-progress-bar {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #e9ecef;
    border-radius: 5px;
    outline: none;
    direction: ltr; /* Ensure it progresses accurately in LTR visually */
}
.custom-progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #029a49;
    cursor: pointer;
    transition: transform 0.1s;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.custom-progress-bar::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.custom-progress-bar::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #029a49;
    cursor: pointer;
    border: none;
}
.play-pause-btn:hover {
    transform: scale(1.05);
}
</style>

<!-- اسکریپت عملکرد پلیر -->
<script>
(function() {
    function initCustomAudioPlayers() {
        document.querySelectorAll('.custom-audio-player:not(.is-initialized)').forEach(player => {
            player.classList.add('is-initialized');
            const audio = player.querySelector('.audio-element');
            const playPauseBtn = player.querySelector('.play-pause-btn');
            const playIcon = player.querySelector('.play-icon');
            const pauseIcon = player.querySelector('.pause-icon');
            const progressBar = player.querySelector('.custom-progress-bar');
            const currentTimeEl = player.querySelector('.current-time');
            const durationEl = player.querySelector('.duration-time');
            const muteBtn = player.querySelector('.mute-btn');

            // Time Formatter
            const formatTime = (time) => {
                if (isNaN(time)) return "0:00";
                const minutes = Math.floor(time / 60);
                const seconds = Math.floor(time % 60);
                return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
            };

            // Gradient logic for progressing green bar width
            const updateGradient = () => {
                if (progressBar.max > 0) {
                    const value = (progressBar.value / progressBar.max) * 100;
                    progressBar.style.background = `linear-gradient(to right, #029a49 0%, #029a49 ${value}%, #e9ecef ${value}%, #e9ecef 100%)`;
                }
            };

            // Set duration
            audio.addEventListener('loadedmetadata', () => {
                durationEl.textContent = formatTime(audio.duration);
                progressBar.max = Math.floor(audio.duration);
            });
            if (audio.readyState >= 1) {
                durationEl.textContent = formatTime(audio.duration);
                progressBar.max = Math.floor(audio.duration);
            }

            // Play / Pause Toggle
            playPauseBtn.addEventListener('click', () => {
                if (audio.paused) {
                    // Pause other instances if they exist
                    document.querySelectorAll('.audio-element').forEach(a => {
                        if(a !== audio) {
                            a.pause();
                            const otherContainer = a.closest('.custom-audio-player');
                            if (otherContainer) {
                                otherContainer.querySelector('.play-icon').classList.remove('d-none');
                                otherContainer.querySelector('.pause-icon').classList.add('d-none');
                            }
                        }
                    });

                    audio.play();
                    playIcon.classList.add('d-none');
                    pauseIcon.classList.remove('d-none');
                } else {
                    audio.pause();
                    playIcon.classList.remove('d-none');
                    pauseIcon.classList.add('d-none');
                }
            });

            // Prevent timeupdate overlapping with user dragging
            let isDragging = false;
            progressBar.addEventListener('mousedown', () => isDragging = true);
            progressBar.addEventListener('touchstart', () => isDragging = true, {passive: true});
            
            progressBar.addEventListener('mouseup', () => {
                isDragging = false;
                audio.currentTime = progressBar.value;
            });
            progressBar.addEventListener('touchend', () => {
                isDragging = false;
                audio.currentTime = progressBar.value;
            }, {passive: true});

            // Update time indicator instantly while dragging
            progressBar.addEventListener('input', () => {
                currentTimeEl.textContent = formatTime(progressBar.value);
                updateGradient();
            });

            // Update seekbar organically as song plays
            audio.addEventListener('timeupdate', () => {
                if (!isDragging) {
                    progressBar.value = Math.floor(audio.currentTime);
                    currentTimeEl.textContent = formatTime(audio.currentTime);
                    updateGradient();
                }
            });

            // Revert state when song ends
            audio.addEventListener('ended', () => {
                playIcon.classList.remove('d-none');
                pauseIcon.classList.add('d-none');
                progressBar.value = 0;
                currentTimeEl.textContent = "0:00";
                progressBar.style.background = '#e9ecef';
            });

            // Mute / Unmute
            if (muteBtn) {
                muteBtn.addEventListener('click', () => {
                    audio.muted = !audio.muted;
                    if (audio.muted) {
                        muteBtn.innerHTML = '<svg width="22" height="22" fill="#555" viewBox="0 0 24 24"><path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/></svg>';
                    } else {
                        muteBtn.innerHTML = '<svg width="22" height="22" fill="#555" viewBox="0 0 24 24"><path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" /></svg>';
                    }
                });
            }
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCustomAudioPlayers);
    } else {
        initCustomAudioPlayers();
    }
})();
</script>