@extends('landing-pages.layouts.layout')

@section('content')
    <header>
        <video src="{{ asset('assets/images/header.mp4') }}" autoplay loop muted
            style="width: 100%; height: auto; display: block;"></video>
    </header>
    {{-- Start About us section --}}
    <section class="mt-5" id="aboutUs">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-6">
                    <div class="about-us-content mt-5">
                        <p>نُنمّي قدراتهم ونصنع مستقبلهم

نؤمن بأن الأنشطة الرياضية تلعب دورًا محوريًا في بناء شخصية الطفل وتعزيز ثقته بنفسه. من خلال برامجنا الرياضية المتنوعة، نساعد الأطفال على اكتشاف مواهبهم، وتحقيق الإنجازات، والعمل بروح الفريق.جهولة </p>
                        <div class="about-icons mb-5 mt-5">
                            <div class="row">
                                <div class="col-2">
                                    <img src="{{ asset('assets/images/i-1.png') }}" class="img-fluid" alt="">

                                </div>
                                <div class="col-8">
                                    <h4 class="mt-2">
                                        
                                        تنمية المهارات البدنية والذهنية
                                         </h4>
                                    <p>
                                      نُقدّم أنشطة رياضية متكاملة تُعزز اللياقة البدنية وتنمي التفكير الاستراتيجي والانضباط الذاتي.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="about-icons">
                            <div class="row">
                                <div class="col-2">
                                    <img src="{{ asset('assets/images/i-2.png') }}" class="img-fluid" alt="">

                                </div>
                                <div class="col-8">
                                    <h4 class="mt-2">
                                        بناء جيل قيادي واثق
                                    </h4>

                                    <p>
                                       
                                       من خلال المنافسات والبطولات، يتعلّم الطفل أهمية العمل الجماعي، والمثابرة، وتحقيق الأهداف بثقة وإصرار.
                                    </p>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

                <div class="col-sm-12 col-md-6 col-lg-6">
                    <div class="row">
                        <div class="col-6">
                            <img src="{{ asset('assets/images/1.png') }}" class="img-fluid" alt="">
                        </div>
                        <div class="col-6">
                            <div class="about-us-image">
                                <img src="{{ asset('assets/images/2.png') }}" class="img-fluid" alt="">

                            </div>

                        </div>
                        <div class="col-6">
                            <div class="">
                                <img src="{{ asset('assets/images/3.png') }}"
                                    style="margin-top: -52px; margin-right: 110px;" class="img-fluid" alt="">

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End About Us Section -->
    {{-- Start sports --}}
    <section class="sports text-center mx-auto" id="sports">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="head-sport text-center mt-5 mb-5">
                        <h2>الرياضات</h2>
                    </div>
                </div>
                @foreach ($games as $game)
                    <div class="col-sm-12 col-md-6 col-lg-4">
                        <div class="container-sport text-center">
                            <img src="{{ asset('storage/' . $game->image) }}" class="img-fluid" alt="{{ $game->name ?? '' }}" />
                            <p class="sport-name">{{ $game->name ?? '' }}</p>
                        </div>

                    </div>
                @endforeach


            </div>
        </div>
    </section>
    {{-- End sports --}}
    {{-- Start packages --}}
    <section class="packages">
        <div class="container">
            <div class="row">
                @foreach ($packages as $package)
                    <div class="col-sm-12 col-md-6 col-lg-4">
                        <div class="package">
                            <div class="card">
                                <div class="card-header">
                                    <h2>{{ $package->name }}</h2>
                                </div>
                                <div class="card-body">
                                    <p>{{ $package->description }} </p>
                                    @if ($package->games->isNotEmpty())
                                        <ul class="list-unstyled p-0">
                                            @foreach ($package->games as $game)
                                                <li>{{ $game->name ?? '' }}</li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <p>No assignments found for this coach.</p>
                                    @endif
                                    <p>سعر الاشتراك <span class="package-price">{{ $package->price }}</span> ج.م</p>
                                </div>
                                <a href="tel:01281188071" style="text-decoration: none" class="card-footer">
                                    اشترك الأن
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
    {{-- End packages --}}
    {{-- Start coach --}}
    <section class="coach">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="head-sport text-center mt-5 mb-5">
                        <h2>المدربين</h2>
                    </div>
                </div>
                @foreach ($coaches as $coach)
                    <div class="col-sm-12 col-md-6 col-lg-4">
                        <div class=" text-center">
                            <img src="{{ asset('assets/images/coach.png') }}" class="img-fluid" alt="">
                            <h2>{{ $coach->name }} </h2>

                            @if ($coach->assignments->isNotEmpty())
                                <ul class="list-unstyled p-0">
                                    @foreach ($coach->assignments as $assignment)
                                        <li>{{ $assignment->game->name ?? ''}}</li>
                                    @endforeach
                                </ul>
                            @else
                                <p>No assignments found for this coach.</p>
                            @endif
                        </div>

                    </div>
                @endforeach

            </div>
        </div>
    </section>
    {{-- End coach --}}
@endsection