@include('htmlpage.frontent.layout.app')
<div class="theme_slider bg-black">
    <main class="wrapper">
        <!-- Scroll Progress -->

        <!-- Our Mission -->
        <section class="mission pb-0 landingpage" id="funfacts">
            <div class="container">
                <div class="mission_top_part">
                    <div class="section-header text-center">
                        <h3 class="text-white pb-3 text-center">Building the Future of {{ $landing->district }}: Architecture That Inspires</h3>
                        <h6 class="text-gray-600">Looking to transform your residential or commercial space in {{ $landing->district }}?</h6>
                        <p class="text-gray-600">Our team of expert architects is here to bring your vision to life with bespoke designs that blend
aesthetics, functionality, and sustainability. Whether you're dreaming of a luxurious home, a
cutting-edge office, or a vibrant retail space, we tailor our approach to meet your specific needs.</p>
<p class="text-gray-600">With a proven track record of delivering stunning architectural projects across Kerala, we are
committed to excellence in every detail—turning your ideas into remarkable spaces that inspire.</p>
<h6 class="text-gray-600">Ready to get started?</h6>
      
                       <div class="g-text-center--xs pt-3">
                       <a href="#contactForm"><button type="submit" class="btn olive">Book a call</button></a> 
                    </div>
                   
      
                  

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

        <section class="projects packery" style="padding: 0px;" id="funfacts">
            <!-- Section Grid Lines -->
            <ul class="grid_lines d-none d-md-flex justify-content-between">
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
            </ul>

            <div class="grid clearfix">
                <div class="large_font">
                    <h2 class="floating_element text-dark-200 d-flex justify-content-center" data-aos="fade-right"
                        data-aos-duration="1000">Latest</h2>
                </div>
                <div class="grid-sizer"></div>
                @foreach ($projects as $project)
                    <div class="grid-item residences width-35">
                        <div class="thumb">
                            <img class="item_image" src="{{ asset('storage/' . $project->image_path) }}"
                                alt="{{ $project->project_name }}">
                            <div class="inenr-content-absolute">
                                <div class="label-text">
                                    <h6><a href="#">{{ $project->category }}</a></h6>
                                    <h5><a href="{{ route('projectdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($project->url)))]) }}">{{ $project->project_name }}</a></h5>
                                    <div class="details_link"><a href="{{ route('projectdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($project->url)))]) }}"><span class="link_text">View
                                                Details</span> <span class="link_icon"><span class="line"></span>
                                                <span class="circle"></span><span class="dot"></span></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="btn_group w-100 text-center">
                    <button id="load-more" class="btn olive w-100">Show More Project(s)<br>
                        <img src="material/img/projects/arrow2.gif" style="width: 50px;">
                    </button>
                </div>
            </div>
        </section>
        @if($blog->isNotEmpty())
        <section class="blog pt-lg bg-dark-100">
            <div class="large_font">
                <h2 class="floating_element text-dark-200 d-flex justify-content-center">Latest</h2>
            </div>
            <div class="container">
                <div class="section-header text-center has_line">
                    <h2 class="text-white">LATEST BLOGS</h2>
                </div>
                <div class="row" data-aos="fade-up" data-aos-duration="1000">
                    @foreach($blog as $blogItem)
                        <div class="col-lg-4 col-md-6">
                            <div class="blog_post mb-0">
                                <img src="{{ asset('storage/' . $blogItem->image_path) }}"
                                    alt="{{ $blogItem->alt ?? 'Blog Image' }}">
                                <div class="blog_content">
                                    <h2 class="post-count">0{{ $loop->iteration }}</h2>
                                    <div class="meta"><time class="text-olive"
                                            datetime="{{ $blogItem->created_at->format('Y-m-d') }}">
                                            {{ $blogItem->created_at->format('F d, Y') }}
                                        </time></div>
                                    <h5>
                                        <a href="{{ route('blogdetails', str_replace(' ', '-', strtolower($blogItem->url))) }}"
                                            class="text-white">
                                            {{ $blogItem->title }}
                                        </a>
                                    </h5>
                                    <p> {!! \Str::limit(strip_tags($blogItem->description), 150, '...') !!}</p>
                                    <div class="details_link"><a
                                            href="{{ route('blogdetails', str_replace(' ', '-', strtolower($blogItem->url))) }}">
                                            <span class="link_text">View Details</span>
                                            <span class="link_icon">
                                                <span class="line"></span>
                                                <span class="circle">
                                                    <span class="dot"></span>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    
    
        
        <section class="project-list-view bg-dark-200">
            <div class="container">
                <div class="section-header">
                    <h3 class="text-white">
                      Join the Visionaries at Shabeer Saleel Associates: Where Creativity Shapes Tomorrow's
