@extends('layouts.front')
@section('content')

<div id="demo" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        @foreach ($bannerimages as $bannerimagesdata)
            <button type="button"
                    data-bs-target="#demo"
                    data-bs-slide-to="{{ $loop->index }}"
                    @class(['active' => $loop->first])
                    @if ($loop->first) aria-current="true" @endif>
            </button>
        @endforeach
    </div>
    <div class="carousel-inner">
        @foreach ($bannerimages as $bannerimagesdata)
            <div @class(['carousel-item', 'active' => $loop->first])>
                <img src="{{ $bannerimagesdata->image_url }}"
                     alt="{{ $bannerimagesdata->bannrename }}"
                     class="d-block w-100 img-fluid">
            </div>
        @endforeach
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<div class="mobilesecitoninner">
    <div id="homepageseciton">
        <div class="seriessectiondata">
            <h2>Scholarship Exams</h2>
            @forelse ($competitionSections as $section)
                @foreach ($section['cards'] as $card)
                    <div class="megacontentbiscion">
                        <span class="featured-badge">Featured</span>
                        <h2 class="headertopseciton">
                            {{ $section['board']->showname }} Scholarship Exam
                        </h2>
                        <div class="megacontentdata">
                            <a href="{{ $card['detail_url'] }}">
                                <span>
                                    <i class="fa fa-check"></i>
                                    {{ $card['assignment']->groupclassname }}
                                </span>
                                <h3>
                                    {{ $card['contest']->contesttitile }}
                                    <strong>&#8377;{{ number_format((float) $card['contest']->joinamt, 2) }}</strong>
                                </h3>
                                <div class="progress" style="height: 10px;">
                                    <div class="progress-bar bg-success progress-bar-striped"
                                         role="progressbar"
                                         style="width:{{ $card['joined_percent'] }}%">
                                        {{ round($card['joined_percent']) }}% Joined
                                    </div>
                                </div>
                                <p>
                                    {{ $card['remaining_seat'] }} Left
                                    <span>{{ $card['contest']->contestseat }} Spot</span>
                                </p>
                            </a>

                            <div class="datdetailseciton row">
                                <div class="col-4">
                                    <span>Start Date</span>
                                    <p>{{ optional($card['assignment']->startdate)->format('d-m-Y') }}</p>
                                </div>
                                <div class="col-4">
                                    <span>Last Date</span>
                                    <p>{{ optional($card['assignment']->enddate)->format('d-m-Y') }}</p>
                                </div>
                                <div class="col-4">
                                    <span>Exam Date</span>
                                    <p>
                                        {{ optional($card['assignment']->examdate)->format('d-m-Y') }}
                                        Till:
                                        {{ date('h:i A', strtotime((string) $card['assignment']->examendtime)) }}
                                    </p>
                                </div>
                            </div>
                            <div class="otgerdetails">
                                <ul>
                                    <li data-bs-toggle="tooltip" title="First Prize">
                                        <img src="{{ SITEURL }}public/frontend/images/firstprize.png">
                                        &#8377;{{ number_format((float) $card['first_prize'], 2) }}
                                    </li>
                                    <li data-bs-toggle="tooltip" title="Winning Percentage">
                                        <img src="{{ SITEURL }}public/frontend/images/trophyicons.jpg">
                                        {{ $card['contest']->winpertange }}%
                                    </li>
                                    <li data-bs-toggle="tooltip" title="Last Rank">
                                        <img src="{{ SITEURL }}public/frontend/images/sideicons.jpg">
                                        {{ $card['last_rank'] ?? '-' }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                @endforeach
            @empty
                <p class="text-muted">No active scholarship exams available right now.</p>
            @endforelse
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
});
</script>
@endsection
