@extends('layouts.app')

@section('content')

<section class="content-header" style="margin-bottom:20px">
    <h1>Publish Video</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 Publish Video</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="publishVOD" class="form-horizontal addBorderClass" role="form" method="POST" action="{{ route('videos.vod_save') }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="type" value="vod">
            <div class="row">

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Choose Video:</label>

                        <input type="text" id="selVOD" class="col-md-4" name="video_name">

                        <div class="col-md-2 watchBTN">
                            <a class="btn btn-success btn-sm space_buttons watch_video" id="row_dim" data-id='1' data-src='{{ asset("storage/uploads/video/movies/vid/filename") }}'>Watch Video</a>
                        </div>
                        <input type="hidden" class="col-md-4" id="videoId" name="video_id">
                    </div>
                </div>
                
                <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" id="start_date" name="start_date" class="col-md-2 datepicker" placeholder="Start date" />

                        <input type="date" id="end_date" name="end_date" class="col-md-2 datepicker" placeholder="End date" />
                        <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">Video Type</label>
                        <select class="col-md-3" name="video_type" class="form-control" >
                            @foreach($videoType as $key=>$vType)
                            <option value="{{$key}}"> {{$vType}} </option>
                            @endforeach
                        </select>
                    </div>
                </div> 
                
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">User Type</label>
                        <select class="col-md-3" name="user_type" class="form-control" >
                            <option value=""> -- Select User Type -- </option>
                            @foreach($userType as $uType)
                            <option value="{{$uType->id}}"> {{$uType->name}} </option>
                            @endforeach
                        </select>
                    </div>
                </div>        
        
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Genre Category</label>
                        <select class="col-md-3" name="main_category[]" class="form-control" multiple="true" >
                            <option value=""> -- Select Category -- </option>
                            @foreach($videoCategories as $key=>$video_category)
                                <option value="{{$video_category->id}}"> {{$video_category->name}} </option>
                            @endforeach
                        </select>

                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="form-group">
                        <label class="col-md-3">Geo restrictions:</label>
                        <input type="text" class="col-md-4 country" name="location[0]">
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-primary add_country">Add</button>
                        </div>
                        <br><br>
                        <span class="col-md-3"></span><span>(Exclude countries to watch this video.)</span>
                    </div>
                </div>
                <div class="country_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>

@include('elements.popup')

<script src="{{ asset('/js/custom.js') }}"></script>
<script type="text/javascript">
//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_country').click(function (e) { //click event on add more fields button
                        e.preventDefault();
                        if (x < max_fields_limit) { //check conditions
                            x++; //counter increment
                            $('.country_fields_container').append('<div class="addCoun col-xs-12 col-sm-12 col-md-12"><div class="form-group"><div class="col-md-3"></div><input type="text" class="col-md-4 country" id="country_' + x + '" name="location[]"><div class="col-md-2"><button class="btn btn-sm btn-danger remove_field">Remove</button></div></div></div>');

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

//For country
                $(document).on("focus", ".country", function () {
                    var that = $(this);
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: '/videos/autoComplete',
                                type: "POST",
                                data: {"_token": "{{ csrf_token() }}", "name": that.val(), "tablename": "countries"},
                                success: function (data) {
                                    response(data);
                                }
                            });
                        },
                        minLength: 1,
                    });
                });

                $('#row_dim').hide();
//For country
                $(document).on("focus", "#selVOD", function () {
                    var that = $(this);
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: '/videos/get_vod_videos',
                                type: "POST",
                                data: {"_token": "{{ csrf_token() }}", "name": that.val()},
                                success: function (data) {
                                    response(data);
                                }
                            });
                        },
                        minLength: 1,
                        select: function (event, ui) {
                            //console.log(ui.item);
                            $('#row_dim').show();
                            that.data('id', ui.item.id);
                            that.data('src', ui.item.src);

                            that.siblings('.watchBTN').find('.watch_video').attr('data-id', ui.item.id);
                            that.siblings('.watchBTN').find('.watch_video').attr('data-src', ui.item.src);
                            that.siblings('#videoId').val(ui.item.id);
                        }
                    });
                });

                $(document).ready(function () {
                    $(".datepicker").datepicker({ 
                        altFormat: "yy-mm-dd",
                        dateFormat: "yy-mm-dd",
                        
                    });
                });

                $(document).on('click', '.watch_video', function (e) {
                    e.preventDefault();
                    $('#vodClass').attr("src", $(this).data('src'));
                    $('#modalWatchVideo').modal('show');
                    var video_block = $('#video');
                    video_block.load();
                });

//Unique validation
                $("#publishVOD").validate({
                    rules: {
                        'country[0]': {
                            notEqualToGroup: ['.country']
                        }
                    },
                    messages: {
                        'country[0]': {
                            notEqualToGroup: "Please enter different country."
                        }
                    }
                });
</script>

@endsection