@extends('layouts.app')
@section('content')

<style>

    .modal-view-schedule{
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

</style>

<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>

<link rel="stylesheet" type="text/css" href="{{ asset('/css/media.css') }}">

<section class="content-header" style="margin-bottom:20px">
    <h1>
        IPTV Management
        <small>IPTV management</small>
    </h1>
</section>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">IPTV Management</h3>
    </div>
    <div class="panel-body">
        <form method="POST" action="{{ route('media.publishStreamSave') }}">
            {{ csrf_field() }}
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="row">
                    <div class="col-md-1 add_row_div pull-right">
                        <button class="add_row btn btn-warning pull-left btn-block" style="margin-top:25px;">Add More</button>
                    </div>
                </div>

                @if($sources->isEmpty())

                <div class="row-content"> 

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">Source</label>
                                <input  name="source[]" type="text" placeholder="" value="" title="" autocomplete="off" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">Destination</label>
                                <input  name="destination[]" type="text" placeholder="" value="" title="" autocomplete="off" class="form-control" required>
                            </div>
                        </div>

                        <div class="col-md-1">
                            <button class="remove_row btn btn-danger pull-left btn-block hide" style="margin-top:25px;">Remove</button>
                        </div>
                    </div> 
                </div>  
                <div class="add-row-content"></div>


                @endif

                @php
                $i=0;
                @endphp
                @foreach($sources as $key=>$value)
                <input type='hidden'  name='id[]' value='{{ $value->id }}'/>
                @if($i === 0)
                @php
                $hide = 'hide'
                @endphp
                <div class="row-content"> 
                    @else
                    @php
                    $hide = '';
                    @endphp
                    @endif
                    @php
                    $val = getDestination($value->destination);

                    @endphp
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="required">Source</label>
                                <input  name="source[]" type="text" placeholder="" value="{{$value->source}}" title="" autocomplete="off" class="form-control" required>

                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="required">Destination</label>
                                <input  name="destination[]" type="text" placeholder="" value="{{ $val }}" title="" autocomplete="off" class="form-control" required>
                                <small>{{ $value->destination }}</small>
                            </div>
                        </div>


                        <div class="col-md-1">
                            <button class="remove_row btn  btn-danger pull-left btn-block {{$hide}}" data-id='{{ $value->id }}' style="margin-top:25px;">Remove</button>
                        </div>
                        <div class="col-md-1">
                            <button class="view_stream btn btn-danger btn-block pull-left btn-warning" data-id='{{ $value->id }}' data-value="{{ $value->destination }}" style="margin-top:25px;">View Stream</button>
                        </div>
                        <div class="col-md-2 removeOnAdd">
                            <button class="schedule_download btn btn-block pull-left btn-primary" data-status='{{$value->status}}' data-endtime='{{$value->end_time}}' data-starttime='{{$value->start_time}}'   data-id='{{ $value->id }}' data-value="{{$val}}" style="margin-top:25px;">Schedule Download</button>
                        </div>

                        <div class="col-md-1">
                            <button class="view_schedule btn btn-block btn-danger pull-left" data-id='{{ $value->id }}' style="margin-top:25px;">View Schedule</button>
                        </div>
                    </div> 

                    @if($i===0)
                </div>

                @endif
                @php
                $i++;
                @endphp
                @endforeach

                <div class="add-row-content"></div>

            </div>
            <div>
                <div class="col-xs-12 col-sm-12 col-md-12">

                    <button type="submit" class="btn btn-success" style="margin-top:25px;">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>


@include('media.stream_modal')
@include('media.schedule_download')

<div class="modal fade" id="view_time_line"></div>

<script lang="javascript">

$(document).ready(function () {
    var player;
    $(".add_row").on('click', function (e) {
        e.preventDefault();

        $(".add-row-content").append($(".row-content").html());
        $(".add-row-content .removeOnAdd").remove();
        $(".add-row-content .remove_row").removeClass('hide');
        $(".add-row-content .add_row_div").remove();
    });

    $(".panel-body").on('click', '.remove_row', function (e) {
        e.preventDefault();
        var plId = $(this).data("id");

        $(this).parent().parent().remove();
        $.ajax({
            type: "DELETE",
            url: "{{ url('iptv/iptvRemove')}}/" + plId,
            data: {"_token": "{{ csrf_token() }}"},
            success: function (json) {

            }
        });


    });


    $(".panel-body").on('click', '.view_stream', function (e) {
        e.preventDefault();
        $('#streamModal').modal('toggle');
        var plId = $(this).data("value");

        player = $("#viewPlayerUrl").val();
        $("#player").html('');
        player = new Clappr.Player(
                {
                    source: plId, parentId: "#player"
                }
        );
    });




    $(".panel-body").on('click', '.view_schedule', function (e) {
        e.preventDefault();
        var plId = $(this).data("id");
        $.ajax({
            type: "GET",
            url: "{{ url('iptv/viewSchedule')}}/" + plId,
            data: {"_token": "{{ csrf_token() }}"},
            success: function (data) {
                $("#view_time_line").html(data);
                $("#view_time_line").modal('toggle');
            }
        });

    });


    $(".panel-body").on('click', '.schedule_download', function (e) {
        e.preventDefault();
        $('#scheduleDownload').modal('toggle');
        $('#streamUrl').val($(this).data("id"));
        $('#startTime').val($(this).data("starttime"));
        $('#endTime').val($(this).data("endtime"));
        $('#status').val($(this).data("status"));
    });


    $(".panel-body").on('click', '.view_stream_source', function (e) {
        e.preventDefault();
        $('#streamModal').modal('toggle');
        var plId = $(this).data("value");
        plId = plId.replace(";", "");
        player = $("#viewPlayerUrl").val();
        $("#player").html('');

        player = new Clappr.Player(
                {
                    source: plId, parentId: "#player"
                }
        );
    });

    $(".close").on('click', function () {
        player.stop();
    })




});


$("input[type='checkbox']").on('change', function () {
    $(this).val(this.checked ? "TRUE" : "FALSE");
})


</script>

@endsection