@push('metadata')
    @php
        $page_id = @$seoData['id'];
        $mTitle = @$seoData['seo_title'];
        $mDescr = @$seoData['meta_description'];
        $mKWords = @$seoData['meta_keywords'];
        $faqs = $seoData['faq'] ?? '[]';
        $mUrl = url()->current();
        $mImage = config('constants.feed');
    @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')}}" />
    <meta property="og:site_name" content="Crypto Display" />
    <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

<div>
    <section class="bg-breadcrumb 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-black">
                    <ul class="d-flex p-0 m-0 list-unstyled">
                        <li class="position-relative"><a href="{{ CommonHelper::makeUrl('/') }}"
                                title="Home - Crypto Display" class="text-white text-decoration-none">Home</a></li>
                        <li class="position-relative text-white">
                            {{ !empty(@$seoData->breadcrum) ? $seoData->breadcrum : 'Live Crypto News Feed Updates & Insights' }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-12 mt-2">
                    <div class="top-details">
                        {!! @$seoData['top_page_content'] !!}
                    </div>
                </div>

                <div class="col-xl-8 col-lg-7 col-md-6 py-lg-3">
                    <div class="accordion accordion-flush custom-accordion faq-acordion p-3 p-lg-4 blue-gradient rounded-4" id="rssfaq">
                        <div class="accordion-item container px-0">
                            <div class="accordion-header">
                                <button class="accordion-button fw-bold lh-base collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#flush-event-collapse1"
                                    aria-expanded="false" aria-controls="flush-event-collapse1">
                                    Main Feeds
                                </button>
                            </div>

                            <div id="flush-event-collapse1" class="accordion-collapse collapse"
                                data-bs-parent="#rssfaq">
                                <div class="accordion-body text-dark">
                                    <table class="table table-borderless table-responsive mb-0">
                                        <tbody>
                                            <tr>
                                                <th class="align-middle" scope="row">English News</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('english-news-rssfeed')}}"
                                                        title="English News Rss feed"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            class="img-fluid" alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none">English News Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th class="align-middle" scope="row">English Press release</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('press-release-rssfeed')}}"
                                                        title="English Press Release Rss feed"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            class="img-fluid" alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none">English Press Release Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th class="align-middle" scope="row">ICO / IDO / IEO / PRESALE</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('all-ico-ido-ieo-presale-rssfeed')}}"
                                                        title="Crypto ICO, IDO, IEO, Presale RSS Feed English : CrytptoDisplay"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            class="img-fluid" alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none">ICO / IDO / IEO / PRESALE Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item container px-0">
                            <div class="accordion-header">
                                <button class="accordion-button fw-bold lh-base collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#flush-event-collapse2"
                                    aria-expanded="false" aria-controls="flush-eventcollapse2">
                                    Crypto News
                                </button>
                            </div>

                            <div id="flush-event-collapse2" class="accordion-collapse collapse"
                                data-bs-parent="#rssfaq">
                                <div class="accordion-body text-dark">
                                    <table class="table table-borderless table-responsive mb-0">
                                        <tbody>
                                            <tr>
                                                <th class="align-middle" scope="row">English News</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('english-news-rssfeed')}}"
                                                        title="English Sponsored News Rss feed"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            class="img-fluid" alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none">English all News Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th class="align-middle" scope="row">English Press release</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('press-release-rssfeed')}}"
                                                        title="English Press Release Rss feed"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            class="img-fluid" alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none">English Press Release Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item container px-0">
                            <div class="accordion-header">
                                <button class="accordion-button fw-bold lh-base collapsed" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#flush-event-collapse6"
                                    aria-expanded="false" aria-controls="flush-event-collapse6">
                                    Crypto Presale, ICO, IDO, IEO
                                </button>
                            </div>

                            <div id="flush-event-collapse6" class="accordion-collapse collapse"
                                data-bs-parent="#rssfaq">
                                <div class="accordion-body text-dark">
                                    <table class="table table-borderless table-responsive mb-0">
                                        <tbody>
                                            <tr>
                                                <th class="align-middle" scope="row">All ICO / IDO / IEO / PRESALE Rss feed</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('all-ico-ido-ieo-presale-rssfeed')}}"
                                                        title="Crypto ICO, IDO, IEO, Presale RSS Feed English : CrytptoDisplay"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none">All ICO / IDO / IEO / PRESALE Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="align-middle" scope="row">ICO Rss feed</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('ico-rssfeed')}}"
                                                        title="Crypto ICO, IDO, IEO, Presale RSS Feed English : CrytptoDisplay"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none">ICO Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="align-middle" scope="row"> IDO Rss feed</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('ido-rssfeed')}}"
                                                        title="Crypto ICO, IDO, IEO, Presale RSS Feed English : CrytptoDisplay"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none"> IDO Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="align-middle" scope="row"> IEO Rss feed</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('ieo-rssfeed')}}"
                                                        title="Crypto ICO, IDO, IEO, Presale RSS Feed English : CrytptoDisplay"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}"
                                                            alt="Img" width="40" height="40" loading="lazy" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none"> IEO Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th class="align-middle" scope="row">Presale Rss feed</th>
                                                <td class="align-middle pe-3">
                                                    <a href="{{ CommonHelper::makeUrl('presale-rssfeed')}}"
                                                        title="Crypto ICO, IDO, IEO, Presale RSS Feed English : CrytptoDisplay"
                                                        class="d-flex align-items-center justify-content-end">
                                                        <img src="{{ URL::asset('assets/images/rss-feed.png') }}" loading="lazy"
                                                            alt="Img" width="40" height="40" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                                        <span class="d-none">Presale Rss feed</span>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-xl-4 col-md-6 py-lg-3 pb-3">
                    <div class="bg-light rounded-4 border shadow-sm overflow-hidden">
                        @if (session()->has('success'))
                            <div x-data="{ show: true }" x-init="setTimeout(() => show = false, 10000)" x-show="show"
                                x-transition
                                class="alert alert-success text-center bg-green-500 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="alert alert-danger text-center bg-red-500 px-4 py-3 rounded-lg shadow-lg">
                                {{ session('error') }}
                            </div>
                        @endif

                        <h2 class="h5 bg-dark fw-semibold text-white text-center d-block p-2 mb-3">Add for more
                            API's & Feed</h2>
                        <form wire:submit.prevent="submit">
                            <div class="row row-cols-lg-1 mx-0">
                                <div class="col-lg-6 mb-3">
                                    <label for="full-name" class="input-box-label">Full Name:<span
                                            class="text-danger">*</span></label>
                                    <input id="full-name" type="text" wire:model.defer="name"
                                        class="form-control input-box" placeholder="Full Name">
                                    @error('name') <div class="text-danger">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-lg-6 mb-3">
                                    <label for="email" class="input-box-label">Email:<span
                                            class="text-danger">*</span></label>
                                    <input id="email" type="email" wire:model.defer="email"
                                        class="form-control input-box" placeholder="Enter Email">
                                    @error('email') <div class="text-danger">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="message" class="input-box-label">Message:<span
                                            class="text-danger">*</span></label>
                                    <textarea id="message" wire:model.defer="message" class="form-control input-box"
                                        rows="3"></textarea>
                                    @error('message') <div class="text-danger">{{ $message }}</div> @enderror
                                </div>

                                <div class="col-12 mb-3">
                                    <label for="file-type" class="input-box-label">Select File Type:</label>
                                    <select id="file-type" wire:model="fileType" class="form-select input-box">
                                        <option value="">Select File Type</option>
                                        <option value="jpeg" data-accepted="image/jpeg,image/png">JPEG</option>
                                        <option value="pdf" data-accepted="application/pdf">PDF</option>
                                        <option value="word"
                                            data-accepted="application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,text/plain">
                                            Word</option>
                                    </select>
                                    @error('fileType') <div class="text-danger">{{ $message }}</div> @enderror
                                </div>
                                <div class="col-12 mb-3">
                                    <label for="fileInput"
                                        class="d-inline-block py-1 px-3 rounded-4 bluetext border border-primary"
                                        style="cursor: pointer;">
                                        Choose file
                                    </label>

                                    <input id="fileInput" type="file" wire:model="file" class="d-none">

                                    @error('file')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror

                                    @if($file)
                                        <div class="mt-1 text-success">{{ $file->getClientOriginalName() }}</div>
                                    @endif

                                    <div wire:loading wire:target="file" class="text-muted">Uploading...</div>
                                </div>


                                {{-- <x-recaptcha />
                                @error('recaptcha') <span class="text-danger">{{ $message }}</span> @enderror --}}

                                <div class="col-12 mb-3 text-center">
                                    <button type="submit" class="btn btn-primary" wire:loading.attr="disabled"
                                        wire:target="file">
                                        <span wire:loading.remove wire:target="file">Submit</span>
                                        <span wire:loading wire:target="file">Uploading...</span>
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
            <!-- description -->
            @if(!empty(@$seoData['description']))
                <section>
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="maincontentview contentview">
                                    {!! CommonHelper::addNoFollowToExternalLinks(@$seoData['description']) !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
            <!-- faq section -->
            @if(!empty($faqs))
                <livewire:faq-section pageType="feed" />
            @endif
        </div>
</div>
</section>
</div>

@push('scripts')

    <script>
        document.addEventListener('livewire:load', () => {
            const fileTypeSelect = document.getElementById('file-type');
            const fileInput = document.getElementById('fileInput');

            fileTypeSelect.addEventListener('change', () => {
                const selected = fileTypeSelect.options[fileTypeSelect.selectedIndex];
                const accepted = selected.getAttribute('data-accepted') || '';
                fileInput.setAttribute('accept', accepted);
            });

        });
    </script>
@endpush