@section('title', __('site.page_media_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/dropzone/min/dropzone.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/magnific-popup/magnific-popup.css">
    <style>
        :root {
            --sizeLine: 150px;
        }
    </style>
@endsection
@include('includes/header')
@include('includes/topSite')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('site.page_media_h1') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.page_media_h1') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">

            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title hupper">
                        <i class="fa fa-cloud-upload"></i> {{ __('site.page_media_block_1') }}
                    </h3>
                </div>
                <div class="block-content text-center pb-2">
                    <div class="dropzone mb-3" action=""></div>
                    <h5 class="mb-2">{{ __('site.page_integration_img_size') }}</h5>
                </div>
            </div>

            <div class="block block-rounded imgsD">
                <div class="block-header block-header-default">
                    <h3 class="block-title hupper">
                        <i class="fa fa-images"></i> {{ __('site.page_media_block_2') }}
                    </h3>
                    <div class="block-options js-gallery-actions">
                        <button type="button" class="btn btn-sm btn-alt-secondary clear-selected d-none">{{ __('site.page_media_block_btn_1') }}</button>
                        <button type="button" class="btn btn-sm btn-danger disabled remove-selected" >{{ __('site.page_media_block_btn_2') }}</button>
                    </div>
                </div>
                <div class="block-content text-center p-0">
                @if(!$allMedia->count())
                    <div class="py-6">
                        <i class="fa fa-folder-open fa-3x opacity-50"></i>
                        <h6 class="mt-2">{{ __('site.page_media_no_record') }}</h6>
                    </div>
                @else
                        <div class="row js-gallery items-push ps-3 pe-3 pb-1 pt-3">
                    @foreach($allMedia as $media)
                        @php
                        $expName = explode('.',$media->source);
                        $lastK = array_key_last($expName)-1;
                        @endphp

                                <div class="col-sm-6 col-md-4 col-xl-3 d-flex flex-column">
                                    <div class="options-container w-100 flex-grow-1 rounded bg-white d-flex align-items-center thumbnail" data-id="{{ $media->id }}">
                                        <div class="overlay-img rounded">
                                            <i class="fa fa-check text-white" style="font-size:33px;"></i>
                                        </div>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-danger remove" data-id="{{ $media->id }}">
                                                <i class="fa fa-fw fa-xmark"></i>
                                            </button>
                                        </div>
                                        <div class="options-item block block-rounded block-transparent mb-0 w-100">
                                            <div class="block-content text-center p-1">
                                                <p class="mb-2 overflow-hidden ratio-16-9">
                                                    <img class="img-fluid" src="https://{{ $serverData->name }}/contents{{ $media->source }}" style="height:120px;">
                                                </p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                    @endforeach
                        </div>
                @endif

                    {{ $allMedia->links('vendor.pagination.default') }}

                </div>
            </div>

        </div>
    </div>

</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script>
    var LNG_DROPHERE = '{{ __('site.site_file_upload') }}</br><small>({{ __('site.site_file_upload_2') }})</small>';
    var LNG_CANCELUP = '{{ __('site.site_file_cancel') }}';
    var LNG_CANCELEDUP = '{{ __('site.site_file_canceled') }}';
    var LNG_REMOVE = '{{ __('site.btn_remove') }}';
    One.helpersOnLoad(['jq-magnific-popup']);
</script>
<script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: "{{ route('site.posts.r.mediaUpload') }}",
        addRemoveLinks: true,
        uploadMultiple: true,
        parallelUploads: 5,
        params: {
            type: 'media'
        },
        acceptedFiles: "image/jpeg,image/png,image/gif,image/bmp,image/webp",
        init: function() {
            this.on("maxfilesexceeded", function(file) {
                file.previewElement.remove();
            });
            this.on("complete", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    location.reload();
                }
            });
        },
        removedfile: function(file) {
           $.post("{{ route('site.posts.c.uploadCanc') }}", { fl: file.xhr.response, type: 'media'  }).done(function( data ) { $('#feature_image').val(''); });
            file.previewElement.remove();
        },
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
        },
        error: function (file, response) {
            /*if (file.type !== "image/*") {
                this.removeFile(file);
            }*/
            file.previewElement.classList.add("dz-error");
        }
    });

    $('.thumbnail .options-item').on('click', function() {
        $(this).closest('.thumbnail').addClass('selected');
        mediaVerify();
        return false;
    });

    $('.overlay-img').on('click', function() {
            $(this).closest('.thumbnail').removeClass('selected');
            mediaVerify();
        return false;
    });

    $('.clear-selected').on('click', function() {
        $('.thumbnail.selected').removeClass('selected');
        mediaVerify();
    });

    $('.btn-group .remove').on('click', function() {
        var file = [$(this).attr('data-id')];
        Sweetalert2.fire({
            title: '{{ __('site.page_media_alert_title_1') }}',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: '{{ __('site.action_confirm') }}',
            cancelButtonText: '{{ __('site.btn_cancel') }}',
        }).then((result) => {
            if (result.isConfirmed) {
                $('.imgsD').addClass('block-mode-loading-oneui block-mode-loading');
                $.post("{{ route('site.posts.d.mediaRemoveM') }}", { fls: file }).done(function( data ) {
                    location.reload();
                    $('.imgsD').removeClass('block-mode-loading-oneui block-mode-loading');
                });
            }
        });

    });

    $('.block-options .remove-selected').on('click', function() {
        var arrRmv = [];
        $(".thumbnail.selected").each(function( index, element ) {
            arrRmv.push($(this).attr('data-id'));
        });
        var total = $(".thumbnail.selected").length;
        var msg = (total == 1 ? '{{ __('site.page_media_alert_title_2') }}' : '{{ __('site.page_media_alert_title_2_2') }}'+' '+total+' {{__('site.page_media_alert_title_2_2_2') }}');
        Sweetalert2.fire({
            title: msg,
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: '{{ __('site.action_confirm') }}',
            cancelButtonText: '{{ __('site.btn_cancel') }}',
        }).then((result) => {
            if (result.isConfirmed) {
                $('.imgsD').addClass('block-mode-loading-oneui block-mode-loading');
                $.post("{{ route('site.posts.d.mediaRemoveM') }}", { fls: arrRmv }).done(function( data ) {
                    location.reload();
                    $('.imgsD').removeClass('block-mode-loading-oneui block-mode-loading');
                });
            }
        });



    });

    function mediaVerify() {
        var selectedCount = $('.js-gallery .thumbnail.selected').length;

        if (selectedCount > 0) {
            $('.js-gallery-actions .remove-selected').removeClass('disabled');
            $('.js-gallery-actions .clear-selected').removeClass('d-none');
        } else {
            $('.js-gallery-actions .remove-selected').addClass('disabled');
            $('.js-gallery-actions .clear-selected').addClass('d-none');
        }
    }


</script>
</body>
</html>