@extends($activeTemplate.'layouts.frontend')
@section('content')

    @php
        $bannerElements = getContent('banner.element');
    @endphp

    <main class="all-sections">
        <div class="container-fluid">
            <div class="row g-4">
                @include($activeTemplate.'partials.leftbar')

                <article class="col main-section">
                    @if(Request::routeIs('home'))
                        <div class="banner-wrapper owl-theme owl-carousel mb-5">
                            @foreach ($bannerElements as $item)
                                <div class="banner-item">
                                    <a href="{{@$item->data_values->url}}" class="d-block">
                                        <img src="https://4kwallpapers.com/images/wallpapers/cricket-batsman-3840x2160-17540.jpeg" alt="banner">
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <div class="predict__wrapper">
                        <div class="predict__header">
                            <h5 class="predict__header-title">
                                @if(Request::routeIs('home'))
                                    @lang('Live Matches')
                                @else
                                    {{__($pageTitle)}}
                                @endif
                            </h5>
                        </div>
                        <style>
                            .predict__area {
                                padding: 10px;
                                background: #0f172a;
                            }
                            .match-row {
                                display: flex;
                                align-items: center;
                                background: #1e293b;
                                margin-bottom: 5px;
                                padding: 12px 15px;
                                border-radius: 4px;
                                transition: all 0.3s;
                                border-left: 4px solid transparent;
                            }
                            .match-row:hover {
                                background: #334155;
                                border-left: 4px solid #38bdf8;
                            }
                            .match-info {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                            }
                            .match-teams {
                                font-size: 1rem;
                                font-weight: 600;
                                color: #f8fafc;
                                margin-bottom: 2px;
                            }
                            .match-teams a {
                                color: inherit;
                                text-decoration: none;
                            }
                            .match-meta {
                                font-size: 0.75rem;
                                color: #94a3b8;
                                display: flex;
                                align-items: center;
                                gap: 10px;
                            }
                            .match-odds {
                                display: flex;
                                gap: 5px;
                                align-items: center;
                            }
                            .odds-btn {
                                width: 55px;
                                height: 40px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                border-radius: 4px;
                                text-decoration: none !important;
                                transition: opacity 0.2s;
                                font-weight: bold;
                            }
                            .odds-btn:hover {
                                opacity: 0.8;
                            }
                            .odds-val {
                                font-size: 0.9rem;
                                color: #000;
                            }
                            .odds-btn.blue {
                                background: #7dd3fc; /* Sky blue */
                            }
                            .odds-btn.pink {
                                background: #f9a8d4; /* Pink */
                            }
                            .live-tag {
                                background: #ef4444;
                                color: white;
                                padding: 2px 6px;
                                border-radius: 3px;
                                font-size: 0.65rem;
                                text-transform: uppercase;
                                font-weight: bold;
                                margin-right: 5px;
                            }
                            @media (max-width: 768px) {
                                .match-row {
                                    flex-direction: column;
                                    align-items: flex-start;
                                    gap: 10px;
                                }
                                .match-odds {
                                    width: 100%;
                                    justify-content: flex-end;
                                }
                            }
                        </style>

                        <div class="predict__area">
                            @forelse ($matches as $item)
                                <div class="match-row">
                                    <div class="match-info">
                                        <div class="match-teams">
                                            <a href="{{route('match.details',[slug($item->name),$item->id])}}">
                                                {{__($item->name)}}
                                            </a>
                                        </div>
                                        <div class="match-meta">
                                            @if($item->start_time <= now())
                                                <span class="live-tag">Live</span>
                                            @endif
                                            <span><i class="las la-calendar"></i> {{ showDateTime($item->start_time, 'd M, h:i A') }}</span>
                                            <span class="text--base"><i class="las la-question-circle"></i> {{ $item->questions->count() }} @lang('Markets')</span>
                                        </div>
                                    </div>

                                    <div class="match-odds">
                                        @if($item->questions->count() && $item->questions->first()->options->count())
                                            @foreach ($item->questions->first()->options->take(2) as $index => $data)
                                                @auth
                                                    <a href="#predictModal" class="odds-btn {{ $index % 2 == 0 ? 'blue' : 'pink' }} bet-info" 
                                                       data-bs-toggle="modal" data-resource="{{$data}}" 
                                                       data-question="{{__($item->questions->first()->name)}}" 
                                                       data-match="{{__($item->name)}}">
                                                        <span class="odds-val">{{ getAmount($data->dividend / $data->divisor, 2) }}</span>
                                                    </a>
                                                @else
                                                    <a href="#loginModal" class="odds-btn {{ $index % 2 == 0 ? 'blue' : 'pink' }}" data-bs-toggle="modal">
                                                        <span class="odds-val">{{ getAmount($data->dividend / $data->divisor, 2) }}</span>
                                                    </a>
                                                @endauth
                                            @endforeach
                                            <!-- Filler for empty boxes to keep layout consistent like Victory -->
                                            @for($i = $item->questions->first()->options->count(); $i < 2; $i++)
                                                <div class="odds-btn" style="background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.1);">
                                                    <span class="odds-val" style="color: #475569;">-</span>
                                                </div>
                                            @endfor
                                        @else
                                            <div class="odds-btn blue" style="opacity: 0.3;"><span class="odds-val">-</span></div>
                                            <div class="odds-btn pink" style="opacity: 0.3;"><span class="odds-val">-</span></div>
                                        @endif
                                    </div>
                                </div>
                            @empty
                                <div class="text-center p-5 text--white">
                                    <i class="las la-frown-open fz--48 mb-3"></i>
                                    <p>@lang('No match found at the moment.')</p>
                                </div>
                            @endforelse
                        </div>
                        <ul class="pagination justify-content-center">
                            {{$matches->links()}}
                        </ul>
                    </div>
                </article>

                @include($activeTemplate.'partials.rightbar')

            </div>
        </div>
    </main>

    @if($sections->secs != null)
        @foreach(json_decode($sections->secs) as $sec)
            @include($activeTemplate.'sections.'.$sec)
        @endforeach
    @endif
@endsection