@section('title', __('site.page_album_edit_title'))
@section('head')
    <link href="/assets/css/thumb.css" media="screen" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/dropzone/min/dropzone.min.css">
@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_album_edit_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">
                            <a href="javascript:void(0)">{{ __('site.menu_item_3') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.album.r') }}">{{ __('site.menu_item_3_sub_3') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.action_add') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @if (\Session::has('success'))
        <div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
            <b>{!! \Session::get('success') !!}</b>
        </div>
        @php Session::forget('success'); @endphp
    @endif


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

            <div class="block block-rounded">
                <div class="block-content">

                    <form action="{{ route('site.album.u.do',$albumData->id) }}" method="POST">

                        <div class="mb-3 @if (\Session::has('error_name')) erro-inp @endif  ">
                            <label class="form-label" for="val-name">{{ __('site.page_links_new_input_1') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @if (\Session::has('error_name')) is-invalid @endif" id="val-name" name="name" value="{{ $albumData->name }}" autocomplete="off">
                            @if (\Session::has('error_name')) <div id="msgerror_name" class="form-text text-danger"> {!! \Session::get('error_name') !!} </div> @endif
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('site.page_videos_add_textarea') }}</label>
                            <textarea name="description" rows="2" class="textarea form-control">{{ $albumData->description }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="allow_comments">{{ __('site.page_post_new_side_grid1_label_2') }}</label>
                            <select class="form-select"  name="allow_comments">
                                <option value="1" {{ ($albumData->allow_comments ? 'selected' : '') }}>{{ __('site.action_yes') }}</option>
                                <option value="0" {{ (!$albumData->allow_comments ? 'selected' : '') }}>{{ __('site.action_no') }}</option>
                            </select>
                        </div>

                </div>
                <div class="block-content py-2 border-top d-flex align-items-center">
                    <button type="submit" class="btn btn-primary">{{ __('site.action_save') }}</button>
                    <div class="ml-auto"><a class="delAlbum" id="{{ $albumData->id }}" href="javascript:void(0);">{{ __('site.page_album_edit_remove') }}</a></div>
                </div>
                </form>
            </div>
            <form id="form_delAlbum" action="{{ route('site.album.d',$albumData->id) }}" method="POST"><input type="hidden" name="_method" value="DELETE"></form>
        </div>

        <div class="col-md-7">
            <div class="block block-rounded">
                <div class="block-content p-0">
                    <p class="mb-0 ps-3 pe-3 pt-2">{{ __('site.page_album_edit_upload_title') }}</p>
                    <hr class="mt-1 mb-0">
                    <div class="ps-3 pe-3 pt-2 pb-2">

                        <div class="ratio-box ratio-16-9 mb-2 mt-1 d-none" style="margin: 0 auto; box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1); ">
                            <div class="ratio-content">
                                <div class="unavailable-message d-none">{{ __('site.page_ads_new_block_not') }}</div>
                                <img src="https://brascast.xyz/contents/1/ads/" class="">
                            </div>
                        </div>
                        <div class="dropzone mt-2 mb-2" action=""></div>
                    </div>
                </div>
                <div class="block-content border-top ps-2 pe-2 pt-2 pb-2 lar2 ">

                    <div class="d-flex align-items-center justify-content-center">
                        <div class="d-flex align-items-center justify-content-between me-4">
                            <div class="me-2">
                                <i class="fa fa-file-image fa-2xl"></i>
                            </div>
                            <div>
                                <div class="fs-sm text-muted mb-2" style="line-height: 1.1;margin-top:-8px;">{{ __('site.site_file_permit') }}</div>
                                <div class="fw-semibold mb-0 fa-sm">{{ __('site.files_jpg_png_webp') }}</div>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between me-4">
                            <div class="me-2">
                                <i class="fa fa-floppy-disk fa-2xl"></i>
                            </div>
                            <div>
                                <div class="fs-sm text-muted mb-0" style="line-height: 1.1;">{{ __('site.site_file_size') }}</div>
                                <div class="fw-semibold mb-0">2 MB</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="block block-rounded">
                <div class="block-content p-0 d-flex align-items-center pe-3 border-bottom border-1">
                    <p class="mb-0 ps-3 pe-3 pb-1 pt-2">{{ __('site.page_album_edit_photos_title') }}</p>
                    <div class="ml-auto action-thumbnail"><button class="remove-selected btn btn-xs btn-danger disabled">{{ __('site.page_album_edit_remove_selected') }}</button></div>
                </div>
                <div class="block-content pt-1 pb-2 ps-3 pe-3 thumb-list">

                    @if($allPhotos->count() == 0)
                        <div class="py-6 text-center"> <i class="fa fa-info-circle fa-3x d-block mb-2"></i> <strong class="fw-semibold">{{ __('site.page_album_edit_no_photos') }}</strong></div>
                    @else
                    <div class="row ui-sortable mt-2">
                        @foreach($allPhotos as $photo)
                        <div class="col-custom-4 ui-sortable-handle">
                            <div id="{{ $photo->id }}" class="thumbnail @if($photo->star) cover @endif ">
                                <div class="btn-group">
                                    <div class="dropdown">
                                        <button type="button" class="btn btn-alt-secondary dropdown-toggle" id="dropdown-default-light" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fa fa-ellipsis"></i>
                                        </button>
                                        <div class="dropdown-menu fs-sm option" aria-labelledby="dropdown-default-light" style="">
                                            <a class="dropdown-item edit"><i class="fa fa-edit me-1"></i> {{ __('site.page_album_edit_change_desc') }}</a>
                                            <a class="dropdown-item option-cover"><i class="fa fa-star me-1"></i> {{ __('site.page_album_edit_set_cover') }}</a>
                                            <a class="dropdown-item text-danger remove" href="javascript:void(0)" id="{{ $photo->id }}"><i class="fa fa-trash me-1"></i>
                                                {{ __('site.btn_remove') }}</a>
                                            <form id="form_delete_{{ $photo->id }}" action="" method="POST"><input type="hidden" name="_method" value="DELETE"></form>
                                        </div>
                                    </div>
                                </div>
                                <span class="icon-cover" title="{{ __('site.page_album_edit_cover_title') }}">
                                    <span class="fa fa-star"></span>
                                </span>
                                <div class="ratio-box ratio-16-9">
                                    <div class="ratio-content" style="background-color: #F2F5F6;">
                                        <img style="" src="{{ 'https://'.$serverData->name.'/contents'.str_replace('.webp','_t.jpg',$photo->img) }}"></div>
                                </div>
                                <div class="overlay"><i class="fa fa-refresh fa-spin"></i><i class="fa fa-check"></i></div>
                                <div class="form-edit"><textarea class="form-control">{{ $photo->description }}</textarea>
                                    <div class="submit-container"><button class="btn btn-sm btn-primary" type="submit">{{ __('site.action_save') }}</button><a class="cancel" href="#">{{ __('site.btn_cancel') }}</a></div>
                                </div>
                                <div class="overlay-alert"><div class="alert-success"></div></div></div>
                        </div>
                        @endforeach

                    </div>
                    @endif

                </div>
            </div>
        </div>
    </div>


</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/jquery-ui.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
    var LNG = '{{ Config::get('app.locale') }}';
    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') }}';

    $(".ui-sortable").sortable({
        stop: function(event, ui) {
            var data = "";
            var cont = 0;
            $('#'+ui.item[0].children[0].attributes.id.value).addClass('loading');
            $(".thumbnail").each(function(i, el){
                cont++;
                var p = $(el).attr("id");
                data += p+",";
            });

            $.post('{{ route('setPos',['albums_photos',$albumData->id]) }}', { o : data }).done(function( resp ) {
                $('#'+ui.item[0].children[0].attributes.id.value).removeClass('loading');
            });
        }

    });
    $( "#sortable" ).disableSelection();

</script>
<script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
<script>

    $('.delAlbum').on('click', function() {
        Sweetalert2.fire({
            title: '{{ __('site.page_album_alert_title_1') }}',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: '{{ __('site.action_confirm') }}',
            cancelButtonText: '{{ __('site.btn_cancel') }}',
        }).then((result) => {
            if (result.isConfirmed) {
                $("#form_delAlbum").submit();
            }
        });

    });

    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: "{{ route('site.album.r.mediaUpload') }}",
        addRemoveLinks: true,
        uploadMultiple: true,
        parallelUploads: 5,
        thumbnailWidth: 120,
        thumbnailHeight: 120,
        params: {
            type: 'albums',
            id: '{{ $albumData->id }}'
        },
        acceptedFiles: "image/jpeg,image/png,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: 'albums' }).done(function( data ) {  });
            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");
        }
    });


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

    $('.thumb-list').on('click', '.thumbnail.selected .overlay', function() {
        if (!$(this).hasClass('loading')) {
            $(this).closest('.thumbnail').removeClass('selected');
            mediaVerify();
        }
        return false;
    });

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

    $('.option').on('click', '.edit', function() {
        $(this).closest('.thumbnail').addClass('description-visible');
    });

    $('.thumb-list').on('click', '.form-edit button', function() {
        var thumbnailElement = $(this).closest('.thumbnail');
        var imageId = thumbnailElement.attr('id');
        var description = $(this).closest('.form-edit').find('textarea').val();
        console.log(description,imageId);
        $.post( "{{ route('site.album.r.ajax') }}", { type: 'description', description: description, id: imageId }) .done(function( data ) {  });

        thumbnailElement.removeClass('options-visible').removeClass('description-visible');
        thumbnailElement.find('.alert-success').html('Descrição salva com sucesso!').addClass('visible');
        setTimeout(function() {
            thumbnailElement.find('.alert-success').removeClass('visible');
        }, 2400);

    });

    $('.option').on('click', '.option-cover', function() {
        var thumbnailElement = $(this).closest('.thumbnail');
        var imageId = thumbnailElement.attr('id');

        if (thumbnailElement.hasClass('cover')) {
            return false;
        }

        $.post( "{{ route('site.album.r.ajax') }}", { type: 'star', album: '{{ $albumData->id }}', id: imageId }) .done(function( data ) {  });

        $('.thumb-list .thumbnail.cover').removeClass('cover');
        thumbnailElement.addClass('cover');
        thumbnailElement.removeClass('options-visible');
        thumbnailElement.find('.alert-success').html('Capa definida com sucesso!').addClass('visible');
        setTimeout(function() {
            thumbnailElement.find('.alert-success').removeClass('visible');
        }, 2400);

    });

    $('.thumb-list').on('click', '.thumbnail .form-edit .cancel', function() {
        $(this).closest('.thumbnail').removeClass('options-visible').removeClass('description-visible');
        return false;
    });

    $('.btn-group .remove').on('click', function() {
        var id = $(this).attr('id');
        Sweetalert2.fire({
            title: '{{ __('site.page_videos_alert_title_1') }}',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: '{{ __('site.action_confirm') }}',
            cancelButtonText: '{{ __('site.btn_cancel') }}',
        }).then((result) => {
            if (result.isConfirmed) {
                $('.thumb-list').addClass('block-mode-loading-oneui block-mode-loading');
                $.post("{{ route('site.album.d.list') }}", { only:true, ids: id }).done(function( data ) {
                    location.reload();
                    $('.thumb-list').removeClass('block-mode-loading-oneui block-mode-loading');
                });
            }
        });

    });

    $('.action-thumbnail .remove-selected').on('click', function() {
        var selectedItems = $('.thumb-list .thumbnail.selected');
        var selectedCount = selectedItems.length;
        if (selectedCount == 0) {
            return false;
        }
        var videos = [];

        $(".thumbnail.selected").each(function(i, el){
            videos.push($(el).attr("id"));
        });



        var total = $(".thumbnail.selected").length;
        var msg = (total == 1 ? '{{ __('site.page_videos_alert_title_2') }}' : '{{ __('site.page_videos_alert_title_2_2') }}'+' '+total+' {{__('site.page_videos_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) {
                $('.thumb-list').addClass('block-mode-loading-oneui block-mode-loading');
                $.post("{{ route('site.album.d.list') }}", { ids: videos }).done(function( data ) {
                    location.reload();
                });
            }
        });

    });




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

        if (selectedCount > 0) {
            $('.action-thumbnail .remove-selected').removeClass('disabled');
            $('.action-thumbnail .clear-selected').removeClass('d-none');
        } else {
            $('.action-thumbnail .remove-selected').addClass('disabled');
            $('.action-thumbnail .clear-selected').addClass('d-none');
        }
    }
</script>
</body>
</html>