@push('metadata')
@php
$pageId = $seoData['id'];
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$breadcrum = $seoData['breadcrumb'] ?: '';
$mUrl = url()->current();
  if ($type == 0) {
    $mImage = config('constants.crypto_ico');
} elseif ($type == 1) {
    $mImage = config('constants.crypto_ido');
} elseif ($type == 2) {
    $mImage = config('constants.crypto_ieo');
}elseif ($type == 3) {
    $mImage = config('constants.crypto_presale');
}else {
    $mImage = config('constants.crypto_presale_ico_ido_ieo_list');
}
@endphp
@push('pageId')
<script>
    window.pageId = "{{ $pageId ?? '' }}";
</script>
@endpush
<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 Presale" />
<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 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')}}" />

<link rel="alternate" type="application/rss+xml" title="Crypto Presale RSS Feed" href="{{ RssFeedHelper::getRssFeedUrl($slug) }}" />

@endpush

@push('head_scripts')
{!! SchemaHelper::collectionPageSchema($mTitle,$mTitle,$mDescr) !!}
{!! SchemaHelper::getBreadcrumbSchema([
['name' => 'Home', 'url' => url('/')],
['name' => $breadcrum, 'url' => $mUrl]
]) !!}
{!! SchemaHelper::getImageObjectSchema($mImage, $mTitle, 1200, 630) !!}
@if(!empty($faqs))
{!! SchemaHelper::getFaqSchema($faqs) !!}
@endif
{!! SchemaHelper::icoListArticleSchema($icoListing) !!}

@endpush

@push('styles')
<link rel="stylesheet" type="text/css" href="https://d18do2qpuw9ik7.cloudfront.net/public/assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="{{URL::asset('/assets/css/daterangepicker.css')}}">
@endpush

<div>
    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li><a href="{{ URL::to('/') }}" title="Home">Home</a> <i class="fas fa-chevron-right small text-dark mx-2"></i></li>
                <li>{{ $seoData['breadcrumb'] ?: 'Crypto List' }}</li>
            </ul>
        </div>
    </section>

    <section class="py-3">
        <div class="container">
            <div class="row">
                <div class="col-xxl-5 col-xl-5 col-lg-6 pt-2 position-relative headingfont">
                    {!!@$seoData['top_page_content']!!}
                </div>
                <div class="col-xxl-7 col-xl-7 col-lg-6  presaleimage text-center sliderview" id ="right-icoTopBanner">
                    <div class="tophalf">
                        @if (count($advertisement) >= 1)
                            <a href="{{ $advertisement[0]['redirect_url'] }}" title="{{ $advertisement[0]['title'] }}" target="blank" rel="noreffer nofollow noopener">
                                <img src="{{ $advertisement[0]['image'] }}" class="img-fluid w-100 h-auto rounded-3" alt="{{ $advertisement[0]['title']  }}" width="730" height="154">
                            </a>
                        @endif 
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <!-- Filter Tabs -->
            {{-- <x-ico-tab-card /> --}}
            <x-ico-filter-card :filters="$filters" />

            <!-- ICO Table -->
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead class="bluegradienttable text-center">
                        <tr>
                            <th>S.No</th>
                            <th>Name</th>
                            <th>Launchpad</th>
                            <th>Stage</th>
                            <th>Ends in </th>
                            <th>Upvotes</th>
                            <th>Tokens for Sale</th>
                            <th>Rate</th>
                            <th>Fundraising Goal</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($icoListing as $listing)
                        <tr class="text-center @if($type !=5 ) {{ $listing['featured_class'] }} @endif align-middle"
                        wire:key="ico-row-{{ $listing['id'] }}-page-{{ $icoPaginator->currentPage() }}"
                        >
                            <td>{{ $loop->iteration }}</td>
                            <x-ico-table-cart :id="$listing['id']" :name="$listing['name']"
                                :fullName="$listing['full_name']" :symbol="$listing['symbol']"
                                :image="$listing['src']" :price_usd="$listing['price_usd']"
                                :goal="$listing['goal']" :status="$listing['status']"
                                :startdate="$listing['start_date']" :enddate="$listing['end_date']"
                                :endsIn="CommonHelper::timeElapsedString($listing['ends_in'])"
                                :icoUrl="$listing['ico_url']" :buy_url="$listing['buy_url']"
                                :featured="$type === 5 ? null : $listing['featured']"
                                :featured_dark_class="$listing['featured_dark_class']"
                                :featured_class="$listing['featured_class']"
                                :imgAltTitle="$listing['img_alt_title']" :launchpad="$listing['launchpad']"
                                :projectType="$listing['ico_ido_type']" :likeCount="$listing['likeCount']"
                                :quantityOfCoin="$listing['quantity_of_coin']"
                                :icoPrice="$listing['ico_price']" :acceptType="$listing['accept_type']"
                                :featuredVal="$listing['featured_val']"
                                :fundAskingFor="$listing['fund_asking_for']"
                                :likescounts="$listing['likes_counts']"
                                :favorite="$listing['favorite']"
                                :type="'fuel'"
                                :likd="1" :liked="$listing['liked']" :likescounts="$listing['likes_counts']" mode="list" />
                        </tr>
                        @empty
                        <tr class="text-center">
                            <td class="text-center" colspan="12">
                                No Data Found
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="col-12 mt-4">
                {{ $icoPaginator->onEachSide(1)->links('vendor.pagination.bootstrap-5') }}
            </div>
        </div>
    </section>

    @if(!empty($seoData['description']))
    <section class="py-2">
        <div class="container">
            <div class="policy-content bg-white rounded shadow-sm contentview">
                <div class="details-page">
                    {!! $seoData['description'] !!}
                </div>
            </div>
        </div>
    </section>
    @endif

    @if(!empty($faqs))
    <livewire:faq-section pageType="{{ $seoParams }}" />
    @endif
