@extends('layouts.app')

@section('content')
    <link rel="stylesheet" href="{{ asset('/css/jquery.timepicker.min.css') }}">
	<div class="row">
	    <div class="col-lg-12 margin-tb">
	        <div class="pull-left">
	            <h3>Create New Advertisement</h3>
	        </div>
	        <div class="pull-right">
	            <button class="btn btn-primary btn-sm" onclick="window.history.back();">Back</button>
	        </div>
	    </div>
	</div>

	@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

	<form id="createAdvertise" class="form-horizontal addBorderClass" role="form" enctype="multipart/form-data" method="POST" action="{{ route('advertisements.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-3">Select Type:</label>
                <select class="col-md-4" id="selType" name="type">
                    <option value=''>Select Type</option>
                    <option value='vod'>VOD</option>
                    <option value='newtv'>New TV</option>
                    <option value='live_channel'>Live Channel</option>
                </select>
                <div class="col-md-2"></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 selTypeVal">
            <div class="form-group">
                <label class="col-md-3">Select Video:</label>
                <input type="text" class="col-md-4 selVOD" name="video_name[0]">
                <input type="hidden" class="videoId" name="video_id[0]">
                <div class="col-md-2 addBtn">
                    <button class="btn btn-primary btn-sm add_video">Add</button>
                </div>
            </div>
        </div>
        <div class="video_fields_container"></div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <label class="col-md-3">Schedule:</label>
                <input type="time" name="start_time" class="col-md-2 timepicker" placeholder="Start time" />
                <input type="time" name="end_time" class="col-md-2 timepicker" placeholder="End time" />
                <div class="col-md-2"></div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12" id="adsDiv">
            <div class="form-group">
                <label class="col-md-3">Advertisement:</label>
                <textarea type="text" class="col-md-6 adsBox" name="advertisement" placeholder="Advertisement Script" rows="6" cols="100"></textarea>
                <div class="col-md-2 wtchBtn"><a class="btn btn-success btn-sm space_buttons watch_ads">Watch Ads</a></div>
            </div>
        </div>
        
        <div class="col-xs-12 col-sm-12 col-md-12 text-left">
			<button type="submit" class="btn btn-primary btn-sm">Submit</button>
        </div>
	</div>
	</form>

    <div class="modal fade" id="modalWatchAds" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="add-modal-label">Advertisement</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group" style="text-align:center;">
                        <div id="watchAds"></div>
                    </div>
                </div>
                <div class="modal-footer"></div> 
            </div>
        </div>
    </div>

    <script src="{{ asset('/js/jquery.timepicker.min.js') }}"></script>
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
    //Add multiple georestrictions
    $(document).ready(function() {
        var max_fields_limit = 4; //set limit for maximum input fields
        var x = 0; //initialize counter for text box
        $('.add_video').click(function(e){ //click event on add more fields button
            e.preventDefault();

            var type = $(this).parent().siblings('.selVOD').data('type');
            
            if(x < max_fields_limit){ //check conditions
                x++; //counter increment
                $('.video_fields_container').append('<div class="addVod col-xs-12 col-sm-12 col-md-12 selTypeVal"><div class="form-group"><div class="col-md-3"></div><input type="text" data-type="'+type+'" class="col-md-4 selVOD" id="selVOD_'+x+'" name="video_name[]"><input type="hidden" class="videoId" name="video_id[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

                $('#selVOD_'+x).rules('add', {required: true, messages: {required: "Please enter video name."}});
            }
        });  
        $('.video_fields_container').on("click",".remove_field", function(e){ 
        //user click on remove text links
        e.preventDefault(); $(this).parents('div[class^="addVod"]').remove(); x--;
        })
    });

    //Select video
    $(document).on("focus", ".selVOD", function() {
        var that = $(this);

        if(!that.attr('data-type')) {
            return false;
        }

        $(this).autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/advertisements/autoCompleteVod',
                    type: "POST",
                    data: { "_token": "{{ csrf_token() }}", "name": that.val(), "type": that.attr('data-type') },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            minLength: 1,
            select : function(event, ui) {
                //console.log(ui.item.value);
                if(ui.item.value == 'All') {
                    that.siblings('.addBtn').find('.add_video').hide();
                } else {
                    that.siblings('.addBtn').find('.add_video').show();
                }
                that.siblings('.videoId').val(ui.item.id);
            }
        });
    });


    $(function() {
        $('#selType').change(function() {
            if($('#selType').val() != '') {
                                
                $(this).parent().parent().siblings('.selTypeVal').find('.selVOD').attr('data-type', $('#selType').val());
                
            } else {
                
            } 
        });
    });

    //Unique validation
    $("#createAdvertise").validate({
        rules: {
            'type': { required: true },
            'video_name[]': {
                required: true,
                //notEqualToVideo: ['.selVOD']
            },
            'advertisement': { required: true }
        },
        messages: {
            'type': { required: "Please select type." },
            'video_name[]': {
                required: "Please select video.",
                //notEqualToVideo: "Please enter different video."
            },
            'advertisement': { required: "Please enter advertisement script." }
        }
    });

    //Time picker
    $(document).ready(function(){
        $('input.timepicker').timepicker({});
    });


    /*$(document).on('keyup', '.adsBox', function(e) {
        e.preventDefault();
        
        if($(this).val()) {
            $(this).siblings('.wtchBtn').find('.watch_ads').show();
        } else {
            $(this).siblings('.wtchBtn').find('.watch_ads').hide();
        }
    });​*/

    //Watch ads popup
    $(document).on('click', '.watch_ads', function(e) {
        e.preventDefault();
        
        var iframe = $(this).parent().siblings('.adsBox').val();

        $('#watchAds').html(iframe);
        $('#modalWatchAds').modal('show');
    });    

    </script>

@endsection