@push('metadata')
@php
$pageId = $seoData['id'];
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.edit_crypto_presale_ico_project_listings_presale');
@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')}}" />
@endpush
@push('head_scripts')
    {!! SchemaHelper::webpageSchema($mTitle ?? null, $mDescr ?? null) !!}
    {!! SchemaHelper::getBreadcrumbSchema([
    ['name' => 'Home', 'url' => url('/')],
    ['name' =>$seoData['breadcrumb'], 'url' => $mUrl]
    ]) !!}
    {!! SchemaHelper::getImageObjectSchema($mImage, $mTitle, 1200, 630) !!}
    @if(!empty($seoData['faq']))
    {!! SchemaHelper::getFaqSchema($seoData['faq']) !!}
    @endif
    {!! SchemaHelper::howToSchema([
        'id' => $mUrl,
        'name' => $mTitle,
        'totalTime' => 'PT20S',
            'steps' => [
                [
                    "@type" => "HowToStep",
                    'name' => 'Log In to Your Dashboard',
                    'text' => 'Sign in to your account and access your project dashboard.',
                ],
                [
                    "@type" => "HowToStep",
                    'name' => 'Open the Edit Listing Option',
                    'text' => 'Click on “Edit Crypto Presale Listing” to start making changes.',
                ],
                [
                    "@type" => "HowToStep",
                    'name' => 'Update Project Information',
                    'text' => 'Edit your project description, token details, images, or uploaded files as needed.',
                ],
                [
                    "@type" => "HowToStep",
                    'name' => 'Add New Links or Social Updates',
                    'text' => 'Include updated website links, social media profiles, or new announcements.',
                ],
                [
                    "@type" => "HowToStep",
                    'name' => 'Review Your Changes',
                    'text' => 'Check all updates carefully to make sure everything is correct and clear.',
                ],
                [
                    "@type" => "HowToStep",
                    'name' => 'Publish Your Updated Listing',
                    'text' => 'Click publish to save your changes. Your updated information will go live instantly.',
                ]
            ],
        ]) 
    !!}

@endpush

@push('styles')
<link rel="stylesheet" type="text/css" href="{{URL::asset('/assets/css/daterangepicker.css')}}">
<link rel="stylesheet" type="text/css" href="https://d18do2qpuw9ik7.cloudfront.net/public/assets/css/owl.carousel.min.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'] ?? '' }}</li>
            </ul>
        </div>
    </section>

    <section>
        <div class="container mt-4 mb-5">
            <div class="section-title row mb-4 align-items-center">
                <div class="col-xxl-8 headingfont">
                    {!!@$seoData['top_page_content']!!}
                </div>
                <div class="col-xxl-4 mt-3 mt-md-0">
                    <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                    <a href="{{URL::to('crypto-presale-ico-marketing-campaign')}}" title="Marketing your Presale" class="btn bg-gradient px-4 text-white">
                        <i class="fa-solid fa-chart-simple me-2"></i>
                        Marketing Your Presale
                    </a>

                    <a href="{{ URL::to('submit-crypto-presale-ico-ido-ieo-projects') }}" title="List Crypto Presale, ICO, IDO & IEO Projects on Crypto Presale News" class="btn bg-gradient px-4 text-white" onClick={handleSubmitForm}>
                        <i class="fa-solid fa-plus me-1"></i>
                        Add ICO
                    </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container my-4">
            <!-- Filter Tabs -->
            {{--
        <div class="btn-group flex-wrap d-flex justify-content-center py-2 w-50 m-auto">
            <button class="btn btn-light tab-button">All</button>
            <button class="btn btn-light tab-button">Crypto ICO</button>
            <button class="btn btn-light tab-button active-tab">Crypto IDO</button>
            <button class="btn btn-light tab-button">Crypto IEO</button>
            <button class="btn btn-light tab-button">Crypto Presale</button>
        </div>
        --}}
            <!-- Search and Filter Bar -->
            <x-ico-filter-card />
            <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">
                            <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['projectType']" :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']"
                                :slug="$listing['slug']"
                                mode="edit" />
                        </tr>
                        @empty

                        <tr class="text-center">
                            <td class="text-center" colspan="12">
                                No Data Found
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="text-start">
                    <span class="fs-12 text-secondary">Showing {{ $showingIcos }} out of {{ $totalIcos }}</span>
                </div>

                @if ($hasMore)
                <div class="d-flex justify-content-center my-2">
                    <button wire:click="loadMore" class="btn mainbluebtn">Load More</button>
                </div>
                @else
                <!-- comment code -->
                @endif
            </div>
        </div>
    </section>

    @if (!empty($seoData['description']))
    <section>
        <div class="container my-4">
            <div class="row">
                <div class="col-12">
                    <div class="contentview">
                        <div class="details-page">
                            {!! $seoData['description'] !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    <livewire:faq-section pageType="edit-crypto-presale-ico-project-listings" />
</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>

@endpush