</div>


@push('scripts')
<script src="https://d18do2qpuw9ik7.cloudfront.net/public/assets/js/jquery-3.6.0.min.js"></script>
<script src="https://d18do2qpuw9ik7.cloudfront.net/public/assets/js/moment.min.js"></script>
<script src="https://d18do2qpuw9ik7.cloudfront.net/public/assets/js/daterangepicker.min.js"></script>
<script type="text/javascript" src="https://d18do2qpuw9ik7.cloudfront.net/public/assets/js/owl.carousel.min.js"></script>

<script defer>
    function initDatePicker() {
        var el = document.getElementById('datefilter');
        if (!el) return;
        if (!window.jQuery) return;
        if ($(el).data('daterangepicker')) return;

        $(el).daterangepicker({
            autoUpdateInput: false,
            locale: { cancelLabel: 'Clear' }
        });

        $(el).on('apply.daterangepicker', function (ev, picker) {
            var val = picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD');
            el.value = val;
            el.dispatchEvent(new Event('input'));
        });

        $(el).on('cancel.daterangepicker', function () {
            el.value = '';
            el.dispatchEvent(new Event('input'));
        });
    }

    window.addEventListener('load', initDatePicker);
    document.addEventListener('livewire:navigated', initDatePicker);
</script>

<script type="text/javascript">
    $('.slidertopsection').owlCarousel({
        autoplay: true,
        rewind: false,
        /* use rewind if you don't want loop */
        margin: 20,
        loop: true,
        responsiveClass: true,
        autoHeight: false,
        autoplayTimeout: 2000,
        smartSpeed: 800,
        dots: false,
        nav: true,
        navText: [
            '<i class="fa-solid fa-chevron-left fa-2x"></i>',
            '<i class="fa-solid fa-chevron-right fa-2x"></i>'
        ],
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 1
            },
            1024: {
                items: 1
            },
            1366: {
                items: 1
            }
        }
    });
</script>

<script>
    function likePost(id, type) {
        const routeUrl = type === 'fuel' ?
            '{{ route("ico.toggleFuel") }}' :
            '{{ route("ico.toggleStar") }}';
        const msgDiv = document.getElementById('like-message-' + id);
        const starIcon = document.getElementById('star-icon-' + id);
        const fuelText = document.getElementById('fuel-text-' + id);

        fetch(routeUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    ico_id: id
                })
            })
            .then(res => res.json())
            .then(data => {
                msgDiv.textContent = data.message || 'Updated!';
                msgDiv.className = 'small text-center position-absolute fs-12 text-nowrap ' +
                    (data.status ? 'text-success' : 'text-danger');

                // ⭐ handle star icon toggle
                if (type === 'fuel') {
                    if (fuelText) {
                        fuelText.textContent = data.type || 'Fuel';
                    }
                }
                // ⭐ handle star icon toggle
                if (type === 'star') {
                    if (data.action === 'added') {
                        starIcon.classList.remove('fa-regular', 'text-black');
                        starIcon.classList.add('fa-solid', 'text-warning');
                    } else if (data.action === 'removed') {
                        starIcon.classList.remove('fa-solid', 'text-warning');
                        starIcon.classList.add('fa-regular', 'text-black');
                    }
                }
            })
            .catch(err => {
                console.error(err);
                msgDiv.textContent = 'Something went wrong.';
                msgDiv.className = 'mt-0 small likebtn text-center text-danger';
            })
            .finally(() => {
                // btn.disabled = false;
            });
    }
</script>
@endpush