@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.advertise');
@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 name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="{{ @$mTitle }}" />
<meta property="twitter:description" content="{{ @$mDescr }}" />
<meta property="twitter:url" content="{{ @$mUrl }}" />
<meta property="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush
<div>
    <section class="bg-darkpink p-2 breadcrumb mb-0">
        <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 align-items-center">
                        <li><a href="{{ URL::to('/') }}" class="text-decoration-none text-white" title="Home">होम</a></li>
                        <li>{{ $seoData['breadcrumb'] ?:'Contact Us' }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-lightgray py-3">
        <div class="container">
            <div class="row">
                <div class="col-xl-9 col-12">
                    <div class="col-xl-12 text-center mt-4">
                        <div class="topheading">
                            {!! @$seoData['top_page_content'] !!}
                        </div>
                    </div>
                    <span class="h4 fw-bold  mb-3 position-relative centerborder d-inline-block">जानकारी जमा करें</span>

                    <div wire:key="form-container-{{ $formKey }}" class="bg-white p-4 mt-3 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-6">
                                    <label for="name" class="fw-bold">पूरा नाम <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control borderinput rounded-pill fs-6 px-3" id="name"
                                        wire:model.defer="form.name" placeholder="पूरा नाम">
                                    @error('form.name') <span class="text-danger fs-12">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-xl-6">
                                    <label for="email" class="fw-bold">ईमेल <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control borderinput rounded-pill fs-6 px-3"
                                        id="email" wire:model.defer="form.email" placeholder="ईमेल">
                                    @error('form.email') <span class="text-danger fs-12">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="message" class="fw-bold">मैसेज <span
                                            class="text-danger">*</span></label>
                                    <textarea class="form-control borderinput rounded-4 fs-6 px-3 pt-2" id="message"
                                        wire:model.defer="form.message" placeholder="मैसेज" rows="5"></textarea>
                                    @error('form.message') <span class="text-danger fs-12">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="inquiry" class="fw-bold">विषय <span class="text-danger">*</span></label>
                                    <select id="inquiry" class="form-control borderinput rounded-pill fs-6 px-3"
                                        wire:model.defer="form.inquiry_type">
                                        <option value="इन्क्वायरी टाइप चुनें">इन्क्वायरी टाइप चुनें</option>
                                        <option value="स्पॉन्सर्ड">स्पॉन्सर्ड</option>
                                        <option value="प्रेस रिलीज़">प्रेस रिलीज़</option>
                                        <option value="बैनर एड्स">बैनर एड्स</option>
                                        <option value="ICO लिस्टिंग">ICO लिस्टिंग</option>
                                        <option value="एयरड्रॉप लिस्टिंग">एयरड्रॉप लिस्टिंग</option>
                                        <option value="न्यू कॉइन लॉन्चिंग">न्यू कॉइन लॉन्चिंग</option>
                                        <option value="एक्सचेंज / वॉलेट ऑफर्स">एक्सचेंज / वॉलेट ऑफर्स</option>
                                        <option value="General Advertisement">General Advertisement</option>
                                        <option value="होम पेज बैनर">होम पेज बैनर</option>
                                        <option value="Other">Other</option>
                                        <option value="होम पेज टेकओवर बैनर">होम पेज टेकओवर बैनर</option>
                                    </select>
                                    @error('form.inquiry_type') <span class="text-danger fs-12">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="fileInput" class="form-label fw-bold">फ़ाइल अटैच करें
                                        (jpg,pdf,word)</label>
                                    <div id="dropArea" class="upload-box borderinput rounded-4 text-center py-4">
                                        <div class="upload-icon">
                                            <i class="fa-solid fa-upload fs-3 text-secondary"></i>
                                        </div>
                                        <p class="mb-0 text-secondary mt-2">Click or drag a file to this area to upload.
                                        </p>
                                        <input type="file" id="fileInput" accept=".jpg, .jpeg, .png, .pdf, .doc, .docx"
                                            wire:model.defer="form.image" hidden>
                                        <div wire:loading wire:target="image" class="text-info mt-2">
                                            <i class="fa fa-spinner fa-spin"></i> Uploading image...
                                        </div>

                                        @if($form['image'] && !$errors->has('form.image'))
                                        <div class="mt-2">
                                            <p class="text-success"><i class="fa fa-check-circle"></i>
                                                <strong>Selected:</strong> {{ $form['image']->getClientOriginalName() }}
                                            </p>
                                            <img src="{{ $form['image']->temporaryUrl() }}" class="img-thumbnail mt-1"
                                                height="64" width="64">
                                        </div>
                                        @endif
                                        @error('form.image') <span class="text-danger fs-12">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 text-center mt-4">
                                    <button class="btn btn-primary" type="submit">सबमिट</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-xl-3 col-12">
                    <div class="bg-white p-4">
                        <span class="h4 fw-bold text-center d-block mb-3 position-relative  my-2">या संपर्क करें</span>
                        <ul class="list-unstyled ps-3 border-bottom pb-3">
                            <li><i class="fa-solid fa-envelope text-pink me-2 fs-5"></i><a
                                    href="mailto:admin@cryptohindinews.in" title="Email">admin@cryptohindinews.in</a>
                            </li>
                            <li><i class="fa-brands fa-telegram text-pink me-2 fs-5"></i><a
                                    href="https://t.me/cryptonewshi" title="Telegram" target="_blank"
                                    rel="noopener noreferrer nofollow">@cryptonewshi</a>
                            </li>

                        </ul>
                        <span
                            class="h5 text-washedblack fw-bold text-center d-block mb-3 position-relative  my-2 ls-2">FOLLOW
                            US ON</span>
                        <ul
                            class="list-unstyled d-flex align-items-center flex-wrap mt-3 justify-content-center contacticon">
                            <li>
                                <a href="https://x.com/crypto_hi_news" class="share-modal-icon bg-black text-white"
                                    title="Share on Twitter" target="_blank" rel="noopener noreferrer nofollow">
                                    <i class="fa-brands fa-x-twitter"></i>
                                    <span class="d-none">Twitter</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/company/crypto-hindi-news/"
                                    class="share-modal-icon bg-black text-white" title="Share on Linkdin"
                                    target="_blank" rel="noopener noreferrer nofollow">
                                    <i class="fa-brands fa-linkedin-in"></i>
                                    <span class="d-none">linkedin</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://news.google.com/publications/CAAqBwgKMMKt0QswgcnoAw?hl=hi&amp;gl=IN&amp;ceid=IN%3Ahi"
                                    title="Share on Google News" class="share-modal-icon bg-black" target="_blank"
                                    rel="noopener noreferrer nofollow">
                                    <img src="https://d1cpau3nfvz3rt.cloudfront.net/hindi_wordpress/2025/11/google-news.png"
                                        alt="क्रिप्टो हिंदी न्यूज़ अकाउंट गूगल न्यूज़ पर" width="20" height="20">
                                    <span class="d-none">Google news</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://m.dailyhunt.in/news/india/hindi/coin+gabbar+hindi-epaper-coingbhi"
                                    title="डेलीहंट पर क्रिप्टो हिंदी न्यूज़ अकाउंट" class="share-modal-icon bg-black"
                                    target="_blank" rel="noopener noreferrer nofollow">
                                    <img src="https://d3iuzwoiyg9qa8.cloudfront.net/cryptohindinews/img/dailyhunt-logo.webp"
                                        alt="Dailyhunt" width="18" height="18">
                                    <span class="d-none">डेलीहंट पर क्रिप्टो हिंदी न्यूज़ अकाउंट</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="content-view">
                    {!! $seoData['description'] !!}
                </div>
            </div>
        </div>
    </div>

    @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-ब्लॉकचेन-लेखक-पंजीकरण" width="64" height="64" src="${e.target.result}" class="preview-img">`;
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
    @endpush
</div>