@extends('layouts.app')

@section('content')
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('/css/dropzone.min.css') }}">
<script src="{{ asset('/js/dropzone.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('/css/select2.min.css') }}">

<section class="content-header" style="margin-bottom:20px">
    <h1>Upload Video</h1>
</section>

<!-- /.box -->

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Add Multiple Videos</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="video-upload" class="form-horizontal dropzone" enctype="multipart/form-data" method="POST" action="{{ route('videos.video_save') }}" style="min-height: 300px;">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">

            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <label class="col-md-4">User Type:</label>
                    <select class="col-md-3" name="user_type">
                        <option value=''>Select</option>
                        @foreach($userType as $uType)
                        <option value="{{ $uType->id }}">{{ $uType->name }}</option>
                        @endforeach
                    </select>
                    <div class="col-md-2"></div>
                </div>
                
                <div class="form-group">
                    <label class="col-md-2">Type:</label>
                    <select id="movieType" class="col-md-3 movieType" name="type" required="true" onchange="hideUploaded(this)">
                        <option value=''>-- Select --</option>
                        <option value='vod'>VOD</option>
                        <option value='karaoke'>Karaoke</option>
                        <option value='kid'>Kid</option>
                        <option value='series'>TV Series</option>
                        <option value='commercial'>Commercial</option>
                    </select>
                    <div class="col-md-2"></div>
                </div>

                <div class="videoType"></div>

                <div class="form-group">
                    <label class="col-md-2">Language:</label>
                    <select id="movieType" class="col-md-3 movieType" name="default_language" required="true" onchange="hideUploaded()">
                        <option value='English'>English</option>
                        <option value='Tagalog'>Tagalog</option>
                        <option value='Vietnamese'>Vietnamese</option>
                        <option value='Mandarin'>Mandarin</option>
                        <option value='Thai'>Thai</option>
                        <option value='Indonesian'>Indonesian</option>
                        <option value='Malaysian'>Malaysian</option>
                        <option value='Burmese'>Burmese</option>
                        <option value='Khmer'>Khmer</option>
                        <option value='Bangladeshi'>Bangladeshi</option>
                        <option value='Hindi'>Hindi</option>
                        <option value='Punjabi'>Punjabi</option>
                        <option value='Tamil'>Tamil</option>
                        <option value='Spanish'>Spanish</option>
                    </select>
                    <div class="col-md-2"></div>
                </div>

                <div class="">
                    <div class="dz-default dz-message">
                        <span>Browse or Drop files here to upload</span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="{{ asset('/js/select2.min.js') }}"></script>
<script type="text/javascript">
                        $(document).ready(function () {
                            Dropzone.options.videoUpload = {
                                maxFilesize: 10000,
                                acceptedFiles: ".mp4"
                            };

                            $(".movieType").select2({
                                minimumResultsForSearch: -1
                            });
                        });

                        function hideUploaded(type) {
                            $('.dz-preview').remove();
                            $('.dz-message').show();

                            var select = type.value;
                            $('.videoType').html('');

                            $.ajax({
                                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                                type: "POST",
                                url: "/ajax/video_select?random=" + randNumGen(),
                                data: {"type": select},
                                cache: false,
                                success: function (data) {
                                    console.log(data);
                                    $('.videoType').html(data);
                                }
                            });
                        }

                        //Generate encription key
                        function randNumGen() {
                            var encKey = "";
                            var possible = "0123456789";

                            for (var i = 0; i < 20; i++) {
                                encKey += possible.charAt(Math.floor(Math.random() * possible.length));
                            }
                            return encKey;
                        }
</script>
@endsection