@extends('layouts.app')
@section('header')
{!! $header !!}
@endsection

@section('content')

<div class="box-center">
    <div class="row">
        <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">
            <div class="conten-responsive">

                <div class="carrousel auto home">
                    <ul class="slides">
                        <li><img src="{{asset('img/Imagen1.png')}}" height="500px" width="430px" alt="" /></li>
                        <li><img src="{{asset('img/Imagen2.jpg')}}" height="500px" width="430px" alt="" /></li>
                        <li><img src="{{asset('img//Imagen3.jpg')}}" height="500px" width="430px" alt="" /></li>
                        <li><img src="{{asset('img/Imagen4.jpg')}}" height="500px" width="430px" alt="" /></li>
                        <li><img src="{{asset('img/Imagen5.jpg')}}" height="500px" width="430px" alt="" /></li>
                        <li><img src="{{asset('img/Imagen6.jpg')}}" height="500px" width="430px" alt="" /></li>
                        <li><img src="{{asset('img/Imagen7.jpg')}}" height="500px" width="430px" alt="" /></li>
                    </ul>
                    <button class="prev" title="précédent" style="outline: 0px">Précédent</button>
                    <button class="next" title="suivant" style="outline: 0px">Suivant</button>
                    <ul class="puces"></ul>
                    <span class="indic"></span>
                </div>
            </div>
        </div>

        <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12">
            <div class="mt-3 mb-5">
                <div class="image-cover" style="background-image: url({{asset('img/ImagenSong.png')}});"></div>

                                    <div class="text-center" style=" padding-top:10px; padding-bottom:5px">
                        <span id="programa" class="programa"> Estás escuchando ahora </span>
                        <div class="tema_artista_generico"></div>
                    </div>
                
                <div class="actions">
                    <div id="content">
                        <audio data-media="https://mdstrm.com/audio/6598b6ab95a235085823b24f/icecast.audio" data-name="Radio Cumbia Mix" data-slogan="Música sin parar" data-method="live" data-adTagUrl="https://pubads.g.doubleclick.net/gampad/ads?iu=/19611833/pre_roll_cumbia&description_url=https%3A%2F%2Fradiocumbiamix.com%2F&tfcd=0&npa=0&ad_type=audio&sz=1x1&min_ad_duration=10000&max_ad_duration=20000&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=" data-key="311091" data-x="imasdk, ads" id="audio-player">
                        </audio>
                    </div>
                    <div id="adContainer"></div>
                                            <section class="center_content">
                            <section class="ads-audio " id="playerComponent" data-key="311091">
                                <div class="radio-section">
                                    <div class="radiovivo">
                                        <div class="bloque text-center">
                                            <p id="horario" class="horario"></p>
                                            <div id="playButton" class="reproductor icon-player animated pulse infinite play-init" data-active>
                                                <i class="fa fa-play" aria-hidden="true"></i>
                                            </div>
                                            <span class="total-time"></span>
                                            <span class="title-live"></span>
                                            <div id="control_volumen" class="volumen_radio">
                                                <div class="volumen-progress">
                                                    <div id="muteButton" class="volumen-icono vol-hard"><i class="fa fa-volume-up" aria-hidden="true"></i></div>
                                                    <div id="unMuteButton" class="volumen-icono vol-hard" style="display:none"></div>
                                                    <div class="barra-volumen">
                                                        <div class="barra-progreso">
                                                            <div class="volumenProgreso" style="width: 89.6875%;"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </section>
                                    </div>
                <p class="problema text-center">
                    <a target="_blank" href="https://docs.google.com/forms/d/1rHfMyGnkiFC2QTmP0MucwNAEYLOb0PTimOXn8d55U6I/prefill">¿Deseas
                        reportar un problema?</a>
                </p>
            </div>
        </div>
    </div>
</div>


@endsection

@section('footer')
{!! $footer !!}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    var elem = document.createElement('div');
    elem.className = 'adclass';
    document.body.appendChild(elem);
    window.setTimeout(function() {
        var isAdblockEnabled = !(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
        if (isAdblockEnabled) {
            console.log('modal');
            swal({
                title: "Estás usando AdBlock!!",
                text: "Por favor desactiva AdBlock para que puedas disfrutar de nuestro contenido.",
                icon: "warning",
            });
        }
    }, 0);
</script>
@endsection