@extends('layouts.webpage.main_two')

@section('page-title', 'About')

@section('content')

    <section class="hero-section about-ban" style="background-image: url('{{ asset($about_section->banner_img) }}')">
        <div class="hero-content about-inner">

            {{-- Small Title with Icon --}}
            <h6 class="about-title">
                @if(!empty($about_section->icon))
                    <img src="{{ asset($about_section->icon) }}" alt="About Icon">
                @else
                    <img src="{{ asset('assets/img/about-icon.svg') }}" alt="Default Icon">
                @endif

                {{ $about_section->title ?? 'About Us' }}
            </h6>

            {{-- Main Heading --}}
            <h1 class="fw-bold about-page">
                {{ $about_section->heading ?? 'Company Profile' }}
            </h1>

            {{-- Optional Button (if available) --}}
            @if(!empty($about_section->button_text) && !empty($about_section->button_link))
                <a href="{{ $about_section->button_link }}" class="btn main-butn mt-4">
                    {{ $about_section->button_text }}
                </a>
            @endif
        </div>
    </section>

    <div data-aos="fade-up">
        <section class="company py-5">
            <div class="container com-inner">
                <div class="timeline">
                    @foreach($company_timelines as $timeline)
                        <div class="timeline-item row align-items-center">
                            <div class="timeline-dot"></div>

                            @if($loop->iteration % 2 == 1)
                                <!-- Odd: Text Left, Image Right -->
                                <div class="col-lg-8 timeline-content">
                                    <h3 class="inner-title">{{ $timeline->title }}</h3>
                                    <p class="main-para">{{ $timeline->desc_one }}</p>
                                    @if($timeline->desc_two)
                                        <p class="main-para">{{ $timeline->desc_two }}</p>
                                    @endif
                                </div>
                                <div class="col-lg-4">
                                    <img src="{{ asset($timeline->image) }}" alt="Construction Image">
                                </div>
                            @else
                                <!-- Even: Image Left, Text Right -->
                                <div class="col-lg-4 order-lg-1 order-2">
                                    <img src="{{ asset($timeline->image) }}" alt="Construction Image">
                                </div>
                                <div class="col-lg-8 timeline-content order-lg-2 order-1">
                                    <h3 class="inner-title">{{ $timeline->title }}</h3>
                                    <p class="main-para">{{ $timeline->desc_one }}</p>
                                    @if($timeline->desc_two)
                                        <p class="main-para">{{ $timeline->desc_two }}</p>
                                    @endif
                                </div>
                            @endif

                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    </div>

    <div data-aos="fade-up">
        <section class="choose-making pb-5">
            <div class="container text-center">
                <h2 class="main-title">Why Choose Meking</h2>
                <p class="main-para">Driven by expertise, built on commitment, trusted worldwide.</p>

                <div class="row align-items-center pt-4">

                    <!-- Left Column (Even order_no) -->
                    <div class="col-lg-4">
                        @foreach($chooseItems as $item)
                            @if($item->order_no && $item->order_no % 2 == 0)
                                <div class="response-box d-flex gap-2 mb-3">
                                    <div class="res-icon">
                                        <img src="{{ asset('uploads/choose_meking/' .$item->icon) }}" alt="{{ $item->title }}">
                                    </div>
                                    <div class="single text-start">
                                        <h5>{{ $item->title }}</h5>
                                        <p class="main-para">{{ $item->desc }}</p>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>

                    <!-- Center Image -->
                    <div class="col-lg-4 d-lg-block d-none choose-img">
                        @if($chooseImage)
                            <img src="{{ asset('uploads/choose_meking/' . $chooseImage->image) }}" alt="Meking">
                        @else
                            <img src="{{ asset('images/malking.png') }}" alt="Default">
                        @endif
                    </div>

                    <!-- Right Column (Odd order_no) -->
                    <div class="col-lg-4">
                        @foreach($chooseItems as $item)
                            @if($item->order_no % 2 == 1)
                                <div class="response-box d-flex gap-2 mb-3">
                                    <div class="res-icon">
                                        <img src="{{ asset('uploads/choose_meking/' .$item->icon) }}" alt="{{ $item->title }}">
                                    </div>
                                    <div class="single text-start">
                                        <h5>{{ $item->title }}</h5>
                                        <p class="main-para">{{ $item->desc }}</p>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>

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

