@push('custom-css')
<link href="{{ asset('assets/themes/cp/default/assets/css/cpmodule/style-upload-preview.css') }}" rel="stylesheet" />
@endpush
@push('custom-js')
<script>
    function updateUpdatePreviewWeddingPhoto(file) {
        document.querySelectorAll('.upload-preview-container .w-photo').forEach((img) => {
            img.src = URL.createObjectURL(file);
            img.parentElement.classList.remove('d-none');
        })
    }

    function updateUpdatePreviewLogo(file) {
        document.querySelectorAll('.upload-preview-container .cplogo img').forEach((img) => {
            img.src = URL.createObjectURL(file);
        })
    }

    function upldateGuestMessage(message) {
        document.querySelectorAll('.upload-preview-container .messsage').forEach((element) => {
            element.innerHTML = message.replace(/\n/g, '<br>');
        })
    }

    function updateEventName(name) {
        document.querySelectorAll('.upload-preview-container .event-name').forEach((element) => {
            element.innerHTML = name;
        })
    }
</script>
@endpush
<div class="container row mx-auto upload-preview-container">
    <div class="col-12">
        <div class="monitor-bg">
            <div class="ar-16x9">
                <div class="row tp-guest-upload">
                    <div class="col-12 tp-logo">
                        <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>
                    </div>
                    <div class="col-12 tp-form-container">
                        <div class="upload-container tp-form shadow-none">
                            <div class="one">
                                <div class="row wedding-photo-container">
                                    <div class="col-12">
                                        <div class="tp-guest-intro position-relative">
                                            <div class="asset-img @if (!$wedding->wedding_photo)d-none @endif">
                                                <img src="{{ $wedding->wedding_photo }}" class="w-photo img-responsive" />
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <div class="tp-guest-info">
                                            <h4 class="center"><span class="font-weight-bolder event-name">{{ $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>
                                </div>

                                <div class="row">
                                    <div class="col-12 center buttons-container">
                                        <div class="btn btn-success btn-upload"><i class="fa fa-upload"></i> Upload Your Photos</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>