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

@section('title', 'Guest Portal')

@section('content')
@php
use App\Services\QrCodeService;
@endphp
    <div class="container">
        <div class="col-lg-12 p-0 tp-couple-assets">
            <div class="card">
                <h5 class=" card-header-second"><i class="fa fa-info-circle"></i> Here you will find all the details of your guests portal, QR code to share with your guests and slideshow address for use on your wedding day</h5>
            </div>
        </div>
    </div>

    <div class="container row mx-auto ">
        <div class="col-md-12" >
            <!-- begin page-header -->
            <!-- end page-header -->
            <div class="row tp-couple-assets">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 correct-col">
                    <div class="row">
                        <div class="card">
                            <h5 class="card-header"><i class="fa fa-user-plus"></i> Your Links for Guest Uploads</h5>
                            <div class="card-body">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-6 text-center bg-grey box-shadow-inset position-relative">
                                            @if ($wedding->wedding_photo)
                                                <img src="{{ $wedding->wedding_photo }}" class="img-responsive img-assets-page"  /><br/>
                                            @endif
                                        </div>
                                        <div class="col-md-1"></div>
                                        <div class="col-md-5">

                                            <div class=" tp-form">
                                                <div class="tp-qr">
                                                    <div class="tp-qrcode" title="Slideshow Link">
                                                        {!! QrCodeService::getQrCodeSvg(route('takenplace::upload', $wedding->uploads_id)) !!}
                                                    </div>
                                                </div>
                                                <p class="card-text text-primary text-center">
                                                    You can now scan or copy your guest <b>photo upload</b>
                                                    {{--                                                        You can now scan or copy guest <b>photo upload</b> link and share it with your guests.--}}
                                                </p>
                                                <div class="col-md-8 m-auto">
                                                    <a href="javascript:void(0);" class="btn btn-uploads btn-sm btn-purple w-100 text-center btn-tp-main">
                                                        <span class="default">
                                                            <i class="fa fa-link"></i> Share Uploads Link
                                                        </span>

                                                        <div class="copied">
                                                            <div class="spinner-grow" role="status"></div>
                                                            Copied
                                                        </div>
                                                    </a>
                                                    <a href="{{route('takenplace::events.live.printEvent', $wedding)}}" class="btn btn-sm btn-purple w-100 text-center" target="_blank"><i class="fa fa-file-pdf"></i> Download PDF</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 correct-col">
                    <div class="row">
                        <div class="card">
                            <h5 class="card-header"><i class="fa fa-video"></i> Your Links for the Slideshow</h5>
                            <div class="card-body">
                                <h5 class="card-title">{{--Your Assets--}}</h5>
                                <div class="col-md-12">
                                    @if ($randImageUrl = $wedding->getRandomImageFromCoupleUploadedAssets())
                                        <div class="asset-img">
                                            <img src="{{$randImageUrl}}" class="img-responsive"  /><br/>
                                        </div>
                                    @endif
                                </div>
                                <div class="col-md-4 m-auto">
                                    <div class="tp-form mt-4">
                                        <a href="javascript:void(0);" class="btn btn-sm btn-clipboard btn-purple w-100 mr-4 btn-tp-main">
                                            <span class="default"><i class="fa fa-link"></i> Share Slideshow Link</span>
                                            <div class="copied"><div class="spinner-grow" role="status"></div>Copied</div>
                                        </a>
                                        <a href="{{ route('takenplace::slideshow', $wedding->slideshow_id) }}" target="_blank" class="btn btn-sm btn-purple w-100 btn-tp-main"><i class="fa fa-desktop"></i> View Slideshow</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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) }}';
                    }
                });

                new ClipboardJS('.btn-uploads', {
                    text: function(trigger) {
                        return '{{ route('takenplace::upload', $wedding->uploads_id) }}';
                    }
                });

                $('.btn-clipboard').on('click', function(e){
                    e.preventDefault();
                    $(this).toggleClass('copied');

                    setTimeout( () => {
                        $(this).removeClass('copied');
                    }, 1000);

                });

                $('.btn-uploads').on('click', function(e){
                    e.preventDefault();
                    $(this).toggleClass('copied');

                    setTimeout( () => {
                        $(this).removeClass('copied');
                    }, 1000);
                })
            })
        </script>
    @endpush
@endsection