@extends('front.master')

@section('title', 'About')
@section('about-active', 'active')

{{-- @section('hero')
    <x-hero-section title="About Us" subtitle="About"></x-hero-section>
@endsection --}}

@section('content')
    <!-- About Start -->
    {{-- <div class="container-xxl py-6">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6 wow zoomIn" data-wow-delay="0.1s">
                    <img class="img-fluid" src="{{ asset('assets-front') }}/img/about.png">
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="d-inline-block border rounded-pill text-primary px-4 mb-3">About Us</div>
                    <h2 class="mb-4">Award Wining Consultancy Agency For Your Business</h2>
                    <p class="mb-4">Tempor erat elitr rebum at clita. Diam dolor diam ipsum et tempor sit. Aliqu
                        diam amet diam et eos labore. Clita erat ipsum et lorem et sit, sed stet no labore lorem
                        sit. Sanctus clita duo justo et tempor eirmod</p>
                    <div class="row g-3 mb-4">
                        <div class="col-12 d-flex">
                            <div class="flex-shrink-0 btn-lg-square rounded-circle bg-primary">
                                <i class="fa fa-user-tie text-white"></i>
                            </div>
                            <div class="ms-4">
                                <h6>Business Planning</h6>
                                <span>Tempor erat elitr rebum at clita. Diam dolor ipsum amet eos erat ipsum lorem
                                    et sit sed stet lorem sit clita duo</span>
                            </div>
                        </div>
                        <div class="col-12 d-flex">
                            <div class="flex-shrink-0 btn-lg-square rounded-circle bg-primary">
                                <i class="fa fa-chart-line text-white"></i>
                            </div>
                            <div class="ms-4">
                                <h6>Financial Analaysis</h6>
                                <span>Tempor erat elitr rebum at clita. Diam dolor ipsum amet eos erat ipsum lorem
                                    et sit sed stet lorem sit clita duo</span>
                            </div>
                        </div>
                    </div>
                    <a class="btn btn-primary rounded-pill py-3 px-5 mt-2" href="">Read More</a>
                </div>
            </div>
        </div>
    </div> --}}
    <!-- About End -->


    <x-front-features-component></x-front-features-component>

{{-- @dd($countrys) --}}
    <!-- Team Start -->
    @php
        use Illuminate\Support\Str;
    @endphp
    
    <div class="container-xxl py-6">
        <div class="container">
            <div class="mx-auto text-center wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                {{-- <div class="d-inline-block border rounded-pill text-primary px-4 mb-3">Our Team</div> --}}
                <h2 class="mb-5">countries</h2>
            </div>
            <div class="row g-4">
                @forelse ($countrys as $country)
                    <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                        <div class="team-item">
                            <h5> {{ $country->name }}</h5>
                            <p class="mb-4">{{ Str::limit($country->description, 100) }}</p>
                            <img class="img-fluid rounded-circle w-100 mb-4" style="height: 200px" src="{{ $country->image }}"
                                alt="">
                            <div class="d-flex justify-content-center">
                                {{-- <a style='font-size:24px' href="https://wa.me/+201113139550" class="btn btn-rounded text-primary bg-white m-2">تواصل معنا  <i class='fab fa-whatsapp-square'></i></a> --}}
                                <a style='font-size:24px' href="{{ route('front.offer', $country) }}" class="btn btn-rounded text-primary bg-white m-2"> العروض </a>
                            </div>
                        </div>
                    </div>
                    
                @empty
                    <h1>no data</h1>
                @endforelse
            </div>
        </div>
    </div>
    <!-- Team End -->

@endsection
{{-- 
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var buttons = document.querySelectorAll('a');
        
        console.log(buttons);
        for (let i = 0; i < buttons.length; i++) {

            buttons[i].addEventListener('mouseenter', function(e){
                console.log(e.target.classList.add('bg-dark'));
                console.log(e.target.classList.remove('bg-white'));
            })
            buttons[i].addEventListener('mouseleave', function(e){
                console.log(e.target.classList.remove('bg-dark'));
                console.log(e.target.classList.add('bg-white'));
            })
        }
    });
    
</script> --}}