@extends('admin.layouts.master')
<style>
    .select2-container--default .select2-selection--multiple .select2-selection__rendered{
        padding-bottom: 6px!important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice{
        background-color: #007BFF!important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
        color: white!important;
    }
</style>
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Add New Story</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{asset('/')}}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{asset(route('stories.index'))}}">Stories</a>
                        </li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if(session()->has('error'))
        <div class="alert alert-success">
            {{ session()->get('error') }}
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div><br />
    @endif
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">New Story</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{!isset($story['title']) ? route('stories.store') : route('stories.update',$story['id'])}}" method="post" enctype="multipart/form-data">
                            @csrf
                            @if(isset($story['title']))
                                {{ method_field('PUT') }}
                            @endif

                            <div class="row form-group">
                                <div class="col">
                                    <label>Title *</label>
                                    <input type = "text" name = "title" class="form-control" required value="{{ old('title', $story['title']) }}">
                                </div>
                            </div>
                            
                            <div class="row form-group">
                                <div class="col">
                                    <label>Article</label>
                                    <select class="form-control" name="article_id">
                                        <option value="">Select Article</option>
                                        @foreach($articles as $article)
                                            <option {{ $article['id'] == old('article_id', $story['article_id']) ? 'selected' : '' }} value="{{ $article['id'] }}">{{ $article['title'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col">
                                    <label>Description</label>
                                    <input type="text" name="desc" class="form-control" value="{{ old('desc', $story['description']) }}">
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col">
                                    @include('admin.components.mutisource-company-options', [
                                        'all_option' => false,
                                        'source_company' => old('source_company', $story['source_company'])
                                    ])
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col">
                                    <label>Media Type *</label>
                                    <select class="form-control" name="media_type" id="media_type">
                                        <option {{ $story['media_type'] == 'video' ? 'selected' : '' }}  value="video">Video</option>
                                        <option {{ $story['media_type'] == 'image' ? 'selected' : '' }} value="image">Image</option>
                                    </select>
                                </div>
                            </div>

                           
                            <div class="row form-group media_cont">
                                <div class="col" style="max-width: 550px">
                                    <label>Media *</label>
                                    <input type = "file" {{ $story['media_url'] ? '' : 'required' }} name = "media" id="dropify-element" class="dropify" data-default-file="{{ old('media', $story['media_url']) }}" data-show-remove="false">
                                </div>
                            </div>

                            <div class="row form-group preview_cont">
                                <div class="col" style="max-width: 550px">
                                    <label>Media Preview *</label>
                                    <input type="file" {{ $story['preview'] ? '' : 'required' }} name="preview" id="dropify-element-prev" class="dropify_prev" data-default-file="{{ old('media', $story['preview_url']) }}" data-show-remove="false" accept="image/*" data-allowed-file-extensions="png jpg jpeg gif">
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col-md-12 text-right">
                                    <button class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
{{-- <script src="{{asset('admin_assets/plugins/ckeditor/ckeditor.js')}}"></script> --}}
<script>
    $(document).ready(function(){
        var drEvent = $('.dropify').dropify();
        var drEvent2 = $('.dropify_prev').dropify({
            // allowedFormats: ['png', 'jpg', 'jpeg', 'gif']
        });
        drEvent.on('dropify.beforeClear', function(event, element){
            return confirm("Do you really want to delete \"" + element.filename + "\" ?");
        });

        setTimeout(() => {
            // Check if the default file is a video
            var fileUrl = $('.media_cont #dropify-element').attr('data-default-file');
            var fileOrig = '{{isset($story['media_url_orig']) ? $story['media_url_orig'] : '' }}';
            var fileType = fileOrig ? fileOrig.split('.').pop().toLowerCase() : '';
    
            if (fileType != '' && '' == 'video') {
                // Replace Dropify's default image preview with video preview
                var videoPreview = `
                    <video controls width="100%">
                        <source src="${fileUrl}" type="video/${fileType}">
                        Your browser does not support the video tag.
                    </video>
                `;
    
                $('.media_cont .dropify-wrapper').find('.dropify-render').html(videoPreview).show();
                $('.media_cont .dropify-wrapper').find('.dropify-preview ').show();
            }
        }, 1200);


        drEvent.on('change', function(event) {
            $('.media_cont .dropify-wrapper').find('.dropify-render').html('');
            var input = this;
            var file = input.files[0];
            var fileType = file.type;
            var imgkbytes = Math.round(parseInt(file.size)/1024);
            if(imgkbytes > 30720){
                alert('Please select file lower than 30 MB');
                return false;
            }
        
            // Check if the file is a video
            if (fileType.startsWith('video')) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    var videoPreview = `
                        <video controls width="100%">
                            <source src="${e.target.result}" type="${fileType}">
                            Your browser does not support the video tag.
                        </video>
                    `;
                    // Replace Dropify's default preview with video preview
                    $('.media_cont .dropify-wrapper').find('.dropify-render').html(videoPreview).show();
                    $('.media_cont .dropify-wrapper').find('.dropify-preview ').show();
                };

                reader.readAsDataURL(file);
            }
        });

        drEvent2.on('change', function(event) {
            var input = this;
            var file = input.files[0];
            var imgkbytes = Math.round(parseInt(file.size)/1024);
            if(imgkbytes > 30720){
                alert('Please select file lower than 30 MB');
                return false;
            }
        });
        /* drEvent2.on('change', function(event) {
            // $('.preview_cont .dropify-wrapper').find('.dropify-render').html('');
            var input = this;
            var file = input.files[0];
            var fileType = file.type;
            
            // Check if the file is for the "preview" input and restrict to only images
            if (input.name === 'preview' && !fileType.startsWith('image')) {
                // event.preventDefault();
                alert('Only image files are allowed for preview');
                // $('.preview_cont .dropify-wrapper').find('.dropify-preview ').hide();
                // $(input).val('');

                drEvent2 = drEvent2.data('dropify');
                drEvent2.resetPreview();
                drEvent2.clearElement();
                return false;
            }
        }); */
    });
</script>
@endsection