@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'] ?: 'Official Verification' }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="bg-lightgray p-3">
        <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>

    @push('scripts')
    <script>
        window.copyToClipboard = async function(selector, btn) {
            const el = document.querySelector(selector);
            if (!el) return;

            let text = el.innerText.trim() || el.textContent.trim();
            text = text.replace(/^mailto:/, "");

            try {
                await navigator.clipboard.writeText(text);
            } catch {
                const ta = document.createElement("textarea");
                ta.value = text;
                document.body.appendChild(ta);
                ta.select();
                document.execCommand("copy");
                ta.remove();
            }

            // Change icon
            changeCopyIcon(btn);
        };

        function changeCopyIcon(btn) {
            const icon = btn.querySelector("i");
            if (!icon) return;

            const original = icon.className; // store original icon
            icon.className = "fa-solid fa-check text-success"; // check icon

            setTimeout(() => {
                icon.className = original; // reset after 1 sec
            }, 1000);
        }
    </script>
    @endpush


</div>