@extends('themes.cp.'.setting('active_cp_theme').'.layouts.default')

@section('title', 'Personalise Slideshow')

@section('content')
    @push('custom-css')
        <link href="{{asset('assets/core/plugins/bootstrap3-editable/inputs-ext/bootstrap-datepicker/css/datepicker3.css')}}" rel="stylesheet" />
        <link href="{{asset('assets/core/plugins/bootstrap3-editable/inputs-ext/bootstrap-datetimepicker/css/datetimepicker.css')}}" rel="stylesheet" />
        <style>
            .pan{
                background: #fff;
                padding:20px 10px;
                margin:20px 0;
            }
            .caption{
                position: absolute;
                color: white;
                background: #0f0101d9;
                padding: 5px;
            }
            #postImages{
                display: flex;
                flex-direction: row;
                overflow: scroll;
                justify-content: space-between;
                flex-flow: wrap;
            }
            .dropzone .dz-preview{
                margin-left: 10px;
                margin-right: 10px;
            }

            .dz-default{
                width: 100%;
                display: block !important;
                padding-bottom: 45px;
                border-bottom: 1px dotted grey;
            }
            .bg-overlay-gradient::after {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                top: 0;
                background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
                border-radius: 15px;
            }
            .guest_caption {
                z-index: 9;
                background: none;
                font-size: 16px;
                margin: 0;
                position: absolute;
                bottom: 0;
                color: #fff !important;
                text-decoration: none !important;
                width: 100%;
                padding: 15px;
            }
            .guest_caption .name {
                font-size: 18px;
                font-weight: bold;
            }
            .guest_caption .message {
                font-size: 14px;
                width: 100%;
                overflow: hidden;
                max-height: 150px;
            }
            .guest_caption .no {
                font-size: 18px;
                font-weight: normal;
                margin-top: 8px;
            }

            .card {
                background: transparent;
            }
            .card-body-for-imgs {
                height: 300px;
                overflow: hidden;
                background: transparent;
            }
            .card-body-for-imgs img {
                object-fit: cover;
                object-position: top;
                height: 100%;
                border-radius: 15px;
            }
            .guest_caption_download {
                padding: 7px !important;
                background: rgba(0,0,0,0.8);
                border-radius: 60px;
                width: 40px;
                height: 40px;

                top: 20px !important;
                right: 20px !important;
            }
            .dropzone .dz-preview .dz-image img {
                object-fit: cover !important;
                object-position: top !important;
            }
            @media (max-width: 768px) {
                .dropzone .dz-preview  {
                    width: 100%;
                }
                .dropzone .dz-preview .dz-image {
                    width: 100%;
                    height: 300px;
                }
                .dropzone .dz-preview .btn {
                    width: 100%;
                }
            }
        </style>
    @endpush
    <div class="container row mx-auto ">
        <div class="col-md-12">
            <!-- begin page-header -->
            <!-- end page-header -->


                <div class="row">
                    @if(auth()->user()->isCouple())

                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 tp-couple-album">
                            <div class="event-head">
                                <h4>Your Private Gallery</h4>
                            </div>

                            <div class="col-12 p-0">
                                <div class="row mt-3">
                                    @if($wedding->albums->count())
                                        {{-- $wedding->albums are sorted from oldest to newest which is wrong --}}
                                        @foreach($wedding->albums->reverse() as $album)
                                            <div class="col-md-4 col-sm-6 col-12">
                                                <div class="card">
                                                    <div class="card-body card-body-for-imgs p-0">
                                                        <div class="bg-overlay-gradient"></div>
                                                        <a href="{{ route('takenplace::cp.event.albums.edit', $album->storage_name) }}" class="guest_caption">
                                                            <span class="d-block text-left name">{{$album->guest_name}}</span>
                                                            <span class="d-block text-left message">{{$album->message}}</span>
                                                            <span class="d-block text-left no"> {{ count($album->photos) }} </span>
                                                        </a>

                                                        @if($album->approved)
                                                            {{-- current status: album is approved --}}
                                                            {{-- click to reject --}}
                                                            <a href="{{ route('takenplace::cp.event.albums.reject', $album->storage_name) }}" class="btn tp-approved">
                                                                <span> Approved </span>
                                                            </a>
                                                          @else
                                                            {{-- current status: album is rejected --}}
                                                            {{-- click to approve --}}
                                                            <a href="{{ route('takenplace::cp.event.albums.approve', $album->storage_name) }}" class="btn tp-rejected">
                                                                <span> Rejected </span>
                                                            </a>
                                                        @endif

                                                        <a href="{{ route('takenplace::cp.event.albums.downloadPhotos', $album->storage_name) }}" class="btn tp-download guest_caption_download"><i class="fas fa-download"></i></a>

                                                        <img src="{{ isset($wedding->photos($album->storage_name)[0]) ? url($wedding->photos($album->storage_name)[0][0]) : asset('assets/core/images/placeholders/photo_placeholder.png') }}" alt="{{ $album->name }}" class="img-responsive" />
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            {!! get_alert('', '', "Your guests haven't shared any photos yet.") !!}
                                        </div>
                                    @endif

                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="tp-couples-event col-md-12 p-0">
                        <form id="post-form" method="post">
                            @if(auth()->user()->isCouple())
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pan ">
                                    <div class="form-row">
                                        <h4>Upload Your Own Photos.</h4><hr/><br/>
                                        <div class="form-group col-md-12 tp-upload">
                                            {!! dropzone('postImages', 'Wedding', $wedding->id, 'photos/', 100, 10000, fileTypes('image'), 'image' ) !!}
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>


        </div>
    </div>
    @push('custom-js')
        <script src="{{url('assets/core/plugins/clipboard/clipboard.js')}}"></script>
        <script>
            $(document).ready(function() {

                new ClipboardJS('.btn-clipboard', {
                    text: function(trigger) {
                        return '{{ route('takenplace::slideshow', $wedding->slideshow_id) }}';
                    }
                });

                $('.btn-clipboard').on('click', function(e){
                    e.preventDefault();
                    $(this).attr('data-original-title', 'Copied').tooltip('show').tooltip('hide').attr('data-original-title','Copy To Clipboard');
                });
            });

            Dropzone.autoDiscover = false;

            function my_dropzone(dropZoneId, object_id, object_name, fieldName, path_dz, file_path_dz, file_dz, watermark, maxFiles, maxFileSize, acceptedFiles, dz_delete_file, dz_cancel_upload, dz_confirm_cancel, dz_edit_file, dz_delete_error, controller) {

                let elm = $('#' + dropZoneId);
                if (file_dz) {
                    elm.parents('form').prepend($('<input type="hidden" name="path_' + fieldName + '" value="' + path_dz + '">'));
                } else {
                    let inputs = `
                        <input type="hidden" name="object_name_` + fieldName + `" value="` + object_name + `">
                        <input type="hidden" name="path_` + fieldName + `" value="` + path_dz + `">
                        <input type="hidden" name="field_name_dz" value="` + fieldName + `">
                        <input type="hidden" name="file_path_` + fieldName + `" value="` + file_path_dz + `">
                        <input type="hidden" name="watermark_` + fieldName + `" value="` + watermark + `">
                    `;
                    elm.parents('form').prepend($(inputs));
                }

                var fileList = [];
                var i        = 0;

                elm.dropzone({
                    url: '{{ route('takenplace::events.albums.uploadPhotos', ['wedding' => $wedding, 'albumStorageName' => 'couple']) }}',
                    params: {},
                    headers: {
                        'X-CSRF-TOKEN': '"' + $('meta[name="csrf-token"]').attr('content') + '"',
                    },
                    addRemoveLinks: true,
                    dictRemoveFile: dz_delete_file,
                    dictCancelUpload: dz_cancel_upload,
                    dictCancelUploadConfirmation: dz_confirm_cancel,
                    paramName: fieldName,
                    uploadMultiple: true,
                    parallelUploads: 1,
                    maxFiles: maxFiles,
                    maxFilesize: maxFileSize,
                    acceptedFiles: acceptedFiles,
                    timeout: 0,
                    init: function () {

                        var dz = this;
                        var existingFileCount = 0;
                        if (object_id > 0) {
                            //get all existing files from server
                            $.post('{{ route('takenplace::cp.event.getPhotos', ['wedding' => $wedding]) }}', {
                                object_name: object_name,
                                object_id: object_id,
                            }, function(data) {
                                data = $.parseJSON(data);
                                if (data) {
                                    $.each(data, function(index, val) {
                                        let newId = val.name.replace(/\.[^/.]+$/, "");
                                        let mockFile = { name: val.name, size: val.size };
                                        dz.emit("addedfile", mockFile);
                                        let ext = val.name.split('.').pop();

                                        if (ext !== 'png' && ext !== 'PNG' && ext !== 'jpg' && ext !== 'JPG' && ext !== 'jpeg' && ext !== 'JPEG' && ext !== 'bmp' && ext !== 'gif') {
                                            let thumbnail = generateThumbnail(ext);
                                            dz.emit("thumbnail", mockFile, thumbnail);
                                        } else {
                                            dz.emit("thumbnail", mockFile, val.url);
                                            let editLink = Dropzone.createElement('<a class="dz-remove btn btn-sm btn-success dz-btn edit-button-cropper" data-id="'+newId+'">' + dz_edit_file + '</a>');
                                            mockFile.previewElement.appendChild(editLink);
                                        }

                                        dz.emit("complete", mockFile);
                                        mockFile._removeLink.setAttribute('class','btn btn-sm btn-danger dz-remove dz-btn');

                                        fileList[i] = {
                                            "fileName": val.name,
                                            "newName": val.name,
                                            "fileId" : newId
                                        };
                                        $('#' + dropZoneId).parents('form').prepend($('<input id="fileUpload' + newId + '" type="hidden" ' + 'name="' + fieldName + '[]" ' + 'value="' + val.name + '" data-path="' + path_dz + '" data-fieldName="' + fieldName + '" data-object_name="' + object_name + '" data-watermark="' + watermark + '">'));
                                        i += 1;
                                        dz.options.maxFiles = dz.options.maxFiles - 1;
                                    });
                                }
                            });
                        }

                        this.on('maxfilesexceeded', function (file) {
                            this.removeFile(file);
                            Swal.fire({
                                position: 'center',
                                type: 'error',
                                title: 'You Can Not Upload Any More Files!',
                                showConfirmButton: false,
                                timer: 1000
                            });
                        });

                        this.on('success', function (file, response) {
                            // Add Edit Modal Button
                            let newId = response.replace(/\.[^/.]+$/, '');
                            file._removeLink.setAttribute('class','btn btn-sm btn-danger dz-remove dz-btn');
                            //let editLink = Dropzone.createElement('<a class="dz-remove btn btn-sm btn-success dz-btn edit-button-cropper" data-id="'+newId+'">' + dz_edit_file + '</a>');
                            //file.previewElement.appendChild(editLink);

                            fileList[i] = {
                                'fileName': file.name,
                                'newName': response,
                                'fileId': newId,
                            };

                            if (file_dz) {
                                $('#' + dropZoneId).parents('form').append($('<input id="fileUpload' + newId + '" class="uploadedFile" type="hidden" ' + 'name="' + fieldName + '" ' + 'value="' + response + '" data-path="' + path_dz + '" data-fieldName="' + fieldName + '" data-object_name="' + object_name + '" data-watermark="' + watermark + '">'));
                            } else {
                                $('#' + dropZoneId).parents('form').append($('<input id="fileUpload' + newId + '" class="uploadedFile" type="hidden" ' + 'name="' + fieldName + '[]" ' + 'value="' + response + '" data-path="' + path_dz + '" data-fieldName="' + fieldName + '" data-object_name="' + object_name + '" data-watermark="' + watermark + '">'));
                            }
                            i += 1;
                            dz.options.maxFiles = dz.options.maxFiles - 1;
                        });

                        this.on("canceled", function () {
                            Swal.fire({
                                position: 'center',
                                type: 'error',
                                title: 'The Upload has been canceled.',
                                showConfirmButton: false,
                                timer: 1000
                            });
                        });

                        this.on('removedfile', function (file) {
                            let removeFile = '';
                            let removeInput = '';
                            let fileInput = '#fileUpload';
                            for (let f = 0; f < fileList.length; f++) {
                                if (fileList[f].fileName === file.name) {
                                    removeFile = fileList[f].newName;
                                    fileInput = '#fileUpload' + fileList[f].fileId;
                                }
                            }
                            dz.options.maxFiles = dz.options.maxFiles + 1;
                            if (removeFile) {
                                $.ajax({
                                    url: '{{ route('takenplace::cp.event.albums.removePhoto', ['albumStorageName' => 'couple']) }}',
                                    type: 'POST',
                                    data: {
                                        'fileName': removeFile,
                                    },
                                }).done(function (data) {
                                    if ($(fileInput).length) {
                                        $(fileInput).remove();
                                        Swal.fire({
                                            position: 'center',
                                            type: 'success',
                                            title: 'File Deleted!',
                                            showConfirmButton: false,
                                            timer: 1000
                                        });
                                    }
                                }).fail(function (data) {
                                    Swal.fire({
                                        position: 'center',
                                        type: 'success',
                                        title: dz_delete_error,
                                        showConfirmButton: false,
                                        timer: 1000
                                    });
                                });
                            }
                        });
                    }
                });
            }

            function generateThumbnail(ext) {
                return site_root + 'assets/images/placeholders/' + ext + '.png';
            }
        </script>
    @endpush
@endsection