@extends('layouts.app')

@section('content')

<section class="content-header" style="margin-bottom:20px">
    <h1>Update 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">Edit 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="editMediaForm" class="form-horizontal addBorderClass" role="form" enctype="multipart/form-data" method="POST" action="{{ route('media.update', $media->id) }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="_method" value="PATCH">
            <input type="hidden" name="url" value="{{ $url }}"> 
            <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" value="{{ $media->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" value="{{ $media->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)</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" class="col-md-4" id="appNameId" name="app_name" placeholder="Application Name" value="{{ $media->app_name }}">
                        <div class="col-md-3"></div>
                        <br><br>
                        <span class="col-md-2"></span><span>(Ex.: plive)</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" class="col-md-4" id="appNameId" name="app_type" placeholder="Application Type: eg Sports, Music" value="{{ $media->app_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" class="col-md-4" id="channelId" name="channel_name" placeholder="Channel Name" value="{{ $media->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" class="col-md-4" id="playlistId" name="playlist_name" placeholder="Playlist Name" value="{{ $media->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" placeholder="Load" value="{{ $media->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 }}" @if($media->type == $key) selected @endif>{{ $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 targetAppSelect" name="target_app[]" multiple>
                            @foreach($targetApp as $key => $app)
                                <option value="{{ $app->id }}" @if(in_array($app->id, $mediaTarget)) selected @endif >{{ $app->name }}</option>
                            @endforeach
                        </select>
                        <div class="col-md-3"></div>
                    </div>
                </div>

                 <!---(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'] }}" @if(!empty($media->country_id) && ($media->country_id==$country['id'])) selected @endif >@if($countries="")None @else{{ $country['country_name'] }}@endif</option>
                        @endforeach
                          
                        </select>
                        <div class="col-md-3"></div>
                    </div>
                </div>

                <!-- (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">
                            <option value=''>Select</option>
                            <!-- <option value='normal' @if($media->user_type == 'normal') selected @endif>Normal</option>
                            <option value='kid' @if($media->user_type == 'kid') selected @endif>Kid</option> -->
                            @foreach($userType as $uType)
                            <option value="{{ $uType->id }}" @if($media->user_type_id == $uType->id) selected @endif>{{ $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='active' @if($media->status == 'active') selected @endif>Active</option>
                            <option value='inactive' @if($media->status == 'inactive') selected @endif>Inactive</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">Upload Account:</label>
                        <input type="text" class="col-md-4" name="upload_account" placeholder="Enter Account name" value="{{$media->upload_account}}">
                        <div class="col-md-3">
                        </div>
                    </div>
                </div>

                <!--Group section -->
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-2">Group:</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-3">
                            <button class="btn btn-sm btn-primary add_group">Add</button>
                        </div>
                    </div>
                </div>

                <div class="group_fields_container2">
                    @foreach($channelgps as $key=>$channelgp)
                    @if((new \App\Http\Helper)->getGroupName($channelgp) != 'Global')
                    <div class="addGroup2 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" name="group_name[]" value="{{ (new \App\Http\Helper)->getGroupName($channelgp) }}">
                            <input type="hidden" class="groupId" name="group_id[]" value="{{ $channelgp }}">
                            <div class="col-md-3">
                                <button class="btn btn-sm btn-danger remove_field">Remove</button>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                </div>

                <div class="group_fields_container"></div>
                <!--End Group section -->

                <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 video edit form
                    $('.group_fields_container2').on("click", ".remove_field", function (e) {
                        //user click on remove text links
                        e.preventDefault();
                        $(this).parents('div[class^="addGroup2"]').remove();
                    });

                    //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);
                            }
                        });
                    });

                    $("#editMediaForm").validate({
                        rules: {
                            wowza_server_url: {required: true},
                            edge_server_url: {required: true},
                            app_name: {required: true},
                            channel_name: {required: true},
                            playlist_name: {required: true},
                            load: {required: true}
                        },
                        messages: {
                            wowza_server_url: {required: "Please enter server url."},
                            edge_server_url: {required: "Please enter edge server url."},
                            app_name: {required: "Please enter application name."},
                            channel_name: {required: "Please enter channel name."},
                            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);
                    });
                });
                
                
                $(document).on("change", ".targetAppSelect", function () {
                    var that = $(this);
                    var selectVal = $(this).val();

                    $.ajax({
                        url: '/target/sub_category',
                        type: "POST",
                        data: {"_token": "{{ csrf_token() }}", "parent_id": selectVal},
                        success: function (data) {
                            if(data.status == 'success') {
                                $('.targetAppSubCategory').append($('<option>', data.result));
                            }
                            console.log(data.result);
                            return false;
                        }
                    });
                });
</script>

@endsection