@push('metadata')
@php
$page_id = 36;
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords = $seoData['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.contact_us');
@endphp

<title>{{ @$mTitle }}</title>
<meta name="keywords" content="{{ @$mKWords }}" />
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="{{ app()->getLocale() }}" />
<meta property=og:type content="{{config('constants.organisation_type_news')}}" />
<meta property="og:site_name" content="Crypto Hindi News" />
<meta property="og:title" content="{{ @$mTitle }}" />
<meta property="og:description" content="{{ @$mDescr }}" />
<meta property="og:url" content="{{ @$mUrl }}" />
<meta property="og:image" content="{{ @$mImage }}" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{ @$mTitle }}" />
<meta name="twitter:description" content="{{ @$mDescr }}" />
<meta name="twitter:url" content="{{ @$mUrl }}" />
<meta name="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush
@push('head_scripts')
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::getBreadcrumbSchema([
['name' => 'Home', 'url' => url('/')],
['name' =>$seoData['breadcrumb'], 'url' => URL::to('crypto-news')],
]) !!}
{!! SchemaHelper::getImageObjectSchema(CommonHelper::s3ImageOrDefault($mImage), $mTitle, 1200, 630) !!}
@if(!empty($seoData['faq']))
{!! SchemaHelper::getFaqSchema($seoData['faq']) !!}
@endif
@endpush
<div>
    <section class="web-color py-2 breadcrumb">
        <div class="container">
            <div class="row">
                <div class="d-flex gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
                    <ul class="d-flex p-0 m-0 list-unstyled">
                        <li class="position-relative"><a href="{{ URL::to('/') }}" title="Home"
                                class="text-white text-decoration-none">Home</a></li>
                        <li class="position-relative">
                            {{$seoData['breadcrumb'] ?: 'Contact US' }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container my-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="gradientbg p-4 rounded-3">
                        <div class="ico_mainheading headingfont text-center">
                            {!! $seoData['top_page_content'] !!}
                        </div>
                        <div class="d-flex justify-content-center gap-2 flex-wrap mt-3">
                            <a href="{{ URL::to('/crypto-presale') }}" class="btn btn-primary fs-14"
                                title="View Other Projects">View Other Projects</a>
                            <a href="{{ URL::to('submit-presale') }}" class="btn btn-primary fs-14"
                                title="List Your Project">List Your Project</a>
                            <a href="{{ URL::to('/advertise-with-us-crypto-presale-ico-ido-ieo-campaign-marketing') }}"
                                class="btn btn-primary fs-14" title="View Other Projects">Advertise With Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-3">
        <div class="container">
            <div class="row">
                <div class="col-xl-9">
                    <div class="borderlightred formtopview forminputview">
                        <!--[if BLOCK]><![endif]-->
                        <!--[if ENDBLOCK]><![endif]-->
                        <div class="topviewimage">
                            <img fetchpriority="high" decoding="async" src="{{ URL::asset('assets/images/formtop.webp') }}" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"
                                class="imgform img-fluid w-100" width="1294" height="109" alt="formlayout">
                        </div>
                        <div wire:key="form-container-{{ $formKey }}" class="bg-white px-4 rounded-3">
                            @if (session()->has('success'))
                            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 10000)" x-show="show"
                                x-transition
                                class="fixed top-5 alert alert-success text-center z-50 bg-green-500 text-success px-4 py-3 rounded-lg shadow-lg">
                                {{ session('success') }}
                            </div>
                            @endif

                            @if (session()->has('error'))
                            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 10000)" x-show="show"
                                x-transition
                                class="fixed alert alert-danger text-center top-5 z-50 bg-red-500 text-danger px-4 py-3 rounded-lg shadow-lg">
                                {{ session('error') }}
                            </div>
                            @endif
                            <form wire:submit="submitContact">
                                <div class="row">
                                    <div class="col-xl-4 col-md-6 mb-3">
                                        <label class="mb-2">Full Name <span class="text-danger">*</span></label>
                                        <input type="type" class="form-control" wire:model.defer="form.name"
                                            placeholder="Full Name">
                                        @error('form.name') <span class="text-danger fs-12">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-xl-4 col-md-6 mb-3">
                                        <label class="mb-2">Email <span class="text-danger">*</span></label>
                                        <input type="type" class="form-control" wire:model.defer="form.email" placeholder="Email Address">
                                        @error('form.email') <span class="text-danger fs-12">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-xl-4 mb-3">
                                        <label class="mb-2">Telegram / URL <span class="text-danger">*</span></label>
                                        <input type="type" class="form-control" wire:model.defer="form.telegram_id" placeholder="Telegram / URL">
                                        @error('form.telegram_id') <span class="text-danger fs-12">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-xl-12 mb-3">
                                        <label>File Upload </label>
                                        <input type="file" id="imageUpload"
                                            accept=".jpg, .jpeg, .png, .pdf, .doc, .docx" wire:model.defer="form.file"
                                            class="d-none">
                                        <label for="imageUpload" class="w-100">
                                            <div class="border rounded py-4 px-2 text-center bg-light cursor-pointer">
                                                <div class="fs-2 text-secondary">
                                                    📁
                                                </div>
                                                <p class="text-muted m-0 fs-15">Click or drag a file to this area to upload.
                                                </p>
                                            </div>
                                        </label>
                                        <div wire:loading wire:target="file" class="text-info mt-2">
                                            <i class="fa fa-spinner fa-spin"></i> Uploading image...
                                        </div>

                                        @if($form['file'] && !$errors->has('form.file'))
                                        <div class="mt-2">
                                            <p class="text-success"><i class="fa fa-check-circle"></i>
                                                <strong>Selected:</strong> {{ $form['file']->getClientOriginalName() }}
                                            </p>
                                            <img src="{{ $form['file']->temporaryUrl() }}" loading="lazy" class="img-thumbnail mt-1"
                                                style="max-width:200px;">
                                        </div>
                                        @endif
                                        @error('form.file') <span class="text-danger fs-12">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-xl-12 mb-3">
                                        <label>Comment or Message</label>
                                        <textarea class="form-control" rows="3" wire:model.defer="form.message" placeholder="Enter Message"></textarea>
                                        @error('form.message') <span class="text-danger fs-12">{{ $message }}</span>
                                        @enderror
                                        <button class="btn btn-primary mt-3" type="submit">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="btmviewimage">
                            <img fetchpriority="high" decoding="async" src="{{ URL::asset('assets/images/formtop.webp') }}" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"
                                class="imgform img-fluid w-100" width="1294" height="109" alt="formlayout">
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 mt-3 mt-xl-0 text-center">
                    <div class="position-sticky top-10">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="gradientbg p-3 text-center">
                                <span class="fw-bold text-black my-2 d-block h6 text-center">Contact Us Today!</span>
                                <p class="lh-base fs-14">We're ready to help your project shine. Just send us a message!</p>
                                <ul class="list-unstyled text-start d-flex justify-content-center gap-1 gap-sm-4 gap-xl-1 flex-wrap mx-auto px-3">
                                    <li class="mb-2 d-flex align-items-center justify-content-center">
                                        <a href="mailto:presale@cryptodisplay.io" class="text-black fs-14 "
                                            rel="noreferrer nofollow noopener">
                                            <i class="fa-solid fa-envelope fs-5"></i> presale@cryptodisplay.io
                                        </a>
                                    </li>
                                    <li class="mb-2 d-flex align-items-center justify-content-center">
                                        <a href="https://t.me/Display_MrktManager" target="_blank" rel="noreferrer nofollow noopener"
                                            class="text-black fs-14 ">
                                            <i class="fa-brands fa-telegram tele-clr fs-5"></i> @Display_MrktManager
                                        </a>
                                    </li>
                                </ul>
                                <p class="lh-base fs-14">Don’t wait. Get your crypto project in front of thousands of investors
                                    today with <a href="{{ URL::to('/') }}" class="darkredcolor fw-bold">Cryptodisplay.io!</a></p>
                            </div>
                        </div>
                        <div class="col-xl-12">
                            <div class="gradientbg p-3 text-center mt-4">
                                <span class="fw-bold text-black my-2 d-block h6 text-center">Follow Us On</span>
                                <ul class="list-unstyled text-start d-flex justify-content-center gap-1 gap-md-4 gap-xl-1 flex-wrap mx-auto px-3 mb-0">
                                    <li class="mb-2 d-flex align-items-center justify-content-center">
                                        <a href="https://t.me/CryptoDisplayio" target="_blank" rel="noreferrer nofollow noopener"
                                            class="text-black fs-14 ">
                                            <i class="fa-brands fa-telegram tele-clr fs-14 me-1"></i>https://t.me/CryptoDisplayio
                                        </a>
                                    </li>
                                    <li class="mb-2 d-flex align-items-center justify-content-center">
                                        <a href="https://x.com/CryptoDisplayio" target="_blank" rel="noreferrer nofollow noopener"
                                            class="text-black fs-14 ">
                                            <i class="fa-brands fa-twitter tele-clr fs-14 me-1"></i>https://x.com/CryptoDisplayio
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <a href="{{ URL::to('/advertise-with-us-crypto-presale-ico-ido-ieo-campaign-marketing') }}" title="Advertise With Us"
                        class="btn btn-gradient fs-14 rounded-2 fw-bold ls-2 w-fit my-3 py-2 px-3 text-uppercase">Advertise With Us</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="contentview contentconditon">
                        {!! $seoData['description'] ?? '' !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <livewire:faq-section pageType="contact-us-list-submit-campaign-market-crypto-presale-ico-ido-ieo" />
    @push('scripts')
    <script>
        const dropArea = document.getElementById('dropArea');
        const fileInput = document.getElementById('fileInput');

        dropArea.addEventListener('click', () => fileInput.click());

        dropArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropArea.classList.add('dragover');
        });

        dropArea.addEventListener('dragleave', () => {
            dropArea.classList.remove('dragover');
        });

        dropArea.addEventListener('drop', (e) => {
            e.preventDefault();
            dropArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length) {
                fileInput.files = files;
                alert(`${files[0].name} selected`);
            }
        });
    </script>

    <script>
        document.getElementById('uploadImage').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('profilePreview').innerHTML = `<img alt="क्रिप्टो-वेब3-ब्लॉकचेन-लेखक-पंजीकरण" src="${e.target.result}" class="preview-img">`;
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
    @endpush
</div>