@extends('template.master')

@section('title', 'Add/Edit Article')

@push('styles')
<!-- Select2 -->
{{-- <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('dist/css/adminlte.min.css')}}"> --}}
<style>
    .img_pre {
        width: 200px;
        height: 200px;
        padding: 10px;
    }
    .note-editable {
        min-height: 300px !important;
    }
    .modal-content>.modal-body>p>img {
        object-fit: contain;
        width: 100% !important;
        height: 100% !important;
    }
    .error {
        color: red;
    }
</style>
@endpush


@section('content')
<div class=" mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                    <h4 class="card-title" style="color: #f0ac63 !important;"><strong>Add/Edit Article</strong></h4>
                    <a href="{{ route('articles.list') }}" class="btn float-right" style="background: #f0ac63;color: #000000 !important;">Back</a>
                </div>
                <div class="card-body">
                    <form class="form" id="taxo-form" action="{{ route('articles.add') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2">Article Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="article_name" name="article_name" placeholder="Article Title" value="{{ old('article_name')}}">
                                    @if($errors->has('article_name'))
                                    <div class="error">{{ $errors->first('article_name') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2">Search Text <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="search_text" name="search_text" placeholder="Search Text" value="{{ old('search_text')}}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            @php
                            $media = ['Article', 'Resource', 'Audio', 'Video', 'Image'];
                            @endphp
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2"><b>Media Selection <span class="text-danger">*</span></b></label>
                                    <select class="select2" id="media_selection" data-placeholder="Select a Media" style="width: 100%;" name="media_selection">
                                        <option value="">Select Media</option>
                                        @foreach ($media as $mediaValue)
                                        <option value="{{ $mediaValue }}" {{ old('media_selection') == $mediaValue ? 'selected' : ''}}>{{ $mediaValue }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                            <div class="col-md-6 media_resource">
                                <div class="form-group">
                                    <label for="exampleInputName1" id="media_resource" class="mt-2"><b>Resource</b></label>
                                    <input type="file" class="form-control" id="media_resource" name="resource" placeholder="Resource">
                                </div>
                            </div>
                            <div class="col-md-6 media_youtube">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2"><b>Video</b></label>
                                    <input type="text" class="form-control" id="media_youtube" name="youtube_url" placeholder="https://">
                                </div>
                            </div>
                            <div class="col-md-6 media_audio">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2"><b>Audio</b></label>
                                    <input type="text" class="form-control" id="media_audio" name="audio" placeholder="https://">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @php
                                    $da = date('Y-m-d');
                                    @endphp
                                    <label for="exampleInputEmail3" class="mt-2"><b>Article Date</b> <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="publish_date" name="publish_date" placeholder="Publish Date" value="{{ old('publish_date') ? old('publish_date') : $da }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputEmail3" class="mt-2"><b>Publisher</b> <span class="text-danger">*</span></label>
                                    <select class="select2" id="publisher" data-placeholder="Select a Publisher" style="width: 100%;" name="publisher">
                                        <option value="">Select Publisher</option>
                                        @foreach ($publisher as $publisherKey => $publisherValue)
                                        <option value="{{ $publisherValue->publisher_name }}" {{ old('publisher') == $publisherValue->publisher_name ? 'selected' : '' }}>{{ $publisherValue->publisher_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 cat_level">
                                <div class="form-group">
                                    <label for="exampleInputName1"><b>Category</b> <span class="text-danger">*</span></label>
                                    <select class="select2" id="" multiple="multiple" data-placeholder="Select a Category" style="width: 100%;" name="category_id[]">
                                        @foreach ($category as $catKey => $catValue)
                                        <option value="{{ $catValue->category_id }}" {{ in_array($catValue->category_id, (old('category_id') ? old('category_id') : [])) ? 'selected' : '' }}>{{ $catValue->category_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputName1"><b>Interest</b> <span class="text-danger">*</span></label>
                                    <select class="select2" multiple="multiple" data-placeholder="Select a Interest" style="width: 100%;" name="interest_id[]" id="interest_id">
                                        @foreach ($interest as $interestKey => $interestValue)
                                        <option value="{{ $interestValue->interest_id }}" {{ in_array($interestKey, (old('interest_id') ? old('interest_id') : [])) ? 'selected' : '' }}>{{ $interestValue->interest_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exampleInputName1"><b>Subscription level</b> <span class="text-danger">*</span></label>
                                    {{-- {{ dd($subscription) }} --}}
                                    <select class="select2 sub_level" id="sub_level" multiple="multiple" data-placeholder="Select a Subscription" style="width: 100%;" name="subscription_level[]">
                                        @foreach ($subscription as $subscriptionKey => $subscriptionValue)
                                        <option value="{{ $subscriptionValue->subscription_id }}" {{ in_array($subscriptionValue->subscription_id, (old('subscription_level') ? old('subscription_level') : [])) ? 'selected' : '' }}>
                                            {{ $subscriptionValue->subscription_level }} -
                                            {{ $subscriptionValue->subscription_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 cat_level2">
                                <div class="form-group">
                                    <label for="exampleInputName1"><b>Visible After Days</b><small> (applicable for level 2 only)</small></label>
                                    <input type="number" class="form-control" id="cat_level2" name="visiable_after_days" placeholder="visible after days" max="999" value="{{ old('visiable_after_days')}}">
                                </div>
                            </div>

                        </div>
                        <div class="row">

                            <div class="col-md-6 cat_level level6_com">
                                <div class="form-group">
                                    <label for="exampleInputName1"><b>Company</b> <span class="text-danger">*</span> <small> (applicable for level 6 only)</small></label>
                                    <select class="select2" id="level6_com" multiple="multiple" data-placeholder="Select a Company" style="width: 100%;" name="company_id[]">
                                        @foreach ($company as $compKey => $compValue)
                                        <option value="{{ $compValue->company_id }}" {{ in_array($compValue->company_id, (old('company_id') ? old('company_id') : [])) ? 'selected' : '' }}>{{ $compValue->company_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 cat_level level6_indu">
                                <div class="form-group">
                                    <label for="exampleInputName1"><b>Industry</b> <span class="text-danger">*</span> <small> (applicable for level 6 only)</small></label>
                                    <select class="select2 " id="level6_indu" multiple="multiple" data-placeholder="Select a Industry" style="width: 100%;" name="industry_id[]">
                                        @foreach ($industry as $industryKey => $industryValue)
                                        <option value="{{ $industryValue->industry_id }}" {{ in_array($industryValue->industry_id, (old('industry_id') ? old('industry_id') : [])) ? 'selected' : '' }}>
                                            {{ $industryValue->industry_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-md-6 media_image">
                                <div class="form-group">
                                    <label for="exampleInputName1" id="media_image" class="mt-2"><b>Image</b></label>
                                    <input type="file" class="form-control" id="image" name="image" placeholder="Image" accept="image/png, image/gif, image/jpeg" multiple>
                                </div>
                                <div class="row" id="preview-container">
                                </div>
                            </div>
                            <div class="col-md-6 media_image">
                                <div class="form-group">
                                    <label for="thumbnail_image" class="mt-2"><b>Thumbnail Image</b></label>
                                    <input type="file" class="form-control" id="thumbnail_image" name="thumbnail_image" placeholder="Image" accept="image/png, image/gif, image/jpeg">
                                </div>
                                <div class="row" id="thumbnail-image">
                            </div>
                        </div>
                        </div>


                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="exampleInputName1" class="mt-2">Short Description <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="" name="artical_short_desc" rows="3" placeholder="Short Description" name="artical_short_desc">{{ old('artical_short_desc')}}</textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <label for="exampleInputName1" class="mt-2">Long Description <span class="text-danger">*</span></label>
                                <div class="card card-outline card-info">
                                    <div class="card-body">
                                        <textarea id="summernote" name="artical_long_desc" value="{{ old('artical_long_desc')}}" class="summernote"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn mr-2 mt-5 btn-light" data-toggle="modal" data-target="#exampleModal" data-whatever="123">Preview</button>
                        <button type="submit" class="btn mr-2 mt-5" id="submitTaxo" style="background: #000000;color: #f0ac63 !important;">Submit</button>

                        <a href="{{ route('articles.list') }}" class="btn btn-light mt-5">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- <div class="col-12 grid-margin stretch-card">
        @if (session('status'))
            <div class="alert alert-success" role="alert">
                {{ session('status') }}
</div>
@endif

</div> --}}
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Preview</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('child-scripts')
<script>
    $('#exampleModal').on('show.bs.modal', function(event) {

        $d = $("#summernote").val();
        var button = $(event.relatedTarget)
        var recipient = button.data('whatever')
        var modal = $(this)

        modal.find('.modal-body').html($d)
    })
    // JavaScript code
    document.getElementById('image').addEventListener('change', function(event) {
        var previewContainer = document.getElementById('preview-container');
        previewContainer.innerHTML = ''; // Clear any existing previews

        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();

            var el = document.createElement('div');
            el.classList.add('col-sm-2');
            el.setAttribute('style', 'text-align:center');
            el.innerHTML = '<a href="javascript:;"  class="remove">Remove</a>';

            reader.onload = function(e) {
                var imageElement = document.createElement('img');
                imageElement.src = e.target.result;
                imageElement.classList.add('preview-image');
                imageElement.classList.add('img_pre');
                el.appendChild(imageElement);
                previewContainer.appendChild(el);
            }

            reader.readAsDataURL(file);
        }
    });
</script>
<script>
    $(document).ready(function() {
        $(document).on('click', '.remove', function() {
            $(this).parent().remove();
            $('#image').val('');
        });
        $(document).on('click', '.thumbnail_image_remove', function() {
            $(this).parent().remove();
            $(document.body).find('#thumbnail_image').val('');
        });
        $("#publish_date").datepicker({
            minDate: 0,
            dateFormat: "yy-mm-dd"
        });
        //$('#publish_date').val(new Date);
        // alert('hello');
        $('.select2').select2();
        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4',
        })


        $('.level6_com').hide();
        $('.level6_indu').hide();
        $('#cat_level').hide();
        $('.cat_level2').hide();


        $('.media_resource').hide();
        $('.media_youtube').hide();
        $('.media_audio').hide();

        var Media_select = jQuery('#media_selection');
        var select = this.value;

        Media_select.change(function() {
            if ($(this).val() == 'Resource') {
                $('.media_resource').show();
                $('.media_youtube').hide();
                $('.media_audio').hide();
                $('#media_youtube').val(null);
                $('#media_audio').val(null);
            } else if ($(this).val() == 'Audio') {
                $('.media_audio').show();
                $('.media_resource').hide();
                $('.media_youtube').hide();
                $('#media_youtube').val(null);
                $('#media_resource').val(null);
            } else if ($(this).val() == 'Video') {
                $('.media_youtube').show();
                $('.media_resource').hide();
                $('.media_audio').hide();
                $('#media_resource').val(null);
                $('#media_audio').val(null);
            } else if ($(this).val() == 'Article') {
                $('.media_youtube').hide();
                $('.media_resource').hide();
                $('.media_audio').hide();
                $('#media_youtube').val(null);
                $('#media_resource').val(null);
                $('#media_audio').val(null);


            } else {
                $('.media_youtube').hide();
                $('.media_resource').hide();
                $('.media_audio').hide();
                $('#media_youtube').val(null);
                $('#media_resource').val(null);
                $('#media_audio').val(null);

            }

        });

        $('#sub_level').change(function() {
            var selectedValues = []; // Initialize an empty array to store the values

            $('#sub_level option:selected').each(function() {
                selectedValues.push($(this).val());
            });
            //alert(selectedValues);
            if ($.inArray('6', selectedValues) !== -1) {
                $('.level6_com').show();
                $('.level6_indu').show();
            } else {
                $('.level6_com').hide();
                $('#level6_com').val("").trigger('change');
                $('#level6_indu').val("").trigger('change');

                $('.level6_indu').hide();
            }
            if ($.inArray('2', selectedValues) !== -1) {
                $('.cat_level2').show();
            } else {
                $('.cat_level2').hide();
                $('#cat_level2').val("").trigger('change');

            }
            //$('#selectedValues').text(selectedValues.join(', '));
        });
            $(document).on('change', '#thumbnail_image', function(){
                var previewContainer = document.getElementById('thumbnail-image');
                previewContainer.innerHTML = ''; // Clear any existing previews

                var files = event.target.files;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var reader = new FileReader();

                    var el = document.createElement('div');
                    el.classList.add('col-sm-2');
                    el.setAttribute('style', 'text-align:center');
                    el.innerHTML = '<a href="javascript:;"  class="thumbnail_image_remove">Remove</a>';

                    reader.onload = function(e) {
                        var imageElement = document.createElement('img');
                        imageElement.src = e.target.result;
                        imageElement.classList.add('preview-image');
                        imageElement.classList.add('img_pre');
                        el.appendChild(imageElement);
                        previewContainer.appendChild(el);
                    }

                    reader.readAsDataURL(file);
                }
        });
    });
</script>

<script>
    $(function() {
        // Summernote
        $('#summernote').summernote()

        // CodeMirror
        // CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
        //     mode: "htmlmixed",
        //     theme: "monokai"
        // });
        $("#taxo-form").validate({
            errorElement: "span",
            errorClass: "error",
            ignore: '.note-editor *',
            rules: {
                article_name: {
                    required: true,
                    maxlength: 255
                },
                search_text: {
                    required: true,
                    maxlength: 255
                },
                media_selection: {
                    required: true,
                },
                publish_date: {
                    required: true,
                },
                publisher: {
                    required: true,
                },
                "category_id[]": {
                    required: true,
                },
                "interest_id[]": {
                    required: true,
                },
                "subscription_level[]": {
                    required: true,
                },
                "company_id[]": {
                    required: {
                        depends: function(element) {
                            var levels = $('#sub_level').val()
                            if ($.inArray('6', levels) != -1) {
                                return true;
                            }
                        }
                    },
                },
                "industry_id[]": {
                    required: {
                        depends: function(element) {
                            var levels = $('#sub_level').val()
                            if ($.inArray('6', levels) != -1) {
                                return true;
                            }
                        }
                    },
                },
                artical_short_desc: {
                    required: true,
                },
                artical_long_desc: {
                    required: true,
                }
            },
            messages: {
                article_name: {
                    required: 'Article Title required.',
                },
                search_text: {
                    required: 'Search Text required.',
                },
                media_selection: {
                    required: 'Media required.',
                },
                publisher: {
                    required: 'Publisher required.',
                },
                'category_id[]': {
                    required: 'Category required.',
                },
                'interest_id[]': {
                    required: 'Interest required.',
                },
                'subscription_level[]': {
                    required: 'Subscription Level required.',
                },
                'company_id[]': {
                    required: 'Company required.',
                },
                'industry_id[]': {
                    required: 'Industry required.',
                },
                artical_short_desc: {
                    required: 'Article short description required.',
                },
                artical_long_desc: {
                    required: 'Article long description required.',
                }
            },
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") == 'media_selection' || element.attr("name") == 'publisher' || element.attr("name") == 'category_id[]' || element.attr("name") == 'interest_id[]' || element.attr("name") == 'subscription_level[]' || element.attr("name") == 'company_id[]' || element.attr("name") == 'industry_id[]') {
                    error.insertAfter(element.parent().find('.select2-container'));
                } else if (element.attr("name") == 'artical_long_desc') {
                    error.insertAfter(element.parent().find('.note-editor'));
                } else {
                    element.after(error); // default error placement
                }
            }
        });
    })
</script>
@endpush