@extends('layouts.app')

@section('content')

<div class="alert alert-danger loaderwowza">
    <p>Videos are synching with wowza server please wait .. </p>
</div>

<section class="content-header" style="margin-bottom:20px">
    <h1>
        pLive Management
        <small>manage pLive Channel</small>
    </h1>
</section>
<!-- /.box -->

@if ($message = Session::get('success'))
<div class="alert alert-warning shows-div">
    <p>{{ $message }}</p>
</div>
@elseif ($message = Session::get('failure'))
<div class="alert alert-warning shows-div">
    <p>{{ $message }}</p>
</div>
@endif	

<div class="box">
    <div class="box-header">
        <h3 class="box-title">pLive Data</h3>
        <div class="pull-right">
            @if(count($videos) < 1)
            <a class="btn btn-success btn-sm" href="{{ route('videos.lsvod_add') }}">Add Schedule</a>
            @endif
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <table class="table table-bordered table-hover dataTable">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Action</th>
            </tr>

            @if($videos)
            @foreach ($videos as $key => $video)
                        <tr>
                <td>{{ $video->id }}</td>
                <td>{{ $video->name }}</td>
                <td class="col-md-2">
                    <a class="btn btn-success btn-sm btn-block space_buttons watch_smil" data-id="{{ $video->id }}" data-src="@if($smilPath){{ (new \App\Http\Helper)->read_xml($smilPath) }}@else {{ 'File not exist'}}@endif">View</a>

                    <a class="btn btn-primary btn-sm btn-block space_buttons" href="{{ route('plives.edit',$video->id) }}">Edit</a>

                    @if($video->status == 'published')
                    <a class="btn btn-warning btn-sm btn-block space_buttons unpublish" href="#" data-id="{{ $video->id }}" data-status="unpublished" data-channel="">Publish to wowza</a>
                    @else
                    <a class="btn btn-warning btn-sm btn-block space_buttons unpublish" href="#" data-id="{{ $video->id }}" data-status="published" data-channel="">Publish to wowza</a>
                    @endif

<!-- <a class="btn btn-primary btn-sm btn-block space_buttons btnABR" href="#" data-plive_id="{{ $video->id }}"><img id="loading-image" style="display: none;" src="../../ajax-loader.gif"/> Publish smil for ABR</a> -->
                </td>
            </tr>
            @endforeach
            @else
            <tr> <td colspan="5">No record available. </td></tr>
            @endif
        </table>
    </div>

    <div class="well well-lg" style="height: 300px">
        <div class="col-lg-12 "> 
            <p>Please load schedule after publishing to wowza by copy and paste rtmp path</p>
            <iframe scrolling="no" style="width: 100%; height: 200px;" src="http://admin.msgnaa.info/ModuleScheduleClient/LoadSchedule.html">
            <p>Your browser does not support iframes.</p>
            </iframe>
            <p>rtmp://103.95.132.59:1935/plive</p>
        </div>
    </div>

    <div class="modal fade" id="modalWatchSmil" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="add-modal-label">pLiveSmil.smil</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group" style="text-align:center;">
                        <textarea id="watchSmil" rows="20" cols="65" style="border:none;"></textarea>
                    </div>
                </div>
                <div class="modal-footer"></div> 
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $('.loaderwowza').hide();
    //Watch smil popup
    $(document).on('click', '.watch_smil', function (e) {
        e.preventDefault();

        $('#watchSmil').html($(this).attr('data-src'));
        //$('#add-modal-label').html('pLiveSmil_'+$(this).attr('data-id')+'.smil');
        $('#add-modal-label').html('pLiveSmil.smil');
        $('#modalWatchSmil').modal('show');
    });

    //unpublished button click
    $(document).on('click', '.unpublish', function (e) {
        e.preventDefault();

        var that = $(this);
        $.ajax({
            type: "POST",
            url: '/videos/change_plive_status',
            beforeSend: function () {
                $('.loaderwowza').show();
                $('.unpublish').addClass('disabled');
            },
            data: {"_token": "{{ csrf_token() }}", "id": $(this).data('id'), "status": $(this).data('status'), "channel": $(this).data('channel')},
            success: function (json) {
                if (json.status == 'success') {
                    $('.loaderwowza').hide();

                    $('.unpublish').removeClass('disabled');
                    if (json.message == 'published') {
                        // that.text('Publish');
                        //that.data('status', 'unpublished');
                        //that.removeClass( "btn-danger" ).addClass( "btn-success" );
                    } else if (json.message == 'unpublished') {
                        //that.text('Publish');
                        that.data('status', 'published');
                        //that.removeClass( "btn-success" ).addClass( "btn-danger" );
                    }

                } else if (json.status == 'failure') {
                    //that.css("display", "block");
                }
            }
        });
    });

    //Get data for ABR smil
    $(document).on('click', '.btnABR', function (e) {
        e.preventDefault();

        $('#loading-image').show();
        $.ajax({
            url: '/videos/abr_video_details',
            type: "POST",
            data: {'_token': '{{ csrf_token() }}', 'pliveId': $(this).data('plive_id')},
            success: function (data) {
                $('#loading-image').hide();
            }
        });
    });
</script>
@endsection