@include('layout.header')


<div class="tabiing_data">



    <div id="tab-2" class="tab-content ">
        <section class="up_match">
            @if ($semiFinals->isNotEmpty())
                <div class="row">
                    <div class="col-12">
                        <h2>Semi Final Match</h2>
                    </div>
                </div>
                <div class="row justify-content-center">
                    @foreach ($semiFinals as $semi)
                        <div class="col-xxl-7 col-lg-8 col-md-10 col-sm-12 col-12">
                            <a href="" class="semi rs_shadow">
                                <div class="semi_vs_final">
                                    <div class="left">
                                        <img src="{{ asset('front/assets/images/logo/' . ($semi->team_1_logo ?? 'placeholder.png')) }}"
                                            alt="{{ $semi->team_1_name }} logo">
                                        <div class="team_name_Semi">
                                            <span class="first">{{ $semi->team_1_name }}</span>
                                        </div>
                                    </div>
                                    <div class="middle_vs my-auto">
                                        <img src="{{ asset('front/assets/images/vs.png') }}" alt="Versus">
                                    </div>
                                    <div class="right">
                                        <img src="{{ asset('front/assets/images/logo/' . ($semi->team_2_logo ?? 'placeholder.png')) }}"
                                            alt="{{ $semi->team_2_name }} logo">
                                        <div class="team_name_Semi">
                                            <span class="second">{{ $semi->team_2_name }}</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            @endif
        </section>


        <section class="up_match">
            @if ($finals->isNotEmpty())
                <div class="row">
                    <div class="col-12">
                        <h2>Final Match</h2>
                    </div>
                </div>
                <div class="row justify-content-center">
                    @foreach ($finals as $final)
                        <div class="col-xxl-7 col-lg-8 col-md-10 col-sm-12 col-12">
                            <a href="" class="semi rs_shadow">
                                <div class="semi_vs_final">
                                    <div class="left">
                                        <img src="{{ asset('front/assets/images/logo/' . ($final->team_1_logo ?? 'placeholder.png')) }}"
                                            alt="{{ $final->team_1_name }} logo">
                                        <div class="team_name_Semi">
                                            <span class="first">{{ $final->team_1_name }}</span>
                                        </div>
                                    </div>
                                    <div class="middle_vs my-auto">
                                        <img src="{{ asset('front/assets/images/vs.png') }}" alt="Versus">
                                    </div>
                                    <div class="right">
                                        <img src="{{ asset('front/assets/images/logo/' . ($final->team_2_logo ?? 'placeholder.png')) }}"
                                            alt="{{ $final->team_2_name }} logo">
                                        <div class="team_name_Semi">
                                            <span class="second">{{ $final->team_2_name }}</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            @endif
        </section>


    </div>

</div>

@include('layout.footer')