@section('title', __('radio.menu_item_5_sub_3'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/flatpickrTheme.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_3') }}
                    </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_3') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

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

            @if(!$streamData->plan_reports)

                <div class="block block-rounded">
                    <div class="block-content">
                        <div class="py-6 text-center">
                            <i class="fa fa-triangle-exclamation fa-3x d-block mb-2"></i>
                            <h4 class="fw-semibold mb-2">{{ __('radio.plan_unavailable_title') }}</h4>
                            <small class="text-muted">{{ __('radio.plan_unavailable_desc') }}</small></div>
                    </div>
                </div>

            @else

            <div class="block block-rounded">
                <div class="block-content p-0">

                    <div class="row row-cols-lg-auto align-items-center pt-3 ps-4 pe-2 mb-3">
                        <div class="col-12 mb-3">
                            <label class="form-label" for="period-day">{{ __('radio.reports_filter_day') }}</label>
                            <input type="text" class="js-flatpickr form-control period" name="period-day" value="{{ ($date ? date('d/m/Y',strtotime($date)) : date('d/m/Y')) }}" data-date-format="d-m-Y">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label" for="period-time">{{ __('radio.reports_filter_hour') }}</label>
                            <select class="periodTime form-select"> <option value="">{{ __('radio.reports_all_day') }}</option> <option value="23" {{ ($time == '23' ? 'selected' : '') }}> 23h </option> <option value="22" {{ ($time == '22' ? 'selected' : '') }}> 22h </option> <option value="21" {{ ($time == '21' ? 'selected' : '') }}> 21h </option> <option value="20" {{ ($time == '20' ? 'selected' : '') }}> 20h </option> <option value="19" {{ ($time == '19' ? 'selected' : '') }}> 19h </option> <option value="18" {{ ($time == '18' ? 'selected' : '') }}> 18h </option> <option value="17" {{ ($time == '17' ? 'selected' : '') }}> 17h </option> <option value="16" {{ ($time == '16' ? 'selected' : '') }}> 16h </option> <option value="15" {{ ($time == '15' ? 'selected' : '') }}> 15h </option> <option value="14" {{ ($time == '14' ? 'selected' : '') }}> 14h </option> <option value="13" {{ ($time == '13' ? 'selected' : '') }}> 13h </option> <option value="12" {{ ($time == '12' ? 'selected' : '') }}> 12h </option> <option value="11" {{ ($time == '11' ? 'selected' : '') }}> 11h </option> <option value="10" {{ ($time == '10' ? 'selected' : '') }}> 10h </option> <option value="09" {{ ($time == '09' ? 'selected' : '') }}> 09h </option> <option value="08" {{ ($time == '08' ? 'selected' : '') }}> 08h </option> <option value="07" {{ ($time == '07' ? 'selected' : '') }}> 07h </option> <option value="06" {{ ($time == '06' ? 'selected' : '') }}> 06h </option> <option value="050" {{ ($time == '05' ? 'selected' : '') }}> 05h </option> <option value="04" {{ ($time == '04' ? 'selected' : '') }}> 04h </option> <option value="03" {{ ($time == '03' ? 'selected' : '') }}> 03h </option> <option value="02" {{ ($time == '02' ? 'selected' : '') }}> 02h </option> <option value="01" {{ ($time == '01' ? 'selected' : '') }}> 01h </option> <option value="00" {{ ($time == '00' ? 'selected' : '') }}> 00h </option> </select>
                        </div>

                        <!--div class="col-12 mb-3">
                            <label class="form-label" for="period-day">Nome do áudio</label>
                            <input type="text" class="form-control fileName"  name="fileName" placeholder="Arquivo..">
                        </div-->

                        <div class="ml-auto me-2"><a href="{{ route('radio.reports.r.export',[$date,$time]) }}" class="btn btn-outline-secondary">
                                <i class="fa fa-fw fa-download me-1"></i> {{ __('radio.reports_export') }}
                            </a></div>
                    </div>
                    <hr class="mb-0">

                    <table class="table table-striped table-vcenter mt-0 mb-0">
                        <tbody id="reports-container">
                        <!--tr>
                            <td class="text-center fw-semibold" style="width: 100px;">13:38:25</td>
                            <td  class="text-center" style="width: 120px;"><div class="d-inline-block px-2 py-0 rounded-3 fs-xs fw-semibold text-white bg-primary-dark-op">Auto DJ</div></td>
                            <td><span class="badge bg-info fw-sm me-2">Dinâmico</span> Hora certa - Masculino 1</td>
                        </tr>
                        <tr>
                            <td class="text-center fw-semibold" style="width: 100px;">13:38:25</td>
                            <td  class="text-center" style="width: 120px;"><div class="d-inline-block px-2 py-0 rounded-3 fs-xs fw-semibold text-white bg-city-op">AO VIVO</div></td>
                            <td>Locutor: <b>xxx</b> - Áudio</td>
                        </tr>
                        <tr>
                            <td class="text-center fw-semibold" style="width: 100px;">13:38:25</td>
                            <td  class="text-center" style="width: 120px;"><div class="d-inline-block px-2 py-0 rounded-3 fs-xs fw-semibold text-white bg-info">Retransmissão</div></td>
                            <td>Estação: <b>xxx</b> -</td>
                        </tr-->
                        </tbody>
                    </table>
                    <div class="ajax-load text-center mt-2 pb-2">{{ __('radio.msg_loading') }}</div>
                </div>
            </div>

                @endif

        </div>
    </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 src="/assets/js/plugins/flatpickr/flatpickr.min.js"></script>
<script src="https://npmcdn.com/flatpickr@4.6.13/dist/l10n/pt.js"></script>
<script>

    var file_srv = "{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL') }}"; var file_hash = "{{ $streamData->port }}";

    $(".js-flatpickr").flatpickr({
        enableTime: false,
        minDate: "{{ date('d/m/Y', strtotime('-1 year')) }}",
        maxDate: "today",
        locale: "pt",
        dateFormat: "d/m/Y"
    });
    loadMore(0);
    function formatDate(data, formato) {
        if (formato == 'pt-br') {
            return (data.substr(0, 10).split('-').reverse().join('/'));
        } else {
            return (data.substr(0, 10).split('/').reverse().join('-'));
        }
    }

    $(".period").change(function() {
        var last_id = $(".report_item:last").attr("id");
        loadMore(last_id,true);
    });

    $(".periodTime").change(function() {
        var last_id = $(".report_item:last").attr("id");
        loadMore(last_id,true);
    });

    $(".fileName").change(function() {
        var last_id = $(".report_item:last").attr("id");
        loadMore(last_id,true);
    });

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            var last_id = $(".report_item:last").attr("id");
            if(!$('.report_item:last').hasClass('noResultReport')){
            loadMore(last_id);
            }
        }
    });

    function loadMore(last_id,cl = null){
        var period = formatDate($('.period').val());
        var time = $('.periodTime').val();
        var fileName = $('.fileName').val();
        if(cl){
            $("#reports-container").empty();
        }
        $.ajax({
            url: '/radio/get/reports',
            type: "post",
            data: {
                port: file_hash,
                day: period,
                time: (time ? time : '0'),
                fileName: (fileName ? fileName : null),
                last: last_id

            },
            beforeSend: function(){
                $('.ajax-load').show();
            }
        }).done(function(data){
            $('.ajax-load').hide();
            if(data.total){
            $.each(data.data, function(k, v) {
                var finalHour = v.created_at.split(' ');
                dataReport = v.data.split('|');
                if(v.type == '2' && dataReport[0] == 'start'){
                    $("#reports-container").append('<tr class="report_item" id="'+v.id+'"><td class="text-center fw-semibold" style="width: 100px;">'+finalHour[1]+'</td> <td  class="text-center" style="width: 120px;"><div class="d-inline-block px-2 py-0 rounded-3 fs-xs fw-semibold text-white bg-city-op">AO VIVO</div></td> <td><i class="fa fa-microphone"></i> <i class="fa fa-angle-right" style="margin: 0 13px;"></i> '+dataReport[1]+' iniciou uma transmissão</td></tr>');
                }else if(v.type == '2' && dataReport[0] == 'end'){
                    $("#reports-container").append('<tr class="report_item" id="'+v.id+'"><td class="text-center fw-semibold" style="width: 100px;">'+finalHour[1]+'</td> <td  class="text-center" style="width: 120px;"><div class="d-inline-block px-2 py-0 rounded-3 fs-xs fw-semibold text-white bg-city-op">AO VIVO</div></td> <td><i class="fa fa-microphone-slash"></i> <i class="fa fa-angle-right" style="margin: 0 7px;"></i> '+dataReport[1]+' encerrou uma transmissão</td></tr>');
                }else if(v.type == '3'){
                    $("#reports-container").append('<tr class="report_item" id="'+v.id+'"><td class="text-center fw-semibold" style="width: 100px;">'+finalHour[1]+'</td> <td  class="text-center" style="width: 120px;"><div class="d-inline-block px-2 py-0 rounded-3 fs-xs fw-semibold text-white bg-info">Retransmissão</div></td> <td>'+v.data+'</td></tr>');
                }else{
                $("#reports-container").append('<tr class="report_item" id="'+v.id+'"><td class="text-center fw-semibold" style="width: 100px;">'+finalHour[1]+'</td> <td  class="text-center" style="width: 120px;"><div class="d-inline-block px-2 py-0 rounded-3 fs-xs fw-semibold text-white bg-primary-dark-op">Auto DJ</div></td> <td>'+v.data+'</td></tr>');
                }
            });
            }else{
                var numItems = $('.report_item').length;
                if(!numItems) {
                    $("#reports-container").append('<tr class="report_item noResultReport"><td colspan="3" style="--bs-table-accent-bg:#fff" class="text-center">Nenhum resultado encontrado.</td></tr>');
                }
            }
        }).fail(function(jqXHR, ajaxOptions, thrownError){

        });
    }

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