<!-- 
    <section class="tour py-5">
        <div data-aos="fade-up">
            <div class="container text-center">
                <h2 class="main-title text-white">Meking Steel Factory Tour</h2>

                <div class="row py-3">
                    @foreach ($items as $item)
                        @php
                            preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([\w-]+)/', $item->video_url, $match);
                            $videoId = $match[1] ?? null;
                        @endphp

                        <div class="col-md-4 mb-4">
                            <div class="video-box" data-video="{{ $videoId }}" style="cursor:pointer; position:relative;">

                                <img src="{{ $item->thumbnail }}" 
                                    class="img-fluid rounded shadow play-thumb"
                                    style="max-height:200px; object-fit:cover; width:100%;">

                                <div style="
                                    position:absolute;
                                    top:50%;
                                    left:50%;
                                    transform:translate(-50%, -50%);
                                    font-size:50px;
                                    color:white;">
                                    ▶
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section> -->

    <section class="tour py-5">
    <div data-aos="fade-up">
        <div class="container text-center">
            <h2 class="main-title text-white">Meking Steel Factory Tour</h2>

            <div class="row py-3">
                @foreach ($items as $item)
                    @php
                        // Extract YouTube video ID
                        preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([\w-]+)/', $item->video_url, $match);
                        $videoId = $match[1] ?? null;
                        $videoId = $videoId ? explode('?', $videoId)[0] : null; // Remove query string

                        // Determine thumbnail
                        if (!empty($item->thumbnail) && file_exists(public_path($item->thumbnail))) {
                            $thumbnail = asset($item->thumbnail);
                        } elseif ($videoId) {
                            $thumbnail = "https://img.youtube.com/vi/$videoId/maxresdefault.jpg";
                        } else {
                            $thumbnail = asset('uploads/default-thumb.jpg'); // fallback image
                        }
                    @endphp

                    <div class="col-md-4 mb-4">
                        <div class="video-box" data-video="{{ $videoId }}" style="cursor:pointer; position:relative;">
                            <img src="{{ $thumbnail }}" 
                                 class="img-fluid rounded shadow play-thumb"
                                 style="max-height:200px; object-fit:cover; width:100%;">
                            <div style="
                                position:absolute;
                                top:50%;
                                left:50%;
                                transform:translate(-50%, -50%);
                                font-size:50px;
                                color:white;">
                                ▶
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

 
    <div data-aos="fade-up">
        <section class="certificate py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 text-center">
                        <img class="img-fluid " src="{{ asset('uploads/certificates/'.$certificates->image) }}">
                    </div>
                    <div class="col-lg-6 pt-lg-0 pt-4 text-lg-start text-center">
                        <h2 class="main-title"> Certified Execellence in Every Structure</h2>
                        <p class="main-para">At Meking Buildtec India Pvt. Ltd., we take pride in upholding the highest
                            standards of quality, safety, and engineering precision. Our operations are backed by
                            internationally recognized certifications including ISO 9001:2015 for Quality Management and
                            OHSAS 18001 for Occupational Health & Safety.<br> <br>
                            These certifications validate our dedication to delivering safe, reliable, and globally
                            compliant steel structures across diverse industries. They also reflect our continuous
                            efforts
                            in improving processes, reducing risks, and exceeding client expectations — every step of
                            the
                            way.</p>
                        <button class="main-butn"> View Certificate <i class="bi bi-arrow-right fw-bold"></i></button>
                    </div>

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




<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.video-box').forEach(box => {
        box.addEventListener('click', function () {
            let videoId = this.dataset.video;
            if(videoId) {
                this.innerHTML = `
                    <iframe width="100%" height="200" 
                        src="https://www.youtube.com/embed/${videoId}?autoplay=1"
                        frameborder="0"
                        allow="autoplay; encrypted-media"
                        allowfullscreen>
                    </iframe>`;
            }
        });
    });
});
</script>



@endsection