@section('title', __('radio.menu_item_5_sub_6'))
@section('head')
    <style>
        .gGrids{
            display: flex;
            flex-direction: column;
            padding: 10px;
            flex-wrap: nowrap!important;
            justify-content: space-between;
        }

        @media screen and (min-width:800px) {
            .gGrids {
                flex-wrap: wrap;
                flex-direction: row;
            }
            #search{
                width: 230px!important;
                margin-left: auto;
            }
        }

        #search{
            margin-left: 0px;
            width: 100%;
        }

        #buttons button {
            border: 1px solid #efefef;
            margin-right: 8px;
            margin-bottom: 10px;
            border: 0;
            padding: 8px;
            border-radius: 3px;
        }

        #buttons button.active {
            background-color: #7a7a7a;
            color: #fff;
        }

        #buttons {
            padding-bottom: 8px;
        }

        button:hover{
            background-color: #239e76;
            color: #fff;
        }
    </style>
	@if(Config::get('constants.IS_APP'))
	<style>
		.sFb{
			flex-basis:100%;
			border:1px solid #b5b5b5;
		}
		.gGrids button{
			    color: #000!important;
		}
	</style>
	@endif
    <link rel="stylesheet" href="/assets/css/library.css">
@endsection
@include('includes/header')
@include('includes/topRadio')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.menu_item_5_sub_6') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('radio.menu_item_5') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.menu_item_5_sub_6') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            @if($streamData->plan_contents == 0)
                <div class="block block-rounded">
                    <div class="block-content text-center pb-3">
                        <i class="fa fa-ban display-5 mb-2"></i>
                        <p class="mb-0">{{ __('radio.library_no_plan') }}</p>
                        <small>{{ __('radio.library_no_plan_desc') }}</small>
                    </div>
                </div>
            @else
            <div class="block block-rounded">
                <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}">
                        <a href="{{ route('radio.library.r') }}" class="nav-link {{ (!$type || $type == 'programetes' ? 'active' : '') }} {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.library_tab_programetes') }}</a>
                    </li>
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}">
                        <a href="{{ route('radio.library.r','programas') }}" class="nav-link {{ ($type == 'programas' ? 'active' : '') }} {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.library_tab_programas') }}</a>
                    </li>
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}">
                        <a href="{{ route('radio.library.r','programas-fds') }}" class="nav-link {{ ($type == 'programas-fds' ? 'active' : '') }} {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.library_tab_programas_fds') }}</a>
                    </li>
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}">
                        <a href="{{ route('radio.library.r','vinhetas') }}" class="nav-link {{ ($type == 'vinhetas' ? 'active' : '') }} {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.library_tab_vinhetas') }}</a>
                    </li>
                    <li class="nav-item {{ (Config::get('constants.IS_APP') ? 'sFb' : '') }}">
                        <a href="{{ route('radio.library.r','campanhas') }}" class="nav-link {{ ($type == 'campanhas' ? 'active' : '') }} {{ (Config::get('constants.IS_APP') ? 'w-100 text-center' : '') }}">{{ __('radio.library_tab_campanhas') }}</a>
                    </li>
                </ul>
                <div class="lib-content tab-content p-0">
                    <div class="tab-pane active" id="btabs-static-home" role="tabpanel" aria-labelledby="btabs-static-home-tab">

                        @if($type == 'vinhetas')
                            <div id="libraryList" class="list-container">
                            <div class="lib-items mt-0">
                                @foreach($allLibrary as $lib)
                                <div class="lib-item" data-type="SISVinhetas" data-path="{{ $lib->name }}.mp3">
                                    <div class="player-progress-bar">
                                        <div class="player-progress-bar-value"></div>
                                    </div>
                                    <div class="lib-item-internal">
                                        <div class="lib-item-name"><i class="fa fa-music"></i> {{ $lib->name }}</div>
                                    </div>
                                    <div class="lib-item-actions">
                                        <button class="lib-item-listen btn btn-secondary btn-sm">
                                            <i class="fa fa-headphones"></i>
                                            <i class="fa fa-stop"></i>
                                        </button>
                                        <a class="lib-item-download btn btn-primary btn-sm" href="/radio/download-library/SISVinhetas/{{ str_replace('/','-brasbar',EncryptBras($streamData->port)) }}/{{ date('Y-m-d') }}/{{ str_replace('/','-brasbar',EncryptBras($lib->name.'.mp3')) }}">{{ __('radio.library_download') }}</a>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            </div>


                        @elseif($type == 'campanhas')

                            <div id="libraryList" class="list-container">

                                @foreach($allLibrary as $lib)
                                    <div class="lib-content pt-2 pb-2">
                                        <div class="lib-content__info">
                                            <div class="lib-content__details ms-3">
                                                <div class="lib-content__name">{{ $lib->name }}</div>
                                            </div>
                                            <div class="lib-content__availability ms-3 me-3">
                                                <div class="lib-content__availability-item">
                                                    <div class="lib-content__availability-label">{{ __('radio.library_label_blocks') }}</div>
                                                    <div class="lib-content__availability-value">{{ ($lib->total == '1' ? $lib->total.' bloco' : $lib->total.' blocos') }}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="lib-items ms-3 me-3">
                                            @php
                                                for ($i=1; $i <= $lib->total; $i++) {
                                                    $finalName = $lib->name.'0'.$i;
                                            @endphp

                                            <div class="lib-item" data-type="Campanhas" data-path="{{ $finalName }}.mp3">
                                                <div class="player-progress-bar">
                                                    <div class="player-progress-bar-value"></div>
                                                </div>
                                                <div class="lib-item-internal">
                                                    <div class="lib-item-name"><i class="fa fa-music"></i> {{ $finalName }}</div>
                                                </div>
                                                <div class="lib-item-actions">
                                                    <button class="lib-item-listen btn btn-secondary btn-sm">
                                                        <i class="fa fa-headphones"></i>
                                                        <i class="fa fa-stop"></i>
                                                    </button>
                                                    <a class="lib-item-download btn btn-primary btn-sm" href="/radio/download-library/Campanhas/{{ str_replace('/','-brasbar',EncryptBras($streamData->port)) }}/{{ date('Y-m-d') }}/{{ str_replace('/','-brasbar',EncryptBras($finalName.'.mp3')) }}">{{ __('radio.library_download') }}</a>
                                                </div>
                                            </div>
                                            @php } @endphp

                                        </div>
                                    </div>
                                @endforeach

                                </div>

                        @else

                        @if($allLibrary->count() == 0)
                            <div class="py-6 text-center"> <i class="fa fa-info-circle fa-3x d-block mb-3"></i> <strong class="fw-semibold">{{ __('radio.library_empty') }}</strong></div>
                        @else
                        <div class="gGrids">
                        <div id="buttons" style="order: -1;"></div>
                        <div id="search">
                            <input type="text" class="form-control" placeholder="{{ __('radio.library_search_placeholder') }}" id="filter-search" />
                        </div>
                        </div>


                        @endif
                        <div id="libraryList" class="list-container">

                            @php
                            foreach($allLibrary as $lib){
                                $category = DB::table('library_categories')->where('id','=',$lib->category)->get()->first();
                            @endphp
                            <div class="list-block" data-tags="{{ $category->name }}" id="{{ strtolower($lib->name) }}">
                                <div class="lib-icon">
                                    <img src="/contents/{{ $lib->img }}">
                                </div>
                                <div class="lib-content block-content--with-periodicity">
                                    <div class="lib-content__info">
                                        <div class="lib-content__details ms-3">
                                            <div class="lib-content__name">{{ $lib->name }}</div>
                                            <div class="lib-content__updated">
                                                {{ __('radio.library_last_update') }} <span><strong>{{ date('d/m/Y H:i',strtotime($lib->last_update)) }}</strong></span>
                                            </div>
                                            <div class="lib-content__description">{{ $lib->description }}</div>
                                        </div>
                                        <div class="lib-content__availability ms-3 me-3">
                                            <div class="lib-content__availability-item">
                                                <div class="lib-content__availability-label">{{ __('radio.library_label_period') }}</div>
                                                <div class="lib-content__availability-value">{{ ($type == 'programas-fds' ? 'Fim de semana' : ($lib->period == '1' ? 'Segunda a Sexta' : 'Segunda a Sábado')) }}</div>
												@if($lib->over_msg)
													<span class="badge bg-warning">{{ $lib->over_msg }}</span>
												@endif
                                            </div>
                                            <div class="lib-content__availability-item">
                                                <div class="lib-content__availability-label">{{ __('radio.library_label_blocks') }}</div>
                                                <div class="lib-content__availability-value">{{ ($lib->total == '1' ? $lib->total.' bloco' : $lib->total.' blocos') }}</div>
                                            </div>
                                            <div class="lib-content__availability-item">
                                                <div class="lib-content__availability-label">{{ __('radio.library_label_average_time') }}</div>
                                                <div class="lib-content__availability-value">{{ date('H:i:s',strtotime($lib->average)) }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="lib-items ms-3 me-3">
                                        @php
                                        for ($i=1; $i <= $lib->total; $i++) {
                                            if (strpos($lib->name, 'Previsão do tempo') !== false){
                                                $finalName = $lib->name.' - '.($i == 1 ? 'Centro oeste' : ($i == 2 ? 'Nordeste' : ($i == 3 ? 'Norte' : ($i == 4 ? 'Sudeste' : 'Sul'))));
                                            } else{
                                                $finalName = $lib->name.($lib->total == 1 ? ' - Completo' : ' - Parte 0'.$i);
                                                if ($lib->id === 193)
                                                {
                                                  $finalName = $lib->name.' ('.$i.')';
                                                }
                                            }
                                        @endphp
                                        <div class="lib-item" data-type="{{ (!$type || $type == 'programetes' ? 'Programetes' : ($type == 'programas' ? 'Programas' : ($type == 'programas-fds' ? 'Programas fim de semana' :'Vinhetas'))) }}" data-path="{{ $finalName.'.mp3' }}">
                                            <div class="player-progress-bar">
                                                <div class="player-progress-bar-value"></div>
                                            </div>
                                            <div class="lib-item-internal">
                                                <div class="lib-item-name"><i class="fa fa-music"></i> {{ $finalName }}</div>
                                            </div>
                                            <div class="lib-item-actions">
                                                <!--span class="lib-item-duration">00:00</span-->
                                                <button class="lib-item-listen btn btn-secondary btn-sm">
                                                    <i class="fa fa-headphones"></i>
                                                    <i class="fa fa-stop"></i>
                                                </button>
                                                <a class="lib-item-download btn btn-primary btn-sm" href="/radio/download-library/{{ (!$type || $type == 'programetes' ? 'Programetes' : ($type == 'programas' ? 'Programas' : ($type == 'programas-fds' ? 'Programas fim de semana' :'Vinhetas'))) }}/{{ str_replace('/','-brasbar',EncryptBras($streamData->port)) }}/{{ date('Y-m-d') }}/{{ str_replace('/','-brasbar',EncryptBras($finalName.'.mp3')) }}/{{ $lib->id }}">{{ __('radio.library_download') }}</a>
                                            </div>
                                        </div>
                                        @php } @endphp


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


                            @php } @endphp

					

                        </div>
                        @endif
                    </div>
                </div>
            </div>

        </div>

        @endif

    </div>

    <div id="player"></div>

</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script>

    function stopAudioPlayer() {
        var playing = $('.lib-item.playing');

        if (playing.length) {
            playing.find('.player-progress-bar-value').css({ width: 0 });
            playing.removeClass('playing');

            var audio = $('#player audio').get(0);

            audio.pause();
            audio.src = '';
            audio.load();
        }
    }

    $('body').on('click', '.player-progress-bar', function (event) {
        var audio = $('#player audio');
        if (audio.length) {
            audio = audio[0];
            var width = $(this).width();
            var percentage = event.offsetX / width;
            audio.currentTime = percentage * audio.duration;
        }
    });

    $('body').on('click', '.lib-item-listen', function () {
        var item = $(this).closest('.lib-item');
        var audioPath = 'https://{{ $siteData->stream_server }}.brascast.com/library/lib-listen.php?t=' + item.data('type')+'&d={{ date('Y-m-d') }}&f=' + item.data('path');
        var isPlaying = item.hasClass('playing');

        stopAudioPlayer();

        if (!isPlaying) {
            var player = $('#player');

            item.find('.block-item-options.open').removeClass('open');
            item.addClass('playing');
            player.html('<audio><source src="' + audioPath + '" type="audio/mpeg" /></audio>');

            var playerAudio = player.find('audio');
            var playerSource = player.find('source');

            // Audio finalizado
            playerAudio.on('ended', stopAudioPlayer);

            // Atualiza a barra de progresso do item
            playerAudio.on('timeupdate', function (event) {
                var audio = $(this)[0];
                var percentage = (audio.currentTime * 100) / audio.duration;
                $('.playing .player-progress-bar-value').css({ width: percentage + '%' });
            });

            // qualquer erro gerado faz o player parar
            playerSource.on('error', stopAudioPlayer);
            player.on('error', stopAudioPlayer);
            playerSource[0].addEventListener('error', stopAudioPlayer, false);

            playerAudio[0].play();
        }
        return false;
    });


    (function () {
        var $imgs = $('#libraryList .list-block');
        var $buttons = $('#buttons');
        var tagged = {};

        $imgs.each(function () {
            var img = this;
            var tags = $(this).data('tags');

            if (tags) {
                tags.split(',').forEach(function (tagName) {
                    if (tagged[tagName] == null) {
                        tagged[tagName] = [];
                    }
                    tagged[tagName].push(img);
                });
            }
        });

        $('<button/>', {
            text: 'Mostrar todos',
            class: 'active',
            click: function () {
                $(this).
                addClass('active').
                siblings().
                removeClass('active');
                $imgs.show();
            } }).
        appendTo($buttons);

        $.each(tagged, function (tagName) {
            var $n = $(tagged[tagName]).length;
            $('<button/>', {
                text: tagName + '(' + $n + ')',
                click: function () {
                    $(this).
                    addClass('active').
                    siblings().
                    removeClass('active');
                    $imgs.
                    hide().
                    filter(tagged[tagName]).
                    show();
                } }).
            appendTo($buttons);
        });
    })()(
        function () {
            var $imgs = $('#libraryList .list-block');
            var $search = $('#filter-search');
            var cache = [];

            $imgs.each(function () {
                cache.push({
                    element: this,
                    text: this.id.toLowerCase() });

            });

            function filter() {
                var query = this.value.trim().toLowerCase();
                cache.forEach(function (img) {
                    var index = 0;
                    if (query) { 
                        //console.log(img);
                        index = img.text.indexOf(query);
                    }
                    img.element.style.display = index === -1 ? 'none' : '';
                });
            }
            if ('oninput' in $search[0]) {
                $search.on('input', filter);
            } else {
                $search.on('keyup', filter);
            }
        }());





</script>
</body>
</html>