@extends('layouts.app')

@section('content')

<section class="content-header" style="margin-bottom:20px">
    <h1>Create New Live Channel</h1>
</section>
<!-- /.box -->

@if (count($errors) > 0)
<div class="alert alert-danger">
    <strong>Whoops!</strong> There were some problems with your input.<br><br>
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Add Live Channel</h3>
        <div class="pull-right">
            <button class="btn btn-success btn-sm pull-right" onclick="window.history.back();">Back</button>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <form id="createMediaForm" class="form-horizontal addBorderClass" role="form" enctype="multipart/form-data" method="POST" action="{{ route('media.store') }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="row">

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Wowza Server Url:</label>
                        <input type="text" class="col-md-4" name="wowza_server_url" placeholder="Wowza Server Url">
                        <div class="col-md-3"></div>
                        <br><br>
                        <span class="col-md-2"></span><span>(Ex.: rtmp://103.95.132.59:1935/videostreaminglive/name_of_channel)</span>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Edge Server Url:</label>
                        <input type="text" class="col-md-4" name="edge_server_url" placeholder="Edge Server Url">
                        <div class="col-md-3"></div>
                        <br><br>
                        <span class="col-md-2"></span><span>(Ex.: http://edgeplive.msgnaa.info:8081, http://103.95.132.77:8080/live/test.m3u8)  (IPTV : {{ getStreamPath('h2') }})</span>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12" id="appName">
                    <div class="form-group">
                        <label class="col-md-2">Application Name:</label>
                        <input type="text" id="appNameId" class="col-md-4" name="app_name" placeholder="Application Name">
                        <div class="col-md-3"></div>
                        <br><br>
                        <span class="col-md-2"></span><span>(Ex.: plive, IPTV, live)</span>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12" id="appName">
                    <div class="form-group">
                        <label class="col-md-2">Application Type:</label>
                        <input type="text" id="appTypeId" class="col-md-4" name="app_type" placeholder="Application Type">
                        <div class="col-md-3"></div>
                        <br><br>
                        <span class="col-md-2"></span><span>(Ex.: Sports, Music, News )</span>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12" id="channelName">
                    <div class="form-group">
                        <label class="col-md-2">Channel Name:</label>
                        <input type="text" id="channelId" class="col-md-4" name="channel_name" placeholder="Channel Name">
                        <div class="col-md-3"></div>
                        <br><br>
                        <span class="col-md-2"></span><span>(Ex.: BBC)</span>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Playlist Name:</label>
                        <input type="text" id="playlistId" class="col-md-4" name="playlist_name" placeholder="Playlist Name">
                        <div class="col-md-3"></div>
                        <br><br>
                        <span class="col-md-2"></span><span>(Ex.: BBC/myStream)</span>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Load:</label>
                        <input type="text" class="col-md-4" name="load" value="100" placeholder="Load">
                        <div class="col-md-3"></div>
                        <br><br>
                        <span class="col-md-2"></span><span>(Ex.: 100)</span>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Logo:</label>
                        <input type="file" class="col-md-4" name="logo">
                        <div class="col-md-3"></div>
                    </div>
                </div>
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Apk Logo:</label>
                        <input type="file" class="col-md-4" name="apk_logo">
                        <div class="col-md-3"></div>
                    </div>
                </div>
                                 <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Type:</label>
                        <select class="col-md-2" name="type">
                            @foreach($arrType as $key=>$vtype)
                                <option value="{{ $key }}">{{ $vtype }}</option>
                            @endforeach
                        </select>
                        <div class="col-md-3"></div>
                    </div>
                </div>

		<div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Target App:</label>
                        <select class="col-md-2" name="target_app[]" multiple>
                            @foreach($targetApp as $key => $app)
                                <option value="{{ $app->id }}">{{ $app->name }}</option>
                            @endforeach
                        </select>
                        <div class="col-md-3"></div>
                    </div>
                </div>
                  <!---Divya (Target Countries)-->
                 <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Target Countries:</label>
                        <select class="col-md-2" name="target_countries" >
                            <option value="">None</option>
                           
                            @foreach($targetcountry as $key => $country)
                         
                                <option value="{{ $country['id']}}">{{ $country['country_name'] }}</option>
                            @endforeach
                        </select>
                        <div class="col-md-3"></div>
                    </div>
                </div>

                <!--Divya (Target Countries)--->

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">User Type:</label>
                        <select class="col-md-2" name="user_type">
                            @foreach($userType as $uType)
                            <option value="{{ $uType->id }}">{{ $uType->name }}</option>
                            @endforeach
                        </select>
                        <div class="col-md-3"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Status:</label>
                        <select class="col-md-2" name="status">
                            <option value='inactive'>Inactive</option>
                            <option value='active'>Active</option>
                        </select>
                        <div class="col-md-3"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Groups:</label>
                        <input type="text" class="col-md-4 group" name="group_name[0]" value="Global">
                        <input type="hidden" class="col-md-4 groupId" name="group_id[0]" value="1">
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_group">Add</button>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Upload Account:</label>
                        <input type="text" class="col-md-4" name="upload_account" placeholder="Enter Account name">
                        <div class="col-md-3">
                        </div>
                    </div>
                </div>
                <div class="group_fields_container"></div>

                <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                    <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="{{ asset('/js/custom.js') }}"></script>
<script type="text/javascript">
                $(document).ready(function () {
                    //Add multiple groups
                    var x = 0; //initialize counter for text box
                    $('.add_group').click(function (e) { //click event on add more fields button
                        e.preventDefault();

                        x++; //counter increment
                        $('.group_fields_container').append('<div class="addGroup col-xs-12 col-sm-12 col-md-12"><div class="form-group"><div class="col-md-2"></div><input type="text" class="col-md-4 group" id="group_' + x + '" name="group_name[]"><input type="hidden" class="groupId" name="group_id[]"><div class="col-md-3"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                        $('#group_' + x).rules('add', {required: true, notEqualToGroup: ['.group'], messages: {required: "Please enter group."}});

                    });
                    $('.group_fields_container').on("click", ".remove_field", function (e) {
                        //user click on remove text links
                        e.preventDefault();
                        $(this).parents('div[class^="addGroup"]').remove();
                        x--;
                    })

                    //For groups
                    $(document).on("focus", ".group", function () {
                        var that = $(this);
                        $(this).autocomplete({
                            source: function (request, response) {
                                $.ajax({
                                    url: '/groups/autoCompleteGroup',
                                    type: "POST",
                                    data: {"_token": "{{ csrf_token() }}", "name": that.val()},
                                    success: function (data) {
                                        response(data);
                                    }
                                });
                            },
                            minLength: 1,
                            select: function (event, ui) {
                                that.siblings('.groupId').val(ui.item.id);
                            }
                        });
                    });

                    $("#createMediaForm").validate({
                        rules: {
                            wowza_server_url: {
                                required: true,
                                remote: {
                                    type: "POST",
                                    url: '/media/validate_wowzaurl',
                                    data: {'_token': '{{ csrf_token() }}'}
                                }
                            },
                            edge_server_url: {required: true},
                            app_name: {required: true},
                            channel_name: {
                                required: true,
                                remote: {
                                    type: "POST",
                                    url: '/media/validate_channel',
                                    data: {'_token': '{{ csrf_token() }}'}
                                }
                            },
                            playlist_name: {required: true},
                            load: {required: true}
                        },
                        messages: {
                            wowza_server_url: {required: "Please enter server url.", remote: "Wowza url already exist."},
                            edge_server_url: {required: "Please enter edge server url."},
                            app_name: {required: "Please enter application name."},
                            channel_name: {required: "Please enter channel name.", remote: "Channel already exist."},
                            playlist_name: {required: "Please enter playlist name."},
                            load: {required: "Please enter load value."}
                        }
                    });

                    //Fill playlist
                    $("#playlistId").focus(function () {
                        var channel = $(this).parent().parent().siblings("#channelName").find("#channelId").val().toLowerCase();
                        var res = channel.replace(/\s/g, "");
                        var playlist = 'pedge/' + res;
                        $(this).val(playlist);

                    });
                });
</script>

@endsection