@extends('layouts.webpage.main_two')

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

@section('content')

 <!-- Hero Section -->

    <!-- <section class="hero-section" style="background-image: url('{{ asset('uploads/page_home/'.$home->hero_banner_img) }}');">
        <div class="hero-content">
            <h1 class="fw-bold">{{ $home->hero_title }}</h1>
           /* <a href="{{ $home->hero_button_link }}" class="btn main-butn mt-4">
                {{ $home->hero_button_text }}
            </a> */
        </div>
    </section> -->


    <section class="hero-section">
        <video class="hero-video" autoplay muted loop playsinline>
            <source src="{{ asset('uploads/page_home/' .$home->hero_banner_img) }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="hero-content">
            <h1 class="fw-bold">{{ $home->hero_title }}</h1>
            <!-- <a href="{{ $home->hero_button_link }}" class="btn main-butn mt-4">
                {{ $home->hero_button_text }}
            </a> -->
        </div>
    </section>

        {{-- Built Section --}}
        @if(!empty($home->built_title) || !empty($home->built_description) || !empty($home->built_stats))
        <div data-aos="fade-up">
            <section class="built py-5">
                <div class="container">
                    <div class="row align-items-center">

                        <!-- Left Content -->
                        <div class="col-lg-6 mb-4">
                            <h2 class="main-title">{{ $home->built_title ?? 'Built for quality, Built to last' }}</h2>
                            <p class="main-para mt-3">
                                {{ $home->built_description ?? 'Meking Steel is the trusted partner for businesses and industries seeking reliable pre-engineered and structural steel solutions. With over 100+ projects delivered and 1.8+ million sq. meters built, we combine precision, speed, and safety to deliver unmatched quality backed by a customer-first approach.' }}
                            </p>

                            @if(!empty($home->built_button_link) && !empty($home->built_button_text))
                                <a href="{{ $home->built_button_link }}">
                                    <button class="main-butn">{{ $home->built_button_text }}</button>
                                </a>
                            @else
                                <a href="#"><button class="main-butn">Know More</button></a>
                            @endif
                        </div>

                        <!-- Right Stats -->
                <div class="col-lg-6">
                            @php
                                $builtStats = is_string($home->built_stats)
                                    ? json_decode($home->built_stats, true)
                                    : $home->built_stats;
                            @endphp

                            @if(!empty($builtStats) && is_array($builtStats))
                                <div class="row g-4">
                                    @foreach($builtStats as $index => $stat)
                                        <div class="col-6">
                                            <div class="stat-card text-center">
                                                <div class="stat-icon">
                                                    <img src="{{ asset('uploads/page_home/' . ($stat['icon'] ?? 'b'.($index+1).'.svg')) }}" alt="icon">
                                                </div>
                                                <h4>{{ $stat['title'] ?? 'N/A' }}</h4>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </section>
        </div>
        @endif


        {{--  CEO Section --}}
        <div data-aos="fade-up">
            <section class="ceo py-4">
                <div class="container">
                    <div class="row align-items-center">

                        {{-- CEO Text Content --}}
                        <div class="col-lg-6">
                            <h2 class="main-title mb-4">
                                {{ $home->ceo_title ?? 'From the desk of CEO' }}
                            </h2>

                            <p class="main-para">
                                {{ $home->ceo_message ?? 
                                    "Meking Buildtec India Pvt. Ltd. has developed robust presence in the Indian market within a short time span of its establishment. I dedicate this swift achievement to my entire team that has been behind me throughout and it continues to boost my inspiration. In the past few years, the concept of ‘pre engineered buildings’ has found resonance and we have been in the forefront by offering the custom tailored solutions for the enterprising firms. I do believe that engineering alone cannot be the sole determinant when it comes to structural framing tasks. However, it is the ability to match client’s demands along the dimensions of applicative value, budget, precision and finesse so that a matching fabrication is produced. Timeline is yet another factor that needs to be taken care of! We have performed very fruitfully along all these dimensions so that complete satisfaction is achieved. Meking Buildtec India is growing continuously while riding on its professionalism and tech expertise that is now unmatched. Success of Meking Buildtec India Pvt. Ltd. is attributed to all the HR echelons in the Company and they continue to excel in their endeavors to set new standards and benchmarks. We put great emphasis on ensuring customization for every project. This is attempted through dynamic analyses and consultation with the client. Our engineers and finance teams work cohesively to find out the best and matching fabrication plan. This keeps cost less as wastages are eliminated."
                                }}
                            </p>

                            <div class="mr">
                                <h5>{{ $home->ceo_name ?? 'MR. SUJIT PRASAD' }}</h5>
                                <h6>{{ $home->ceo_designation ?? 'CEO & Managing Director' }}</h6>
                            </div>
                        </div>

                        {{-- CEO Image --}}
                        <div class="col-lg-6 text-end">
                            @if(!empty($home->ceo_image))
                                <img class="w-100 rounded shadow" 
                                    src="{{ asset('uploads/page_home/' . $home->ceo_image) }}" 
                                    alt="{{ $home->ceo_name ?? 'CEO Image' }}" 
                                    style="max-width: 480px; border-radius: 15px;">
                            @else
                                <img class="w-100 rounded shadow" 
                                    src="{{ asset('images/ceo.svg') }}" 
                                    alt="Default CEO Image" 
                                    style="max-width: 480px;">
                            @endif
                        </div>

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



      {{-- Our Mission Section --}}
        <div data-aos="fade-up">
            <section class="mission py-5">
                <div class="container">
                    <div class="row g-4 align-items-stretch">

                        @foreach($mission as $m)
                            @php
                                // Decode mission_vision_items safely
                                $missionItems = $m->mission_vision_items;
                                if (is_string($missionItems)) {
                                    $decoded = json_decode($missionItems, true);
                                    $missionItems = is_array($decoded) ? $decoded : [];
                                }
                            @endphp

                            @if(!empty($missionItems))
                                @foreach($missionItems as $item)
                                    {{-- Text Card --}}
                                    <div class="col-lg-4 col-md-6">
                                        <div class="info-card ">
                                            <h4 class="fw-bold">{{ $item['title'] ?? '' }}</h4>
                                            <p class="text-muted">{{ $item['description'] ?? '' }}</p>
                                        </div>
                                    </div>

                                    {{-- Image Card --}}
                                    @if(!empty($item['image']))
                                        <div class="col-lg-4 col-md-6 align-self-center">
                                            <div class="info-img text-center">
                                                <img src="{{ asset('uploads/page_home/' . $item['image']) }}" 
                                                    alt="{{ $item['title'] ?? 'Mission Image' }}" 
                                                    class="img-fluid rounded" >
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            @endif
                        @endforeach

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



        
        <section class="choose-section py-4" style="background: none;">
            <div data-aos="fade-up">
                <div class="container">
                    <!-- Section Heading -->
                    <div class="row text-center mb-5">
                        <div class="col-lg-12">
                            <h2 class="main-title mb-2">Why Choose Us</h2>
                            <p class="main-para">
                                Delivering reliable, custom-engineered steel buildings with unmatched quality,
                                timely execution, and expert support—every step of the way.
                            </p>
                        </div>
                    </div>

                    <div class="row align-items-center">
                        <!-- Left Content (Iterate multiple items) -->
                        <div class="col-lg-6">
                            @if(!empty($chooseItems) && count($chooseItems) > 0)
                                @foreach($chooseItems as $item)
                                    <div class="icon-box mb-4 d-flex align-items-start">
                                        <div class="icon text-white bg-dark rounded-circle p-3 me-3">
                                             <img src="{{ asset('uploads/choose_meking/' . ($item->icon ?? '')) }}" class="wc-icon" alt="">
                                        </div>
                                        <div>      
                                            <h5>{{ $item->title ?? '' }}</h5>
                                            <p>{{ $item->desc ?? '' }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <p>No features available at the moment.</p>
                            @endif
                        </div>

                        <!-- Right Image -->
                        <div class="col-lg-6 choose-img text-center">
                            <img src="{{ asset('uploads/choose_meking/' . ($chooseImage->image ?? 'default.png')) }}" 
                                alt="Factory Image" class="img-fluid shadow rounded">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        

        <div data-aos="fade-up">
            <section class="projects-section text-center py-5">
                <div class="container">

                    <!-- Section Title -->
                    <div class="mb-4">
                        <h2 class="main-title">Latest Projects</h2>
                        <p class="main-para">
                            Meking Steel delivers a landmark dome structure using advanced space frame and sustainable
                            engineering solutions.
                        </p>
                        <a href="#" class="btn btn-link fw-bold text-dark">
                            View All <i class="bi bi-arrow-right-circle-fill"></i>
                        </a>
                    </div>

                    <!-- Dynamic Project Cards -->
                    <div class="row g-4">
                        @foreach($projects as $proj)
                            <div class="col-lg-4 col-md-6">
                                <div class="card shadow-sm position-relative">
                                    
                                    {{-- Location Badge (optional, if you have a location field) --}}
                                    @if(!empty($proj->location))
                                        <div class="location-badge">
                                            <i class="bi bi-geo-alt-fill"></i> {{ $proj->location }}
                                        </div>
                                    @endif

                                    {{-- Project Image --}}
                                    <img src="{{ asset('uploads/projects/featured/'.$proj->featured_img) }}" class="card-img-top" alt="{{ $proj->title }}">

                                    {{-- Card Content --}}
                                    <div class="card-body text-start">
                                        <h5 class="card-title">{{ $proj->title }}</h5>
                                        <p class="card-text">{{ $proj->short_description }}</p>
                                        <a href="{{ route('p.slug', $proj->id) }}" class="discover-link">
                                            <i class="bi bi-arrow-right-circle-fill"></i> DISCOVER MORE
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

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



        <div data-aos="fade-up">
            <section class="client text-center py-5">
                <h2 class="main-title">Our Clients</h2>

                <div class="owl-carousel owl-theme our py-5">
                    @foreach($clients as $client)
                        <div class="item">
                            <img src="{{ asset('uploads/clients/' . $client->client_logo) }}" alt="{{ $client->client_name }}" class="img-fluid" style="max-height: 100px; object-fit: contain;">         
                        </div>
                    @endforeach
                </div>

                <div class="meking pt-md-5 pt-0 px-2">
                    <h3>MEKING INDIA is ISO 9001 and OHSAS 18001 Certified</h3>
                    <p class="main-para pb-3">
                        Steel G+3 building for a mall over existing RCC building was challenging.
                        Meking India team wears yet another feather on the cap. 
                        We plan to move vertical and give clients robust and economical solutions.
                    </p>
                    <a href="#" class="main-butn">
                        Download Certificate <i class="bi bi-arrow-right-circle-fill ms-2"></i>
                    </a>
                </div>
            </section>
        </div>

        
        <div data-aos="fade-up">
            <section class="download py-4 px-3">
                <div class="container">
                    <div class="down-inner row align-items-end">
                        <div class="col-md-6 p-5 px-md-5 px-4 p-3 pe-md-0">
                            <h4>Download the Meking Buildtec App Today </h4>
                            <p class="main-para pb-4">Track your project, view estimates, and stay connected with our team —
                                all
                                from
                                your phone.</p>
                            <h5>Available now on Android and iOS.</h5>
                            <div class="playstore d-flex gap-2">
                                <a href="#"><img src="{{ asset('assets/img/googleplay.svg') }}" alt="Hand Icon"></a>
                                <a href="#"><img src="{{ asset('assets/img/apple.svg') }}"></a>
                            </div>
                        </div>
                        <div class="col-md-6 text-md-center text-center">
                            <img src="{{ asset('assets/img/hand.svg') }}">
                        </div>
                    </div>
                </div>
            </section>
        </div>


        <div data-aos="fade-up">
            <section class="py-5 blog">
                <div class="container">
                    <div class="text-center mb-5">
                        <h2 class="main-title">Our Latest Blogs</h2>
                    </div>
                    <div class="row g-4">
                        @foreach($blogs as $blog)
                            <div class="col-lg-4 col-md-6">
                                <div class="blog-card h-100">
                                    <img src="{{ asset('uploads/blogs/' .$blog->featured_img) }}" class="img-fluid" alt="{{ $blog->title }}">
                                    <div class="py-3">
                                        <div class="blog-meta">
                                            By Admin : {{ $blog->author->name ?? 'Admin' }}
                                            &nbsp;&nbsp; | &nbsp;&nbsp;
                                            Date : {{ \Carbon\Carbon::parse($blog->published_date)->format('d F, Y') }}
                                        </div>
                                        <h5>{{ $blog->title }}</h5>
                                        <p>{{ Str::limit($blog->short_description, 100) }}</p>
                                        <a href="{{ route('blog.slug', $blog->slug) }}" class="read-more">
                                            Read More <i class="bi bi-arrow-right-circle"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        </div>




@endsection


<script>
document.getElementById('add-stat').addEventListener('click', function() {
    const wrapper = document.getElementById('stats-wrapper');
    const div = document.createElement('div');
    div.classList.add('input-group', 'mb-2', 'stat-input');
    div.innerHTML = `
        <input type="text" name="built_stats[]" class="form-control" placeholder="Enter stat">
        <button type="button" class="btn btn-danger remove-stat">X</button>
    `;
    wrapper.appendChild(div);
});

// Remove stat
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-stat')) {
        e.target.closest('.stat-input').remove();
    }
});


$(document).ready(function () {
    $(".our").owlCarousel({
        loop: true,
        margin: 15,
        nav: false,
        dots: false,
        autoplay: true,
        autoplayTimeout: 3000,
        autoplayHoverPause: true,
        responsive: {
            0: { items: 1 },
            768: { items: 3 },
            1000: { items: 5 }
        },
        navText: [
            '<i class="bi bi-chevron-left"></i>',
            '<i class="bi bi-chevron-right"></i>'
        ],
    });
});
</script>