@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($offers) --}}
    <!-- 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">our offers</h2>
            </div>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                @forelse ($offers as $offer)
                    <div class="col">
                        <div class="card h-100">
                        <img src="{{ $offer->image }}" style="height: 200px" class="card-img-top" alt="...">
                        <div class="card-body text-center">
                            <h5 class="card-title">{{ $offer->name }}</h5>
                            <p class="card-text">{{ Str::limit($offer->description, 100) }}</p>
                            <div class="d-flex justify-content-between">
                                <p class="bg-dark py-2 fst-italic text-white rounded-pill text-center w-50 d-flex justify-content-center align-items-center mx-1">Trip Code : {{ $offer->code }}</p>
                                <p class="bg-dark py-2 fst-italic text-white rounded-pill w-50 d-flex justify-content-center align-items-center">Days Num : {{ $offer->days }}</p>
                            </div>
                            <p>Available from {{\Carbon\Carbon::parse($offer->start_date)->format('d/m/Y') . ' to ' . \Carbon\Carbon::parse($offer->end_date)->format('d/m/Y')  }}</p>
                            <p class="card-text">Start from <span class="text-primary fs-3">{{ $offer->price }}</span> SAR per person</p>
                            <a href="https://wa.me/+201113139550" class="btn btn-primary"> <i class='fab fa-whatsapp-square'></i> تواصل معنا</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> --}}