@php
    $messageLimit = 100;
@endphp
@extends('themes.public.'.setting('active_public_theme').'.layouts.default')

@section('content')
    @push('custom-css')
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
        <link href="{{ asset('assets/themes/public/' . setting('active_public_theme') . '/assets/css/styleGuestUpload.css') }}" rel="stylesheet" />
    @endpush
    <div class="container">
        <div class="row tp-guest-upload">
            <div class="col-12 tp-logo">
                <a href="javascript:;" class="logo-brand" data-toggle="nav-profile">
                    <div class="cover cplogo">
                        <img src="{{ $wedding->branding_upload_logo ?? $wedding->branding_logo ?? asset('assets/themes/public/' . setting('active_public_theme') . '/assets/images/tp-logo.png') }}" class="img-flex" alt="Website Logo">
                    </div>
                </a>
            </div>
            <div class="col-12 ">
                <div class="upload-container tp-form shadow-none">
                    <form id="uploads" action="{{ route('takenplace::events.albums.store', ['wedding' => $wedding, 'albumStorageName' => $album_name]) }}" class="" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="uploads_id" value="{{$wedding->uploads_id}}" />
                        <input type="hidden" name="takenplace_wedding_id" value="{{$wedding->id}}" />
                        <input id="storage-name" type="hidden" name="storage_name" value="{{ $album_name }}" />
                        <div class="one">
                            <div class="row">
                                <div class="col-12">
                                    <div class="tp-guest-intro position-relative">
                                        @if ($wedding->wedding_photo)
                                            <div class="asset-img">
                                                <img src="{{ $wedding->wedding_photo }}" class="w-photo img-responsive" />
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <div class="tp-guest-info">
                                        <h4 class="center"><span class="font-weight-bolder">{{ $wedding->name }}</span></h4>
                                        <p class="date center">{{\Carbon\Carbon::parse($wedding->date)->format('j F Y')}}</p>
                                        <p class="messsage center"> {{$wedding->message}}</p>
                                    </div>
                                </div>
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>

                            <div class="row">
                                <div class="col-12 center">
                                    @if ($wedding->checkIfThePortalIsOpen())
                                        <a href="#" id="upload-photos" class="btn btn-success btn-upload"><i class="fa fa-upload"></i> Upload Your Photos</a>
                                    @else
                                        <a href="#" disabled="true"  class="btn btn-success btn-upload">The portal is currently closed!</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="two">
                            <div class="form-row">
                                <div class="col-12"><br/>
                                    <h6 class="text-center">Upload Your Images Here</h6>
                                    <div class="form-row  col-md-12">
                                        <div class="form-group col-md-12 tp-upload">
                                            {!! dropzone('postImages', 'Wedding', $wedding->id, ''. $wedding->id, 50, 10000, fileTypes('image'), 'image', false) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 center"><br/>
                                    <a href="#" id="next" class="btn btn-success btn-upload"><i class="fa fa-upload"></i> Upload Your Photos</a>
                                </div>
                            </div>
                        </div>
                        <div class="three">
                            <div class="form-row tp-guest-form">
                                <div class="col-12">
                                    <div class="form-group col-md-12">
                                        <label for="name">Your Name</label>
                                        <input id="name" type="text" name="guest_name" value="{{ old('guest_name') }}" class="form-control" placeholder="Your Name" />
                                    </div>
                                    @if ($wedding->show_message)
                                        <div class="form-group col-md-12">
                                            <label for="message">Message</label>

                                            <textarea id="message" name="message" cols="5" rows="2" class="form-control" placeholder="Message" maxlength="{{ $messageLimit }}">{{old('message')}}</textarea>
                                            <div class="col-12 mt-2">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <span id="messageWarning" class="text-danger d-none">Character limit has been reached</span>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="text-right font-weight-bold">
                                                            <span id="messageCount">0</span>/{{$messageLimit}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if ($wedding->collect_emails)
                                        <div class="form-group col-md-12">
                                            <label for="email">e-mail</label>
                                            <input type="email" id="email" name="email" class="form-control" placeholder="E-Mail" maxlength="255">{{old('email')}}</input>
                                        </div>
                                    @endif
                                    <div class="form-group col-md-12">
                                        <div class="form-check">
                                            <input class="form-check-input" name="live_slideshow" type="checkbox" checked id="live_slideshow">
                                            <label class="form-check-label f-14" for="live_slideshow">
                                                Add To Live Slideshow?
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row col-md-12 center">
                                <button class="btn btn-success btn-upload" type="submit"><i class="fa fa-upload"></i> Upload Your Photos</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @push('custom-js')
        <script>
            $(document).ready( function() {

                $(document).on('keyup', '#message', function(e) {
                    let count = $(this).val().length;
                    let limit = parseInt("{{ $messageLimit }}");
                    let messageCountElement = $('#messageCount');
                    let messageWarningElement = $('#messageWarning');

                    if (count > 50 && count < 80) {
                        messageCountElement.addClass('text-primary');
                        messageCountElement.removeClass('text-danger');
                        messageCountElement.removeClass('text-success');
                    } else if (count >= 80) {
                        messageCountElement.addClass('text-danger');
                        messageCountElement.removeClass('text-success');
                        messageCountElement.removeClass('text-primary');
                    } else {
                        messageCountElement.removeClass('text-primary');
                        messageCountElement.removeClass('text-danger');
                        messageCountElement.addClass('text-success');
                    }


                    if (count >= limit) {
                        messageWarningElement.removeClass('d-none');
                    } else {
                        messageWarningElement.addClass('d-none');
                    }
                    messageCountElement.text(count);
                });

                let startBtn = $('#upload-photos');
                let step1 = $('.one');
                let step2 = $('.two');
                let step3 = $('.three');
                let nextBtn = $('#next');

                startBtn.on('click', function(e){
                    e.preventDefault();
                    Swal.fire({
                        title: '',
                        html: 'Please ensure your photos adhere to our <a href="{{url('terms-of-use.html')}}" target="_blank">T&C’s</a>',
                        type: 'info',
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: 'Confirm',
                        cancelButtonText: 'Not Yet',
                        preConfirm: (isConfirm) => {
                            if (isConfirm) {
                                step1.fadeOut(function(){
                                    step2.fadeIn(function(){
                                        window.scrollTo(0, 0);
                                    });
                                });
                            } else {
                                return false;
                            }
                        },
                    });
                });

                nextBtn.on('click', function(e){
                    e.preventDefault();
                    if ($('.uploadedFile').length) {
                        step2.fadeOut(function(){
                            step3.fadeIn();
                        });
                    } else {
                        Swal.fire({
                            position: 'center',
                            type: 'warning',
                            title: 'Please Upload at least one image',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }
                });

                @if(session()->has('success'))
                    Swal.fire({
                        position: 'center',
                        type: 'success',
                        title: successPhrases[Math.floor(Math.random() * successPhrases.length)],
                        text: 'Thanks for sharing your photos, feel free to keep on sharing.',
                        showConfirmButton: true,
                    });
                @endif
            });

            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));
                }

                let albumName = $('#storage-name').val();
                let fileList = [];
                let i        = 0;

                elm.dropzone({
                    url: '{{ route('takenplace::events.albums.uploadPhotos', ['wedding' => $wedding, 'albumStorageName' => $album_name]) }}',
                    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;

                        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::events.albums.removePhoto', ['wedding' => $wedding, 'albumStorageName' => $album_name]) }}',
                                    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