Spaces
                    </h3>
                </div>
                <ol class="project-list jobs">
                    @foreach ($career as $careerItem)
                        <li class="project-list-item">
                            <a href="/career">{{ $careerItem->job_title }}</a>
                        </li>
                    @endforeach
                </ol>
                <div class="details_link"><a href="/career"><span class="link_text">Join Our Team</span> <span
                            class="link_icon"><span class="line"></span> <span class="circle"></span><span
                                class="dot"></span></span></a></div>
            </div>
        </section>
    
        
        <!-- Contact -->
        <section class="contact_us bg-dark-200" id="#contactForm">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-5" data-aos="fade-right" data-aos-duration="1000">
                        <div class="section-header">
                            <h2 class="text-white mb-4">Designing the Future, One Space at a Time</h2>
                            <p class="$gray-600">At Shabeer Saleel Associates, we believe in the power of architecture to transform lives and
redefine spaces. From innovative residential designs to impactful commercial projects, our team
is dedicated to delivering excellence across Kerala. Ready to bring your vision to life? Let’s
create something extraordinary together.</p>
                        </div>
                    </div>
                    <div class="col-lg-6" data-aos="fade-left" data-aos-duration="1000">
                        <div class="home_contact">
                            <form id="contactForm" action="{{ route('save.landingenquiry') }}" method="POST">
                                @csrf
                                <input class="form-control form-control-lg" name="country" id="country" type="hidden"
                                value="{{ $landing->country }}">
                                <input class="form-control form-control-lg" name="state" id="state" type="hidden"
                                value="{{ $landing->state }}">
                                <input class="form-control form-control-lg" name="district" id="district" type="hidden"
                                value="{{ $landing->district }}">
                                <input class="form-control form-control-lg" name="name" id="name" type="text"
                                    placeholder="Your Name*" required aria-label=".form-control-lg example">
                                <input class="form-control form-control-lg" name="phone" id="phone" type="number"
                                    placeholder="Your Phone No" aria-label=".form-control-lg example">
                                <div class="d-flex">
                                    <input class="form-control form-control-lg" name="email" id="email" type="email"
                                        placeholder="Your Email*" required aria-label=".form-control-lg example">
                                    <button type="button" id="sendOtp">Get OTP</button>
                                </div>
                                <input class="form-control form-control-lg mt-3" name="otp" id="otp"
                                    type="text" placeholder="Enter OTP  &nbsp;( Check Your Email )"
                                    aria-label=".form-control-lg example" disabled>
                                <div class="btn_group mt-3">
                                    <button type="submit" id="submitBtn" class="btn olive" disabled>Submit</button>
                                </div>
                                <!-- Notification Area -->
                                <div id="notification" class="mt-3"></div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Section Grid Lines -->
            <ul class="grid_lines d-none d-md-flex justify-content-between">
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
                <li class="grid_line"></li>
            </ul>
        </section>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $('#sendOtp').on('click', function() {
                var email = $('#email').val();
                if (email) {
                    $.ajax({
                        url: "{{ route('send.otp') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            email: email
                        },
                        success: function(response) {
                            $('#notification').html('<div class="alert alert-success">' + response.message +
                                '</div>');
                            $('#otp').removeAttr('disabled');
                        },
                        error: function(xhr) {
                            $('#notification').html('<div class="alert alert-danger">' + xhr.responseJSON
                                .message + '</div>');
                        }
                    });
                } else {
                    $('#notification').html('<div class="alert alert-warning">Please enter an email</div>');
                }
            });

            $('#otp').on('input', function() {
                var otp = $(this).val();
                var email = $('#email').val();
                if (otp.length == 6) {
                    $.ajax({
                        url: "{{ route('verify.otp') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            otp: otp,
                            email: email
                        },
                        success: function(response) {
                            $('#notification').html('<div class="alert alert-success">' + response.message +
                                '</div>');
                            $('#submitBtn').removeAttr('disabled');
                        },
                        error: function(xhr) {
                            $('#notification').html('<div class="alert alert-danger">' + xhr.responseJSON
                                .message + '</div>');
                        }
                    });
                }
            });
        </script>
    </main>

    @include('htmlpage.frontent.layout.footer')