@extends('web_theme::layout.main')

@section('title', 'About El DiDi Group')
@section('meta_description', 'Learn about El DiDi Group, our mission, vision, and expertise across multiple industries.')

@section('content')
    <!-- Page Title -->
    <section class="page-title">
        <div class="content" style="background-image: url('{{ asset($option['aboutHeaderImg']) }}');">
        </div>
    </section>
    <!-- End Page Title -->

    <!-- Experiance Section Two / Style Two -->
    <section class="company-section">
        <div class="circle-layer"></div>
        <div class="big-letter">
            <img src="{{ asset('themes/web/assets/images/resource/letter.png') }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" alt="" />
        </div>
        <div class="auto-container">
            <div class="row clearfix">

                <!-- Content Column -->
                <div class="content-column col-lg-12 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="title">THE COMPANY OVERVIEW</div>
                        <h1>About El Didi Group</h1>
                        <div class="text">
                            <strong>Company History</strong><br><br>
                            {!! nl2br(e($option['about_overview'] ?? '')) !!}
                        </div>

                        @if (!empty($option['aboutTextArea']))
                            <div class="text">
                                {!! nl2br(e($option['aboutTextArea'] ?? '')) !!}
                            </div>
                        @endif

                    </div>
                </div>

                <!-- Form Column -->
                {{-- <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="image">
                            <img src="{{ $option['aboutImg'] ? asset($option['aboutImg']) : asset('themes/web/assets/images/resource/experiance.png') }}"
                                alt="" />
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </section>

    <section class="services-section">
        <div class="image-layer-one"
            style="background-image: url('{{ asset('themes/web/assets/images/background/2.jpg') }}');"></div>
        <div class="auto-container">
            <div class="inner-container">
                <div class="row clearfix">

                    <!-- Content Column -->
                    @if (!empty($option['vision']))
                        <div class="service-block col-lg-4 col-md-6 col-sm-12">
                            <div class="inner-box">
                                <span class="icon flaticon-eye-1"></span>
                                <h4><span style="color: white">Our Vision</span></h4>
                                <div class="text"> {{ $option['vision'] }} </div>
                            </div>
                        </div>
                    @endif

                    <!-- Image Column -->
                    @if (!empty($option['mission']))
                        <div class="service-block col-lg-4 col-md-6 col-sm-12">
                            <div class="inner-box">
                                <span class="icon flaticon-pencil-and-ruler"></span>
                                <h4><span style="color:white">Our Mission</span></h4>
                                <div class="text">{{ $option['mission'] }}</div>
                            </div>
                        </div>
                    @endif
                    @if (!empty($option['values']))
                        <div class="service-block col-lg-4 col-md-12 col-sm-12" style="margin-top: 30px;">
                            <div class="inner-box">
                                <span class="icon flaticon-diamond"></span>
                                <h4><span style="color:white">Core Values</span></h4>
                                <div class="text">
                                    {{ $option['values'] }}
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="service-block col-lg-12 col-md-12 col-sm-12" style="margin-top: 30px;">
                        <div class="inner-box">
                            <span class="icon flaticon-timetable"></span>
                            <h4><a href="#">Group Timeline</a></h4>

                            <div class="row justify-content-center text-center" style="margin-top: 20px;">

                                <!-- 1984 -->
                                <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;">
                                    <div style="background:#f8f8f8; padding:20px; border-radius:8px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                                        <h5 style="font-weight:700; margin-bottom:10px;">1984</h5>
                                        <p style="margin:0;">El Didi Group founded in Cairo</p>
                                    </div>
                                </div>

                                <!-- 1990s -->
                                <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;">
                                    <div style="background:#f8f8f8; padding:20px; border-radius:8px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                                        <h5 style="font-weight:700; margin-bottom:10px;">1990s</h5>
                                        <p style="margin:0;">Expansion into drilling and construction equipment</p>
                                    </div>
                                </div>

                                <!-- 2000 -->
                                <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;">
                                    <div style="background:#f8f8f8; padding:20px; border-radius:8px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                                        <h5 style="font-weight:700; margin-bottom:10px;">2000</h5>
                                        <p style="margin:0;">Establishment of branches across Saudi Arabia</p>
                                    </div>
                                </div>

                                <!-- 2005 -->
                                <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;">
                                    <div style="background:#f8f8f8; padding:20px; border-radius:8px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                                        <h5 style="font-weight:700; margin-bottom:10px;">2005</h5>
                                        <p style="margin:0;">Opening of the Soilmec Misr plant in Suez Free Zone</p>
                                    </div>
                                </div>

                                <!-- 2010 -->
                                <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;">
                                    <div style="background:#f8f8f8; padding:20px; border-radius:8px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                                        <h5 style="font-weight:700; margin-bottom:10px;">2010</h5>
                                        <p style="margin:0;">Diversification into mining, logistics, and petroleum services</p>
                                    </div>
                                </div>

                                <!-- 2015–2024 -->
                                <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;">
                                    <div style="background:#f8f8f8; padding:20px; border-radius:8px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                                        <h5 style="font-weight:700; margin-bottom:10px;">2015–2024</h5>
                                        <p style="margin:0;">Expansion into the Middle East, Africa, and Canada</p>
                                    </div>
                                </div>

                                <!-- Today -->
                                <div class="col-md-4 col-sm-6" style="margin-bottom: 20px;">
                                    <div style="background:#f8f8f8; padding:20px; border-radius:8px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.08);">
                                        <h5 style="font-weight:700; margin-bottom:10px;">Today</h5>
                                        <p style="margin:0;">Representing over 35 manufacturers with 18 branches worldwide</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <section class="experiance-section-two style-two">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="content-column col-lg-12 col-md-12 col-sm-12">
                    <div class="fact-counter style-three">

                        <div class="row clearfix">
                            <!-- 1 -->
                            @if (!empty($option['projects']))
                                <div class="column counter-column col-lg-3 col-md-6 col-sm-12">
                                    <div class="inner wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1500ms">
                                        <div class="content">
                                            <div class="count-outer count-box alternate">
                                                <span class="count-text" data-speed="5000"
                                                    data-stop="{{ $option['projects'] }}">0</span>+
                                            </div>
                                            <h4 class="counter-title">Successfully finished projects</h4>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- 2 -->
                            @if (!empty($option['capital']))
                                <div class="column counter-column col-lg-3 col-md-6 col-sm-12">
                                    <div class="inner wow fadeInLeft" data-wow-delay="600ms" data-wow-duration="1500ms">
                                        <div class="content">
                                            <div class="count-outer count-box">
                                                <span class="count-text" data-speed="3000"
                                                    data-stop="{{ $option['capital'] }}">0</span>M
                                            </div>
                                            <h4 class="counter-title">Capital & investment</h4>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- 3 -->
                            @if (!empty($option['experience']))
                                <div class="column counter-column col-lg-3 col-md-6 col-sm-12">
                                    <div class="inner wow fadeInLeft" data-wow-delay="900ms" data-wow-duration="1500ms">
                                        <div class="content">
                                            <div class="count-outer count-box alternate">
                                                <span class="count-text" data-speed="4000"
                                                    data-stop="{{ $option['experience'] }}">0</span>+
                                            </div>
                                            <h4 class="counter-title">Year of experience with pride</h4>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <!-- 4 -->
                            @if (!empty($option['colleagues']))
                                <div class="column counter-column col-lg-3 col-md-6 col-sm-12">
                                    <div class="inner wow fadeInLeft" data-wow-delay="1200ms" data-wow-duration="1500ms">
                                        <div class="content">
                                            <div class="count-outer count-box">
                                                <span class="count-text" data-speed="3000"
                                                    data-stop="{{ $option['colleagues'] }}">0</span>+
                                            </div>
                                            <h4 class="counter-title">Colleagues & counting</h4>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section> --}}
    <!-- End Experiance Section Two -->

    <!-- Services Section Two -->
    {{-- <section class="services-section-two">
        <div class="auto-container">

            <!-- Sec Title -->
            <div class="sec-title centered">
                <h2>We are the best in the business<br><span>Drilling Equipment and Heavy Equipment</span></h2>
                <div class="text">El Didi Group is a leading provider of drilling and heavy equipment solutions across the
                    region.</div>
            </div>

            <div class="services-carousel owl-carousel owl-theme">

                <!-- 1 - Heavy Equipment Rental -->
                <div class="service-block-two">
                    <div class="inner-box">
                        <span class="icon flaticon-crane"></span>
                        <h5><a href="#">Heavy Equipment <br> Rental</a></h5>
                        <div class="text">Providing high-performance machinery for your construction and infrastructure
                            needs.</div>
                    </div>
                </div>

                <!-- 2 - Drilling Services -->
                <div class="service-block-two">
                    <div class="inner-box">
                        <span class="icon flaticon-settings-1"></span>
                        <h5><a href="#">Professional <br> Drilling Services</a></h5>
                        <div class="text">Expert drilling solutions for oil, gas, water wells, and industrial
                            applications.<br><br></div>
                    </div>
                </div>

                <!-- 3 - Equipment Maintenance -->
                <div class="service-block-two">
                    <div class="inner-box">
                        <span class="icon flaticon-secure-shield"></span>
                        <h5><a href="#">Heavy Equipment <br> Maintenance</a></h5>
                        <div class="text">On-site and workshop-based maintenance services for all types of
                            machinery.<br><br></div>
                    </div>
                </div>

                <!-- 4 - Spare Parts Supply -->
                <div class="service-block-two">
                    <div class="inner-box">
                        <span class="icon flaticon-helmet-1"></span>
                        <h5><a href="#">Spare Parts <br> Supply</a></h5>
                        <div class="text">High-quality spare parts for drilling and heavy equipment – fast delivery
                            guaranteed.</div>
                    </div>
                </div>

                <!-- 5 - Infrastructure Projects -->
                <div class="service-block-two">
                    <div class="inner-box">
                        <span class="icon flaticon-helmet"></span>
                        <h5><a href="#">Infrastructure <br> Projects</a></h5>
                        <div class="text">Turnkey infrastructure solutions powered by reliable equipment and experienced
                            crews.</div>
                    </div>
                </div>

                <!-- 6 - Equipment Transport -->
                <div class="service-block-two">
                    <div class="inner-box">
                        <span class="icon flaticon-settings"></span>
                        <h5><a href="#">Equipment <br> Transport</a></h5>
                        <div class="text">Safe and timely transport of heavy equipment across local and international
                            routes.</div>
                    </div>
                </div>

            </div>
        </div>
    </section> --}}
    <!-- End Services Section Two -->

    <!-- Clients Section Two -->
    {{-- <section class="clients-section-two">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>We Have Best <br><span>Corporate Partners</span></h2>
            </div>
            <div class="inner-container">
                <div class="sponsors-outer">
                    <!-- Sponsors Carousel -->
                    <ul class="sponsors-carousel owl-carousel owl-theme">
                        @foreach ($partners as $partner)
                            <li class="slide-item">
                                <figure class="image-box"><a href="{{ route('web.partners.show', $partner->id) }}"><img
                                            src="{{ asset($partner->photo) }}" alt=""></a>
                                </figure>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <i class="fa fa-bar-chart" aria-hidden="true"> Visitors Counter : <span
                    class="post-views-count">{{ $views->count }}</span></i>

        </div>
    </section> --}}
    <!-- End Clients Section Two -->

    <!-- CEO Section -->
    <section class="company-section">
	    <div class="auto-container">
		    <div class="row clearfix">
                <div class="content-column col-lg-8 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <h4><a href="ceo-and-certificates.html">CEO Profile</a></h4>
                        <div class="text">
                            <strong>Dr. Eng. Abdelfattah El Didi</strong><br>
                            Founder & Chairman of El Didi Group<br><br>
                            A visionary leader with more than 40 years of experience in the foundation and drilling
                            equipment industry. Dr. El Didi has transformed the company from a single-agency operation
                            into a multinational group with a strong regional and global presence.
                        </div>

                    </div>
                </div>
                <div class="content-column col-lg-4 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div style="margin-top: 20px;">
                            <img src="{{ $option['aboutImg'] ? asset($option['aboutImg']) : asset('themes/web/assets/images/eldidi-l.png') }}" width="510" height="600" loading="lazy" alt="CEO Photo" style="max-width: 250px; border-radius: 8px; aspect-ratio: 510/600;">
                        </div>

                    </div>
                </div>
                <div class="content-column col-lg-12 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <h4><a href="#">Complete Service Support</a></h4>
                        <div class="text">
                            Beyond equipment supply, El Didi Group provides full operational support to ensure smooth
                            project execution and maximum equipment uptime. Services include after-sales service,
                            preventive maintenance, on-site repair, technical support, operator training, and regional
                            spare-parts centers — ensuring equipment operates efficiently, reliably, and on schedule.
                        </div>


                    </div>
                </div>

			</div>
		</div>
	</section>
    <!-- End CEO Section -->
@endsection