@extends('layouts.app')

@section('content')
	<div class="row">
	    <div class="col-lg-12 margin-tb">
	        <div class="pull-left">
	            <h3>pLive of VOD</h3>
	        </div>
	        <div class="pull-right">
	            <button class="btn btn-primary btn-sm" onclick="window.history.back();">Back</button>
	        </div>
	    </div>
	</div>

	<form id="addLSVod" class="form-horizontal addLSVod" role="form" enctype="multipart/form-data" method="POST" action="{{ route('videos.lsvod_save') }}">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="plive" value="plive_1">
    	<div class="row addBorderClass">

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="col-md-3">Publish Date:</label>
                    <input type="datetime" name="schedule[]" class="col-md-2 datepicker" placeholder="Schedule" />
                    <div class="col-md-4"></div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="col-md-3">Repeat:</label>
                    <select class="col-md-2" name="repeat[]">
                        <option value='true'>True</option>
                        <option value='false'>False</option>
                    </select>
                    <div class="col-md-4"></div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="col-md-3">Channel:</label>
                    <select class="col-md-4 channelCls" id="channelId" name="channel[]">
                        <option value="">Select Channel</option>
                        @foreach($channels as $channel)
                        <option value="{{ $channel }}">{{ $channel }}</option>
                        @endforeach
                    </select>
                    <div class="col-md-2"></div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 playlistName">
                <div class="form-group">
                    <label class="col-md-3">Playlist Name:</label>
                    <input type="text" name="stream[]" class="col-md-4 playlistCls" >
                    <div class="col-md-2"></div>
                </div>
            </div>
            
            <div class="col-xs-12 col-sm-12 col-md-12 xyz">
                <div class="form-group">
                    <label class="col-md-3">Video:</label>
                    <input type="text" class="col-md-4 videoName" name="video_name[0][]">
                    <input type="hidden" class="col-md-4 videoId" name="video_id[0][]">
                    <input type="hidden" class="col-md-4 videoFileName" name="video_filename[0][]">
                    <div class="col-md-2">
                        <button class="btn btn-sm btn-primary add_video" data-added="0" data-start="0">Add</button>
                    </div>
                </div>
            </div>
            <div class="video_fields_container"></div>
    	</div>

        <div class="playlist_fields_container"></div>

        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="pull-left">
                    <button class="btn btn-sm btn-danger space_buttons add_playlist">Add Playlist</button>
                </div>
                <div class="pull-right">
                    <button type="submit" class="btn btn-success btn-sm space_buttons">Submit</button>
                </div>
            </div>
        </div>
	</form>    

    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
    //Add multiple videos
    $(document).ready(function() {
        
        $(document).on('click', '.add_video', function(e){ //click event on add more fields button
            e.preventDefault();

            var x = $(this).data('added');
            var name = $(this).parents().siblings('.videoName').data('name');
            var no = $(this).data('start');
            
            $(this).data('added', (x + 1));
            $(this).parents('.xyz').append('<div class="addVid"><div class="form-group"><label class="col-md-3"></label><input type="text" class="col-md-4 videoName" id="video_'+x+'" name="video_name['+no+'][]"><input type="hidden" class="col-md-4 videoId" name="video_id['+no+'][]"><input type="hidden" class="col-md-4 videoFileName" name="video_filename['+no+'][]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');
        });  

        $('.xyz').on("click",".remove_field", function(e){
            //user click on remove text links
            e.preventDefault();

            $(this).parents('div[class^="addVid"]').remove(); 
            $(this).data('added', ($(this).data('added') - 1));
        })

        $('.playlist_fields_container').on("click",".remove_field", function(e){ 
            //user click on remove text links
            e.preventDefault();

            $(this).parents('div[class^="addVid"]').remove(); 
            $(this).data('added', ($(this).data('added') - 1));
        })


    });

    //Add multiple playlists
    $(document).ready(function() {
        var result = null;
        var res='';
        $.each( result , function( i, val ) {
            res += '<option value="'+val+'">'+val+'</option>';
        });

        var x2 = 0; //initialize counter for text box
        $('.add_playlist').click(function(e){ //click event on add more fields button
            e.preventDefault();

            var no = x2++; //counter increment
            ++no;
            $('.playlist_fields_container').append('<div class="row addBorderClass addPlaylist"><div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><label class="col-md-3">Publish Date:</label><input type="date" name="schedule[]" class="col-md-2 datepicker" placeholder="Schedule" /><div class="col-md-4"></div></div></div><div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><label class="col-md-3">Repeat:</label><select class="col-md-4" name="repeat[]"><option value="true">True</option><option value="false">False</option></select><div class="col-md-2"></div></div></div><div class="col-xs-12 col-sm-12 col-md-12"><div class="form-group"><label class="col-md-3">Channel:</label><select class="col-md-4 channelCls" name="channel[]"><option value="">Select Channel</option>'+res+'</select><div class="col-md-2"></div></div></div><div class="col-xs-12 col-sm-12 col-md-12 playlistName"><div class="form-group"><label class="col-md-3">Playlist Name:</label><input type="text" name="stream[]" class="col-md-4 playlistCls" ><div class="col-md-2"></div></div></div><div class="col-xs-12 col-sm-12 col-md-12 xyz"><div class="form-group"><label class="col-md-3">Video:</label><input type="text" class="col-md-4 videoName" name="video_name['+no+'][]" data-name="video_name['+no+'][]"><div class="col-md-2"><button class="btn btn-sm btn-primary add_video" data-added="0" data-start="['+no+']">Add</button></div><input type="hidden" class="col-md-4 videoId" name="video_id['+no+'][]"><input type="hidden" class="col-md-4 videoFileName" name="video_filename['+no+'][]"></div></div><div class="video_fields_container"></div><div class="col-md-12 text-right"><button class="btn btn-sm btn-danger remove_playlist">Remove Playlist</button></div></div>');

        });  
        $('.playlist_fields_container').on("click",".remove_playlist", function(e){ 
        //user click on remove text links
            e.preventDefault(); 
            $(this).closest('.addPlaylist').remove(); x2--;
        })
    });

    //Date picker
    $('body').on('focus',".datepicker", function(){
        $(this).datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function(datetext){
                var d = new Date(); // for now
                datetext=datetext+" "+addZero(d.getHours())+":"+addZero(d.getMinutes())+":"+addZero(d.getSeconds());
                $(this).val(datetext);
            },
        });
    });

    function addZero(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }

    //For video listing
    $(document).on("focus", ".videoName", function() {
        var that = $(this);
        $(this).autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/videos/autoCompleteVideo',
                    type: "POST",
                    data: { "_token": "{{ csrf_token() }}", "name": that.val() },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            minLength: 1,
            select : function(event, ui) {
                that.siblings('.videoId').val(ui.item.id);
                that.siblings('.videoFileName').val(ui.item.filename);
            }
        });
    });


    //validation
    $('form').each(function () {
        $(this).validate({
            rules: {
                'schedule[]': { required: true },
                'stream[]': { required: true },
                'video_name[0][]': {
                    required: true,
                    //notEqualToVideo: ['.videoName']
                },
                'channel[]': { required: true },
            },
            messages: {
                'schedule[]': { required: "Please select date." },
                'stream[]': { required: "Please enter stream name." },
                'video_name[0][]': {
                    required: "Please select video.",
                    //notEqualToVideo: "Please enter different video."
                },
                'channel[]': { required: "Please select channel." },
            }
        });
    });

    //Fill playlist name based on channel
    $(document).on('change', '.channelCls', function(e) {
        e.preventDefault();

        //var channel = $("option:selected", this).text();
        var channel = this.value;
        var res = channel.replace(/\s/g,"");
        $(this).parent().parent().siblings(".playlistName").find(".playlistCls").val(res);
    });

    </script>

@endsection