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

<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 role="form" method="POST" action="{{ route('media.index') }}">
            <div class="form-group col-md-4 ">
                <label for="exampleInputEmail1">IPTV Origin</label>
                <select id="iptvorigin" class="form-control">
                    <option value="">Select origin</option>
                    @foreach ($movies['movie_names'] as $movie)
                    <option value="{{$movies['movies'][$movie]}}">{{$movie}}</option>
                    @endforeach
                </select>

                <small id="emailHelp" class="form-text text-muted">Select the origin stream to check if it is working</small>
            </div>
            <div class="form-group col-md-1">
                <label for="exampleInputPassword1">&nbsp;</label>
                <button type="submit" class=" form-control btn btn-primary btn-sm btn-small">Play</button>
            </div>
        </form>

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


            <div id="player"></div>
            <script>
var player = new Clappr.Player({source: "http://103.95.132.77:8080/live/5768.m3u8", parentId: "#player"});
            </script>


        </div>




        <script lang="javascript">

            $("#iptvorigin").on('change', function (e) {
                var item = $(this);
                //$("#player-wrapper").html('');
                //alert(item.val());

                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    method: "POST",
                    url: "{{ route('media.restream') }}",
                    data: {name: "John", location: "Boston"}
                })
                .done(function (msg) {
                    alert("Data Saved: " + msg);
                });


                // playPlayer(item.val());
            })

        </script>
        @endsection