@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.official_verification');
@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
@push('pageId')
<script>
    window.pageId = "{{ $seoData['id'] ?? '' }}";
</script>
@endpush
@push('head_scripts')
{!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
{!! SchemaHelper::getImageObjectSchema('https://cryptohindinews.in/assets/images/logo/hindi-black-logo.webp',$mTitle) !!}
{!! SchemaHelper::getFaqSchema(json_encode($seoData['faq'])) !!}
{!! SchemaHelper::getBreadcrumbSchema([['name' => 'Home', 'url' => url('/')],['name' =>$seoData['breadcrumb'] , 'url' => $mUrl]]) !!}
@endpush
@push('styles')
<style type="text/css">
    .verify-card {
        background: white;
        border-radius: 20px;
        padding: 30px 20px;
        box-shadow: 0 10px 30px rgba(217, 28, 52, 0.08);
        transition: all 0.3s ease;
        border: 2px solid transparent;
        text-align: center;
        height: 100%;
    }

    .verify-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(217, 28, 52, 0.15);
        border-color: #ff2d47;
    }

    .verify-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
        box-shadow: 0 5px 20px rgba(217, 28, 52, 0.3);
    }

    .blueverify-icon {
        background: #4285f4;
    }

    .redverify-icon {
        background: #dc3545;
    }

    .skyverify-icon {
        background: #08c;
    }

    :root {
        --primary-red: #d91c34;
        --primary-red-dark: #b01528;
        --primary-red-light: #ff2d47;
        --text-dark: #2c3e50;
    }

    /* Team Card */
    .team-card {
        background: #fff;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(217, 28, 52, 0.1);
        transition: all 0.3s ease;
        border: 2px solid transparent;
        height: 100%;
    }

    .team-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(217, 28, 52, 0.2);
        border-color: var(--primary-red-light);
    }

    /* Profile Section */
    .profile-section {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 25px;
    }

    .profile-avatar {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, var(--primary-red), var(--primary-red-light));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 2rem;
        box-shadow: 0 5px 15px rgba(217, 28, 52, 0.3);
    }

    .profile-info h4 {
        margin: 0;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text-dark);
    }

    .profile-info p {
        margin: 5px 0 0;
        color: var(--primary-red);
        font-weight: 600;
        font-size: 0.9rem;
    }

    /* Contact Links */
    .contact-links {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .contact-btn {
        flex: 1;
        min-width: 120px;
        padding: 10px 15px;
        border: 2px solid #e0e0e0;
        background: #fff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--text-dark);
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }

    .contact-btn:hover {
        background: var(--primary-red);
        border-color: var(--primary-red);
        color: #fff;
        transform: scale(1.05);
    }

    .contact-btn i {
        font-size: 1rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .profile-section {
            flex-direction: column;
            text-align: center;
        }

        .contact-links {
            justify-content: center;
        }
    }

    .contact-box {
        box-shadow: 0 0 3px #999, 10px 10px rgba(0, 0, 0, .1);
    }

    .bg-lightpink {
        background: #fff0f2;
    }

    .contact-box:before {
        background: #d91c34;
        width: 100px;
        border-radius: 100%;
        left: -45px;
    }

    .contact-box:after,
    .contact-box:before {
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
    }

    .profile-icon {
        height: 65px;
        background: #fff;
        transform: translateY(-50%);
        top: 50%;
        left: 20px;
        border: 5px solid #eaf0ff;
    }

    .contacts {
        border-left: 2px solid #d91c34;
    }

    .contact-box:after {
        background: #fff;
        width: 91%;
        border-radius: 150px 0 0 150px;
        left: auto;
        right: 0;
        z-index: -1;
    }
</style>
@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'] ?: 'Official Verification' }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-lightgray p-3">
        <div class="container">
            <div class="row g-4 mb-5">
                <div class="col-12">
                    <div class="text-center">
                        <span class="h4 fw-bold  mb-3 position-relative centerborder d-inline-block">
                            Crypto Hindi
                        </span>
                    </div>
                </div>
                @if(isset($officialverify) && !empty($officialverify))
                @foreach($officialverify as $key => $offVerification)
                <div class="col-xl-6 mt-4">
                    <div
                        class="mainboxview contact-box py-4 rounded-4 overflow-hidden position-relative z-1 d-block d-sm-flex align-items-center">
                        <div class="profile-icon textpink fs-1 d-flex justify-content-center align-items-center rounded-4 position-absolute px-3"
                            width="90" height="90">
                            <i class="fa fa-user-tie"></i>
                        </div>
                        <div class="text-uppercase detail me-3 ps-0 ps-sm-5 ms-sm-5 ms-0 text-center text-sm-start">
                            <span class="fs-heading fw-semibold ps-2">{{$offVerification['title']}}</span>
                            <span class="small d-block ps-2">({{$offVerification['type']}})</span>
                        </div>
                        <ul class="contacts list-unstyled d-inline-block ps-3 mb-0 mail-tele">
                            {{-- Primary Email --}}
                            <li>
                                <p class="mb-2 h5 text-nowrap">
                                    <a href="mailto:{{ $offVerification['email'] }}" target="_blank"
                                        rel="noopener noreferrer nofollow" data-copy="{{ $offVerification['email'] }}"
                                        class="text-decoration-none bluetext fs-14">
                                        <i class="fa-regular fa-envelope me-2"></i> {{ $offVerification['email'] }}
                                    </a>
                                    <button type="button" class="bg-transparent border-0 fs-14"
                                        onclick="copyToClipboard(this)">
                                        <i class="fa-regular fa-copy ps-2"></i>
                                    </button>
                                </p>
                            </li>

                            {{-- Secondary Email --}}
                            @if(!empty($offVerification['email_2']))
                            <li>
                                <p class="mb-2 h5 text-nowrap">
                                    <a href="mailto:{{ $offVerification['email_2'] }}" target="_blank"
                                        rel="noopener noreferrer nofollow" data-copy="{{ $offVerification['email_2'] }}"
                                        class="text-decoration-none bluetext fs-14">
                                        <i class="fa-regular fa-envelope me-2"></i> {{ $offVerification['email_2'] }}
                                    </a>
                                    <button type="button" class="bg-transparent border-0 fs-14"
                                        onclick="copyToClipboard(this)">
                                        <i class="fa-regular fa-copy ps-2"></i>
                                    </button>
                                </p>
                            </li>
                            @endif

                            {{-- Primary Telegram --}}
                            <li>
                                <p class="mb-2 h5 text-nowrap">
                                    <a href="https://t.me/{{ $offVerification['telegram'] }}" target="_blank"
                                        rel="noopener noreferrer nofollow"
                                        data-copy="{{ $offVerification['telegram'] }}"
                                        class="text-decoration-none bluetext fs-14">
                                        <i class="fa-regular fa-paper-plane me-2"></i>
                                        {{ $offVerification['telegram'] }}
                                    </a>
                                    <button type="button" class="bg-transparent border-0 fs-14"
                                        onclick="copyToClipboard(this)">
                                        <i class="fa-regular fa-copy ps-2"></i>
                                    </button>
                                </p>
                            </li>

                            {{-- Telegram 2 --}}
                            @if(!empty($offVerification['telegram_2']))
                            <li>
                                <p class="mb-2 h5 text-nowrap">
                                    <a href="https://t.me/{{ $offVerification['telegram_2'] }}" target="_blank"
                                        rel="noopener noreferrer nofollow"
                                        data-copy="{{ $offVerification['telegram_2'] }}"
                                        class="text-decoration-none bluetext fs-14">
                                        <i class="fa-regular fa-paper-plane me-2"></i>
                                        {{ $offVerification['telegram_2'] }}
                                    </a>
                                    <button type="button" class="bg-transparent border-0 fs-14"
                                        onclick="copyToClipboard(this)">
                                        <i class="fa-regular fa-copy ps-2"></i>
                                    </button>
                                </p>
                            </li>
                            @endif

                            {{-- Telegram 3 --}}
                            @if(!empty($offVerification['telegram_3']))
                            <li>
                                <p class="mb-2 h5 text-nowrap">
                                    <a href="https://t.me/{{ $offVerification['telegram_3'] }}" target="_blank"
                                        rel="noopener noreferrer nofollow"
                                        data-copy="{{ $offVerification['telegram_3'] }}"
                                        class="text-decoration-none bluetext fs-14">
                                        <i class="fa-regular fa-paper-plane me-2"></i>
                                        {{ $offVerification['telegram_3'] }}
                                    </a>
                                    <button type="button" class="bg-transparent border-0 fs-14"
                                        onclick="copyToClipboard(this)">
                                        <i class="fa-regular fa-copy ps-2"></i>
                                    </button>
                                </p>
                            </li>
                            @endif
                        </ul>
                    </div>
                </div>
                @endforeach
                @endif
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="text-center">
                        <span class="h4 fw-bold  mb-3 position-relative centerborder d-inline-block">
                            Verify With Below
                        </span>
                    </div>
                </div>
                <div class="col-lg-4" wire:ignore.self>
                    <div class="rounded-4 mb-2 p-2">
                        <div class="verify-card">
                            <div class="verify-icon blueverify-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <span class="fw-bold h5">Verify Email</span>
                            <input type="text" class="form-control my-2" wire:model.defer='verifyemail' placeholder="Please Enter">
                            <button class="btn btn-primary" wire:click="verifyEmail" wire:target="verifyEmail" wire:loading.attr="disabled">
                                <span wire:loading.remove wire:target="verifyEmail">Verify</span>
                                <span wire:loading wire:target="verifyEmail">Checking...</span>
                            </button>
                            @if(!is_null($emailStatus))
                            <p class="mt-3 fw-semibold {{ $emailStatus ? 'text-success' : 'text-danger' }}">
                                {{ $emailStatus ? '✅ Email Verified' : '❌ Email Not Found' }}
                            </p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-4" wire:ignore.self>
                    <div class="rounded-4 mb-2 p-2">
                        <div class="verify-card">
                            <div class="verify-icon redverify-icon">
                                <i class="fas fa-wallet"></i>
                            </div>
                            <span class="fw-bold h5">Verify wallet to pay</span>
                            <input type="text" class="form-control my-2" wire:model.defer='walletAddress' placeholder="Please Enter">
                            <button class="btn btn-primary" wire:click="verifyWallet" wire:target="verifyWallet"
                                wire:loading.attr="disabled" class="btn btnborder ">
                                <span wire:loading.remove wire:target="verifyWallet">Verify</span>
                                <span wire:loading wire:target="verifyWallet">Checking...</span>
                            </button>
                            @if(!is_null($walletStatus))
                            <p class="mt-3 fw-semibold {{ $walletStatus ? 'text-success' : 'text-danger' }}">
                                {{ $walletStatus ? '✅ Wallet Verified' : '❌ Wallet Not Found' }}
                            </p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-4" wire:ignore.self>
                    <div class="rounded-4 mb-2 p-2">
                        <div class="verify-card">
                            <div class="verify-icon skyverify-icon">
                                <i class="fab fa-telegram-plane"></i>
                            </div>
                            <span class="fw-bold h5">Verify Telegram</span>
                            <input type="text" wire:model.defer='verifyTelegram' class="form-control my-2"
                                placeholder="Please Enter">
                            <button wire:click="verifyTelegrams" wire:loading.attr="disabled"
                                wire:target="verifyTelegram" class="btn btn-primary">
                                <span wire:loading.remove wire:target="verifyTelegrams">Verify</span>
                                <span wire:loading wire:target="verifyTelegrams">Checking...</span>
                            </button>
                            @if(!is_null($telegramStatus))
                            <p class="mt-3 fw-semibold {{ $telegramStatus ? 'text-success' : 'text-danger' }}">
                                {{ $telegramStatus ? '✅ Telegram Verified' : '❌ Telegram Not Found' }}
                            </p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12 contentinner content-view">
                {!! $seoData['description'] !!}
            </div>
        </div>
    </section>

    {{-- <section class="bg-lightgray p-3 d-none">
        <div class="container">
            {!! $seoData['top_page_content'] !!}
            <div class="row mb-3 shadow-sm rounded-3 bg-white p-2 m-0">
                <div class="col-xl-7 col-12 mx-auto">
                    <span class="h5 fw-bold text-washedblack position-relative d-block text-center pb-2">कंपनी का वॉलेट
                        एड्रेस वेरीफाई करें :</span>
                    <div class="d-flex align-items-center">
                        <input type="text" class="prf-int rounded-3" wire:model.defer='walletAddress'
                            placeholder="BTC / BSC 20 / ERC 20 / Tron / Polygon" name="wallet_address"
                            id="wallet_addresses">
                        <i class="fa-solid fa-circle-check text-success h3 mb-0 ms-3" style="display: none;"
                            id="verify_ico_write"></i>
                        <i class="fa-solid fa-circle-xmark text-danger h3 mb-0 ms-3" style="display: none;"
                            id="verify_ico_cross"></i>
                        <button type="button" class="btn btn-primary ms-4 py-1 rounded-3 text-pre" id="Verify_address"
                            wire:click="verifyWallet" title="सत्यापित करना">सत्यापित करना</button>
                    </div> @if(!is_null($walletStatus))
                        <p class="mt-3 fw-semibold {{ $walletStatus ? 'text-success' : 'text-danger' }}">
    {{ $walletStatus ? ' ✅ कंपनी का वॉलेट एड्रेस सही है' : '❌ कंपनी का वॉलेट एड्रेस गलत है' }}
    </p>
    @endif
</div>
<div class="col-xl-12 text-center border-bottom pb-2 mt-4">
</div>
<div class="col-12 col-lg-4 col-xl-3 py-2">
    <div class="text-center mb-2">
        <span class="h5 fw-bold text-washedblack position-relative d-inline-block">सह-संस्थापक</span>
    </div>
    @foreach($officialverify['Co-founders'] as $cofounder)
    <div class="card border-danger rounded-4 mb-4 overflow-hidden mainboxview">
        <!-- NAME -->
        <div class="card-header fw-semibold text-center bg-transparent border-0">
            {{ $cofounder['title'] }}
        </div>
        <div class="card-body text-center pt-0 pb-0">
            <!--  EMAIL 1  -->
            @if(!empty($cofounder['email']))
            <p class="mb-1 text-nowrap">
                <a href="mailto:{{ $cofounder['email'] }}" id="email-{{ $cofounder['id'] }}"
                    target="_blank" rel="noreferrer noopener" title="email"
                    class="text-decoration-none text-washedblack">
                    <i class="fa-solid fa-envelope gmail-clr me-2"></i>
                    {{ $cofounder['email'] }}
                </a>
                <button type="button" class="bg-transparent border-0"
                    onclick="copyToClipboard('#email-{{ $cofounder['id'] }}', this)">
                    <i class="fa-regular fa-copy"></i>
                </button>
            </p>
            @endif
            <!-- TELEGRAM 1  -->
            @if(!empty($cofounder['telegram']))
            <p class="mb-1 text-nowrap">
                <a href="https://t.me/{{ $cofounder['telegram'] }}" id="tg-{{ $cofounder['id'] }}"
                    class="text-decoration-none text-washedblack" target="_blank"
                    rel="noreferrer noopener" title="Telegram">
                    <i class="fa-regular fa-paper-plane me-2 tele-clr"></i>
                    {{ $cofounder['telegram'] }}
                </a>
                <button type="button" class="bg-transparent border-0"
                    onclick="copyToClipboard('#tg-{{ $cofounder['id'] }}', this)">
                    <i class="fa-regular fa-copy"></i>
                </button>
            </p>
            @endif
            <!-- TELEGRAM 2  -->
            @if(!empty($cofounder['telegram_2']))
            <p class="mb-1 text-nowrap">
                <a href="https://t.me/{{ $cofounder['telegram_2'] }}" id="tg2-{{ $cofounder['id'] }}"
                    class="text-decoration-none text-washedblack" target="_blank"
                    rel="noreferrer noopener" title="Telegram2">
                    <i class="fa-regular fa-paper-plane me-2 tele-clr"></i>
                    {{ $cofounder['telegram_2'] }}
                </a>
                <button type="button" class="bg-transparent border-0"
                    onclick="copyToClipboard('#tg2-{{ $cofounder['id'] }}', this)">
                    <i class="fa-regular fa-copy"></i>
                </button>
            </p>
            @endif
        </div>
    </div>
    @endforeach
</div>
<div class="col-12 col-lg-8 col-xl-9 py-2">
    <div class="text-center mb-2">
        <h2 class="h5 fw-bold text-washedblack position-relative d-inline-block">ऑफिसियल कम्युनिकेशन
            आईडी
        </h2>
    </div>
    <div class="card gradient-bdr-clr rounded-4 overflow-hidden mb-0">
        <table
            class="table table-bordered table-responsive d-block d-xxl-table bg-light text-nowrap mb-0 tablelayout">
            <thead>
                <tr>
                    <th class="text-center"> उद्देश्य</th>
                    <th class="text-center"> ईमेल आईडी</th>
                    <th class="text-center"> टेलीग्राम आईडी</th>
                </tr>
            </thead>
            <tbody>
                @php
                $allowedTypes = ['Airdrop Marketing', 'ICO Marketing', 'Launchpad', 'Event Partnerships', 'Marketing & Partnerships', 'Banner Advertisement',];
                @endphp
                @foreach ($officialverify as $sectionName => $items)
                @if(in_array($sectionName, $allowedTypes))
                <tr class="align-middle">
                    <!-- Section Name  -->
                    <td class="fw-semibold">
                        <span class="w-380 two-line-text ps-2">{{ $items[0]['title'] }}</span>
                    </td>
                    <td>
                        @foreach ($items as $item)
                        <div>
                            <a href="mailto:{{ $item['email'] }}" id="email-{{ $item['id'] }}"
                                class="text-decoration-none text-washedblack small" target="_blank"
                                rel="noreferrer noopener" title="Email:{{ $item['email'] }}">
                                <i class="fa-solid fa-envelope gmail-clr me-1"></i>
                                {{ $item['email'] }}
                            </a>
                            <button type="button" class="bg-transparent border-0"
                                onclick="copyToClipboard('#email-{{ $item['id'] }}', this)">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>
                        @endforeach
                    </td>
                    <!-- TELEGRAM COLUMN -->
                    <td>
                        @foreach ($items as $item)
                        <div>
                            <a href="https://t.me/{{ $item['telegram'] }}" id="tg-{{ $item['id'] }}"
                                class="text-decoration-none text-washedblack small" target="_blank"
                                rel="noreferrer noopener" title="Telegram:{{ $item['telegram'] }}">
                                <i class="fa-regular fa-paper-plane me-1 tele-clr"></i>
                                {{ $item['telegram'] }}
                            </a>
                            <button type="button" class="bg-transparent border-0"
                                onclick="copyToClipboard('#tg-{{ $item['id'] }}', this)">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>
                        @if ($item['telegram_2'])
                        <div>
                            <a href="https://t.me/{{ $item['telegram_2'] }}" id="tg-{{ $item['id'] }}"
                                class="text-decoration-none text-washedblack small" target="_blank"
                                rel="noreferrer noopener" title="Telegram2:{{ $item['telegram_2'] }}">
                                <i class="fa-regular fa-paper-plane me-1 tele-clr"></i>
                                {{ $item['telegram_2'] }}
                            </a>
                            <button type="button" class="bg-transparent border-0"
                                onclick="copyToClipboard('#tg-{{ $item['id'] }}', this)">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>
                        @endif
                        @endforeach
                    </td>
                </tr>
                @endif
                @endforeach
            </tbody>
        </table>
    </div>
</div>
</div>
<div class="col-xl-12 contentinner content-view">
    {!! $seoData['description'] !!}
</div>
</div>
</section>--}}

</div>

@push('scripts')
<script>
    function copyToClipboard(button) {
        const parentP = button.closest('p');
        if (!parentP) return;

        const target = parentP.querySelector('[data-copy]');
        if (!target) return;

        const text = target.getAttribute('data-copy');
        if (!text) return;

        // Fallback-safe copy logic
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text)
                .then(() => showCheck(button))
                .catch(err => {
                    console.warn('Clipboard API failed, using fallback', err);
                    fallbackCopy(text, button);
                });
        } else {
            fallbackCopy(text, button);
        }
    }

    // Fallback using a hidden textarea
    function fallbackCopy(text, button) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        try {
            document.execCommand('copy');
            showCheck(button);
        } catch (err) {
            console.error('Fallback copy failed', err);
        }
        document.body.removeChild(textarea);
    }

    // Feedback ✔️ icon
    function showCheck(button) {
        const originalHTML = button.innerHTML;
        button.innerHTML = '✔️';
        setTimeout(() => button.innerHTML = originalHTML, 1000);
    }
</script>
@endpush