@extends('admin.layout')
@section('custom-style')
<style>
    .alert{
        padding: 2px 10px;
    }
    .textarea{
        width: 100%; height: 300px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;
    }

    .thubnail_img {
        width:100%;
        height:207px;
        text-align: center;
    }

    .thubnail_img img {
        width:100%;
        height:100%;
        object-fit:contain;
        border-radius:10px;
    }

    .files input {
        outline: 2px dashed #92b0b3;
        outline-offset: -10px;
        -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
        transition: outline-offset .15s ease-in-out, background-color .15s linear;
        padding: 120px 0px 85px 40%;
        text-align: center !important;
        margin: 0;
        width: 100% !important;
    }
    .files input:focus{     outline: 2px dashed #92b0b3;  outline-offset: -10px;
        -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
        transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
    }
    .files{ position:relative}
    .files:after {  pointer-events: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 50px;
        right: 0;
        height: 56px;
        content: "";
        background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
        display: block;
        margin: 0 auto;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .files:before {
        position: absolute;
        bottom: 10px;
        left: 0;  pointer-events: none;
        width: 100%;
        right: 0;
        height: 57px;
        content: " or drag it here. ";
        display: block;
        margin: 0 auto;
        color: #2ea591;
        font-weight: 600;
        text-transform: capitalize;
        text-align: center;
    }

    .input-group
    {
        margin-bottom: 2px;
    }
    #category-div-id
    {
        background: #f4f4f4;
        padding:10px;
        border:1px solid #ddd;
        margin-left:-10px;
    }
    
    .input-groups-formatted-view{
        display:flex !important;
        flex-wrap: wrap !important;
    }
    
    @media(max-width:575px){
        .country-input-group{
            width: 48% !important;
            margin-left:1% !important;
            margin-right:1% !important;
        }
    }
    
    @media(min-width:1199px){
        .country-input-group{
            width: 23% !important;
            margin-left:1% !important;
            margin-right:1% !important;
        }
    }
</style>
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="{{url('admin-assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css')}}">
@endsection
@section('content')
    <section class="content-header">
        <h1>
            Videos
        </h1>
        <ol class="breadcrumb">
            <li><a><i class="fa fa-video-camera"></i> Video</a></li>
            <li class="active">Create</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Create Video</h3>
                    </div>
                    @if ($errors->any())
                        <div>
                            @foreach ($errors->all() as $error)
                                <li class="alert alert-danger">{{ $error }}</li>
                            @endforeach
                        </div>
                    @endif
                    @if(\Session::has('error'))
                        <div>
                            <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                        </div>
                    @endif
                    @if(\Session::has('success'))
                        <div>
                            <li class="alert alert-success">{!! \Session::get('success') !!}</li>
                        </div>
                    @endif
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form role="form" method="post" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="box-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>Video Title*</label>
                                        <input type="text" name="title" class="form-control" placeholder="Enter Video Title" value="{{old('title')}}" required />
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>Video Sub Title</label>
                                        <input type="text" name="sub_title" class="form-control" placeholder="Enter Video Sub Title" value="{{old('sub_title')}}" />
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Viewer Age Rating*</label>
                                        <select name="rating" class="form-control" required>
                                            <option value="">Select Rating for video</option>
                                            @if(isset($ratings))
                                                @foreach($ratings as $rating)
                                                    <option value="{{$rating->id}}" @if(old('rating') == $rating->id) selected @endif>{{ $rating->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>


                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>PPV Listing Type*</label>
                                        <select name="ppv_listing_type" class="form-control" required>
                                            <option value="">Select video listing type</option>
                                            <option @if(old('ppv_listing_type') == 'Pay Per View') selected @endif>Pay Per View</option>
                                            <option @if(old('ppv_listing_type') == 'Free View') selected @endif>Free View</option>
                                        </select>
                                    </div>
                                </div>



                                <div class="col-sm-9">
                                    <div class="form-group">
                                        <label>Video Description</label>
                                        <textarea class="textarea" name="description" placeholder="Enter the video description here" required>{{old('description')}}</textarea>
                                    </div>
                                </div>

                                <div class="col-sm-3" id="category-div-id">
                                    <label>Select Category</label>
                                    @if($categories)
                                        @foreach($categories as $category)
                                                                                <div class="input-group">
                                        <span class="input-group-addon">
                                          <input type="checkbox" name="category_id[]"
                                                 value="{{$category->id}}" @if(old('category_id') != null) @if(in_array($category->id, old('category_id'))) checked @endif @endif>
                                        </span>
                                        <input class="form-control" value="{{$category->name}}" readonly>
                                    </div>
                                        @if(count($category->subcategory))
                                            @include('admin.video.video-sub-category-option-create',['subcategories' => $category->subcategory])
                                        @endif
                                        @endforeach
                                    @endif
                                    <!-- /input-group -->
                                </div>
                                
                                <div class="col-sm-12" style="margin-bottom:10px !important;">
                                    <label>Select Country*</label>
                                    @if(isset($countries))
                                        <div class="input-groups-formatted-view">
                                            @foreach($countries as $country)
                                                <div class="input-group country-input-group">
                                                    <span class="input-group-addon">
                                                       <input type="checkbox" name="countries_id[]" value="{{$country->id}}" 
                                                            @if($country->id == 240) 
                                                                id="all_countries_checkbox" onclick="disbaleAllOtherCountrysCheckboxes()"
                                                            @else 
                                                                class="countrys_checkbox"
                                                            @endif 
                                                           @if(old('$countries_id') != null) 
                                                              @if(in_array($country->id, old('countries_id'))) 
                                                                checked 
                                                              @endif
                                                           @endif>
                                                    </span>
                                            
                                                    <input class="form-control" value="{{$country->country_name}}" readonly>
                                                </div>
                                            @endforeach
                                        </div>
                                    <!-- /input-group -->
                                    @endif
                                </div>

                                <div class="col-sm-12 mt-2">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <div class="form-group files">
                                                <label>Live Stream Thumbnail(Portrait - 1250 * 1333 MX - 2MB)*</label>
                                                <input type="file" name="thumbnail" class="form-control"
                                                    onchange="readURL(this);" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6" id="show-image-div">
                                        <label style="width:100%;text-align:center;">Live Stream Preview (Portrait)</label>
                                        <div class="thubnail_img">
                                            <img id="thumbnail-image" src="https://via.placeholder.com/1250x1333"
                                                alt="Video Thumbnail">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <div class="form-group files">
                                                <label>Live Stream Thumbnail (Landscape - 1280 * 720 MX - 2MB)*</label>
                                                <input type="file" name="landscape_thumbnail" class="form-control"
                                                onchange="readURLLandscape(this);" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6" id="show-image-div">
                                        <label style="width:100%;text-align:center;">Live Stream Preview (Landscape)</label>
                                        <div class="thubnail_img">
                                            <img id="landscape-thumbnail-image" src="https://via.placeholder.com/1280x720"
                                                alt="Video Thumbnail">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Next &nbsp;<i class="fa fa-long-arrow-right"></i> </button>

                        </div>

                    </form>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
@endsection

@section('custom-scripts')
    <!-- CK Editor -->
    <script src="{{url('admin-assets/bower_components/ckeditor/ckeditor.js')}}"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script src="{{url('admin-assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js')}}"></script>
    <script>
        $(function () {
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            CKEDITOR.replace('editor1')
            //bootstrap WYSIHTML5 - text editor
            $('.textarea').wysihtml5()
        })

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#thumbnail-image')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        function readURLLandscape(input){
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#landscape-thumbnail-image')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
        
        
        //if all countries checkbox is selected, disable selecting other country's checkboxes
        document.addEventListener('DOMContentLoaded', function() {
            
            var allCountriesCheckbox = document.getElementById('all_countries_checkbox');
            var countryCheckboxes    = document.querySelectorAll('countrys_checkbox');
            
            if(allCountriesCheckbox.checked){
                
                // Disable all other country's checkboxes
                countryCheckboxes.forEach(function(countryCheckbox) {
                    countryCheckbox.disabled = true;
                });
            } else {
                
                // Enable all other country's checkboxes
                countryCheckboxes.forEach(function(countryCheckbox) {
                    countryCheckbox.disabled = false;
                });
            }
        });
        
        
        //if all countries checkbox is selected, disable selecting other country's checkboxes (in an onclick function)
        function disbaleAllOtherCountrysCheckboxes() {

            var allCountriesCheckbox = document.getElementById('all_countries_checkbox');
            var countryCheckboxes    = document.querySelectorAll('.countrys_checkbox');
            
            if(allCountriesCheckbox.checked){
                
                // Disable all other country's checkboxes
                countryCheckboxes.forEach(function(countryCheckbox) {
                    countryCheckbox.disabled = true;
                    countryCheckbox.checked = false;
                });
            } else {
                
                // Enable all other country's checkboxes
                countryCheckboxes.forEach(function(countryCheckbox) {
                    countryCheckbox.disabled = false;
                });
            }
        }
    </script>
@endsection