@extends('layouts.app')

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

@section('content')

    <div class="text-center mb-3">
        <a href="{{ route('quotation.index') }}" class="main-butn mb-3 btn-sm">Request a Quotation</a>
    </div>

    <!-- Mobile Menu -->
    <div class="tooge-res d-lg-none d-block">
        <button class="btn toggle-buton" type="button" data-bs-toggle="offcanvas"
            style="background-color: var(--theme-color1);"
            data-bs-target="#offcanvasWithBothOptions"
            aria-controls="offcanvasWithBothOptions">
            <i class="bi bi-list text-white"></i>
        </button>

        <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions"
            aria-labelledby="offcanvasWithBothOptionsLabel">
            <div class="offcanvas-header justify-content-end"></div>
            <div class="offcanvas-body">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link active" href="{{ url('/') }}">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('about') }}">About Us</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('services') }}">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('products') }}">Products</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('projects') }}">Project</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('safety') }}">Safety</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('gallery') }}">Gallery</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('clients') }}">Clients</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('career') }}">Career</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('blogs') }}">Blogs</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url('contact') }}">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>



{{-- 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>


    {{-- 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 --}}
<section class="ceo-section py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">

           {{-- CEO Content --}}
            <div class="col-lg-8 col-md-7">
                @if(!empty($home->ceo_title))
                    <h2 class="fw-bold mb-3">{{ $home->ceo_title }}</h2>
                @endif

                @if(!empty($home->ceo_message))
                    <p class="mb-4">{{ $home->ceo_message }}</p>
                @endif

                @if(!empty($home->ceo_name))
                    <h5 class="mb-0">{{ $home->ceo_name }}</h5>
                    <p class="text-muted">{{ $home->ceo_designation ?? '' }}</p>
                @endif
            </div>

            {{-- CEO Image --}}
            <div class="col-lg-4 col-md-5 text-center mb-4 mb-md-0">
                @if(!empty($home->ceo_image))
                    <img src="{{ asset('uploads/page_home/' .$home->ceo_image) }}"  alt="{{ $home->ceo_name ?? 'CEO Image' }}" class="img-fluid rounded shadow" style="max-width: 280px; border-radius: 15px;">        
                @else
                    <img src="{{ asset('images/default_ceo.png') }}" 
                         alt="Default CEO" 
                         class="img-fluid rounded shadow"
                         style="max-width: 280px;">
                @endif
            </div>

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


{{-- 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
                        $missionItems = json_decode($m->mission_vision_items, true);
                    @endphp

                    @if(!empty($missionItems))
                        @foreach($missionItems as $item)

                          <!-- Text Block -->
                            <div class="col-lg-4 col-md-6">
                                <div class="info-card p-3 border rounded shadow-sm h-100">
                                    <h4 class="fw-bold">{{ $item['title'] ?? '' }}</h4>
                                    <p>{{ $item['description'] ?? '' }}</p>
                                </div>
                            </div>
 

                            @if(!empty($item['image']))
                                <!-- Image Block -->
                                <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' }}" 
                                             style="width:100%;max-width:300px;border-radius:10px;">
                                    </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">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">
                                    <i class="{{ $item->icon ?? 'bi bi-star' }}"></i>
                                </div>
                                <div>
                                    <h5>{{ $item->title ?? 'Quality You Can Trust' }}</h5>
                                    <p>{{ $item->desc ?? 'We deliver top-notch service with precision and dedication.' }}</p>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p>No features available at the moment.</p>
                    @endif
                </div>

                <!-- Right Image -->
                <div class="col-lg-4 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('page_projects.show', $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="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( $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.show', $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();
    }
});
</script>