@extends('layouts.app')
@section('title', 'Media | Website')

@section('extrastyles')
    <link href="{{ asset('/plugins/dropzone/basic.css') }}" rel="stylesheet">
    <link href="{{ asset('/plugins/dropzone/dropzone.css') }}" rel="stylesheet">
    <style>
        .mogo_image_gallery {
            overflow-y: hidden;
            overflow-x: hidden;
        }
        #image_gallery_listing li {
            position: relative;
        }
        #image_gallery_listing li input[type=checkbox] {
            position: absolute;
            left:0px;
            top:-3px;
        }
        .head_label {
            font-size: 17px !important;
        }
        .modal-ku {
            width: 750px;
            margin: auto;
        }

    </style>
@endsection

@section('content')
    <div class="studio98_websters">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title2">
                        <h5>Manage Media</h5>
                    </div>
                    <div class="ibox-content p-md">
                        @include('flash::message')
                        <div class="clearfix"></div>
                        <form action="#" class="dropzone" id="dropzoneForm">
                            <div class="fallback">
                                <input name="fileCover[]" type="file" multiple />
                            </div>
                        </form>
                        <div class="sk-spinner sk-spinner-three-bounce hide">
                            <div class="sk-bounce1"></div>
                            <div class="sk-bounce2"></div>
                            <div class="sk-bounce3"></div>
                        </div>
                        <div class="row align-items-center justify-content-between">
                            <div class="col-md-12 col-lg-3 d-flex align-items-center" style="margin-top: 20px; ">
                                {!! Form::select('action_status' , ['' => 'Choose Action','delete' => 'Delete'], Request::input('type'), ['class' => 'form-control mr-2','style' => 'width:150px;display:inline-block;height:36px !important;']) !!}
                                <button type="button" name="go_action" class="btn btn-primary mb-0" style="display: inline-block;">GO</button>
                            </div>
                            <div class="col-md-12 col-lg-auto pull-right" style="margin-top: 20px;">
                                <input type="text" name="search_txt" value="" class="form-control" placeholder="Search by name ..">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col d-flex align-items-center" style="margin-top: 10px; margin-bottom: 10px;">
                                <input type="checkbox" id="invert_selection" value="1" style="width: 20px; height: 20px;" class="mr-1"> Select All
                            </div>
                        </div>
                        <div class="clearfix"></div>

                        <div id="media_files">

                        </div>
                        <div class="clearfix"></div>
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <button style="display: none; width: 200px" class="btn btn-primary media_btn_loader" onclick="loadMoreImages();"><i class="fa fa-arrow-down text-white mr-1"></i> Show More</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal inmodal fade " id="update_media" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                {!! Form::open(['onsubmit' => 'return updateMedia();']) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Update Media</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        {!! Form::label('name','Name') !!}
                        {!! Form::text('name' , null , ['class' => 'form-control','placeholder' => 'Name','id' => 'img_name']) !!}
                    </div>
                    <div class="form-group">
                        {!! Form::label('title','Title') !!}
                        {!! Form::text('meta[title]' , null , ['class' => 'form-control meta_title','placeholder' => 'Title']) !!}
                    </div>
                    <div class="form-group">
                        {!! Form::label('media_link','Link') !!}
                        {!! Form::text('media_link' , null , ['class' => 'form-control','readonly']) !!}
                    </div>
                    <img src="" id="selected_img">
                    <div class="form-group">
                        {!! Form::label('alt_text','Alt Text') !!}
                        {!! Form::text('alt_text' , null , ['class' => 'form-control','required' => 'true']) !!}
                    </div>
                    <input type="hidden" name="media_id" id="media_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" onclick="deleteMedia()">Delete</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/dropzone/dropzone.js') }}"></script>
    <script>
        $(document).ready(function () {
            loadList();
            $("#invert_selection").click( function() {
                $("#image_gallery_listing input[type=checkbox]").each( function() {
                    $(this).attr('checked', !$(this).attr('checked'));
                });
            });
            $('input[name=search_txt]').keyup(function(event) {
                var code = event.which;
                if(code==13) {
                    event.preventDefault();
                    loadList();
                }
            });
            $('button[name=go_action]').click(function () {
                var action_status = $('select[name=action_status]').val();
                if(action_status == '') {
                    return false;
                }
                var files = $('#image_gallery_listing input[type=checkbox]:checked').serialize();
                if(files != '' && confirm('Are you sure you want to delete ?')) {
                    $('.ibox-content > .sk-spinner').show();
                    showSpiner();
                    $.ajax({
                        method: 'POST',
                        url: '{{ url('media/action-bulk/')}}',
                        data: files+'&_token={{ csrf_token() }}',
                        dataType: 'json'
                    }).done(function(data) {
                        loadList();
                        hideSpiner();
                        toastrShow('Success','Deleted Successfully.');
                    });
                }
            })
        });

        Dropzone.options.dropzoneForm = {
            paramName: "fileCover",
            maxFilesize: 400, // MB
            dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>",
            uploadMultiple: true,
            maxFiles: 50,
            parallelUploads: 50,
            params : {_token : csrf_token },
            url: '{{ url('media/save-cover/')  }}',
            init: function () {
                this.on('maxfilesreached', function () {
                    toastrShow('Error!','The file you are trying to upload is too big (200MB Max). Please compress the file or contact Support.');
                    return false;
                });
                this.on('maxfilesexceeded', function () {
                    toastrShow('Error!','The file you are trying to upload is too big (200MB Max). Please compress the file or contact Support.');
                    return false;
                });
                this.on('successmultiple', function () {
                    location.reload();
                });
            },
        };

        function loadList() {
            $('.ibox-content > .sk-spinner').show();
            showSpiner();
            var text = $('input[name=search_txt]').val();
            var type = "{{ (Request::has('type')) ? Request::input('type') : 1 }}";
            $.ajax({
                method: 'GET',
                url: '{{ url('media/list/')  }}?q='+text+'&type='+type,
            }).done(function(data) {
                $('#media_files').html(data);
                if(data != ''){
                    $('.media_btn_loader').show();
                }
                hideSpiner();
            });
        }
        function loadMoreImages(theme_id, type) {
            var page  = $('#media_files #action_page').val();
            if(page <= 0) {
                return;
            }
            $('.media_btn_loader').html('<span class="fa fa-spinner fa-spin fa-2x"></span>');
            $.ajax({
                method: 'POST',
                url: base_url+'/website/media/item',
                data: 'page='+page+'&_token='+csrf_token,
                dataType: 'json'
            }).done(function(data) {
                $('.media_btn_loader').html('<i class="fa fa-arrow-down"></i> Show More');
                if(data.success) {
                    $('#media_files #image_gallery_listing').append(data.html);
                    if(data.page > 0) {
                        $('#media_files #action_page').val(data.page);
                    } else {
                        $('.media_btn_loader').hide();
                        $('#media_files #action_page').val(data.page);
                    }
                }
            });
        }
        function getMedia(id,name) {
            $('#update_media').modal('show');
            var src = $('#list-media-'+id+' a').data('src');
            var image = $('#selected_img');
            // image.before( "<label>Image</label>" );
            $('#update_media #img_name').val(name);
            image.attr('src',src);
            image.css('width','740px');

            $('#media_link').val(src);
            $('#alt_text').val($('#list-media-'+id+' a').attr('title'));
            var meta_information = $('#list-media-'+id+' a').attr('meta');
            var meta_title          = '';
            var meta_description    = '';
            try {
                meta_information = $.parseJSON(meta_information);
                if(meta_information.title) {
                    meta_title = meta_information.title;
                }
                if(meta_information.description) {
                    meta_description = meta_information.description;
                }
            } catch (e) {

            }
            $('#collapse-media-advance').removeClass('in');
            $('.meta_title').val(meta_title);
            $('.meta_description').val(meta_description);

            $('#media_id').val(id);
        }
        function updateMedia() {
            return reloadAjaxSubmit('update_media',"{{ url('media/update/') }}",'alt_text','Update');
        }

        function deleteMedia() {
            var media_id = $('#media_id').val();
            if(confirm('Are you sure you want to delete this?')) {
                $.ajax({
                    method: 'POST',
                    url: '{{ url('media/delete/')}}',
                    data: 'media_id='+media_id+'&_token={{ csrf_token() }}',
                }).done(function() {
                    location.reload();
                });
            }
        }
    </script>
@endsection