@extends('layouts.website')

@section('website')

<style>
    
    
    .bg_service::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display
In combination with 'float' and 'position', determines the type of box or boxes that are generated for an element.
Learn more
Don't show
: block;
    background: #084298b5;
    z-index: 1;
}
</style>

    <div class="header_area">
        <div class="container-lg">

            <!-- Start Navigation -->



            <header class="d-flex flex-wrap justify-content-center py-4 position-relative">
                <a href="/" class="d-flex align-items-center mb-0 me-auto text-dark text-decoration-none">
                    <img id="headerImage" src="{{ asset('uploads/logo/' . $generalSetting->logo) }}"
                        style="width: 80px; height: auto;" alt="stitbd Logo">
                </a>

                <ul class="nav nav-pills d-none d-lg-flex">



                    <li class="nav-item"><a href="javascript:void(0);" class="nav-link scroll-to"
                            data-target="#services">Service</a></li>
                    <li class="nav-item"><a href="javascript:void(0);" class="nav-link scroll-to"
                            data-target="#industry">Industry</a></li>
                    <li class="nav-item"><a href="javascript:void(0);" class="nav-link scroll-to"
                            data-target="#clients">Clients</a></li>
                    <li class="nav-item"><a href="javascript:void(0);" class="nav-link scroll-to"
                            data-target="#contact">Contact Us</a></li>

                </ul>

                <div class="d-block d-lg-none menu_call">
                    <div class="menu_tray ms-auto"></div>
                    <div class="menu_tray"></div>
                    <div class="menu_tray ms-auto"></div>
                </div>


            </header>





        </div>

    </div>
    <div class="main-container py_100 bg_service position-relative"
        style="background: url('{{ asset('uploads/banners/' . $banner->image) }}')">
        <div class="container">
            <div class="justify-content-center position-relative row text-white" style="z-index: 1;">
                <div class="col-md-9 text-center">
                    <h1 class="fw-bold mb-2 page-title text-center">{{ $banner->title }}</h1>
                    <h2 class="fs-3 fw-bold mb-4 text-center">{{ $banner->subtitle }}
                    </h2>
                    <p class="fs-17">{{ $banner->description }}</p>
                </div>
            </div>
        </div>
    </div>
    
    
    <!-- Platform Start-->
    <div class="py_100" id="services">
        <div class="container-md">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mb-5">
                        <h2 class="fs-45 fw-bold mb-4 wow fadeInUp">{{ $servicesInfo->title }}</h2>
                        <p class="wow fadeInUp sub_text mx-5" data-wow-delay="0.2s">{{ $servicesInfo->description }}</p>
                    </div>
                </div>
            </div>
            <div class="row g-3 mb-5">
                <div class="col-12">
                    <h2 class="fw-bold text-style">Our Services</h2>
                </div>
                @foreach ($projects as $item)
                    <div class="col-xl-4 col-md-6">
                        <a href="{{ route('view-project', $item->slug) }}" target="_blank"
                            class="border-0 card px-5 py-5 wow fadeIn bg_grad bgChangeOnHover h-100 product_link text-center"
                            data-wow-delay="0.4s">
                            <div class="d-block mb-4 position-relative">
                                <img src="{{ asset('uploads/logo/' . $item->logo) }}" class="img-fluid"
                                    alt="Offshore Software Development" />
                            </div>
                            <div class="card-body p-0 position-relative">
                                <h5 class="card-title mb-3 fw_600">{{ $item->name }}</h5>
                                <p class="card-text">{{ $item->description }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach



            </div>


        </div>
    </div>

    <!-- Service Start-->
    <div id="industry" class="service bg_grad py_100 position-relative">
        <div class="container-md">
            <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-8 col-md-10">
                    <div class="text-center mb-5">
                        <h2 class="fs-1 fw-bold wow fadeInUp mb-4">Industry <span class="animate-text">We Serve</span></h2>
                        <p class="wow fadeInUp" data-wow-delay="0.2s">Bridge Your Business with the Virtual World</p>
                    </div>
                </div>
            </div>
            <div class="row g-3">
                @foreach ($industries as $item)
                    <div class="col-xl-2 col-md-4 col-sm-6">
                        <div class="bg-white d-block py-4 text-center wow fadeIn product_link bgChangeOnHover">
                            <img src="{{ asset('uploads/industry/' . $item->icon) }}" class="position-relative"
                                alt="automotive">
                            <div class="mt-3 fs-17 position-relative">{{ $item->name }}</div>
                        </div>
                    </div>
                @endforeach


            </div>
        </div>
    </div>
    <div class="py_100" id="clients">
        <div class="container-md">
            <div class="row mb_100 justify-content-center">
                <div class="col-xl-6 col-lg-8 col-md-10">
                    <div class="text-center mb-4">
                        <h4 class="fs-17">STITBD-Every it Solustion is Here</h4>
                        <h2 class="fs-1 fw-bold mb-3">Our <span class="text-stitbd animate-text">Global & Local Clients</span></h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <img src="{{ asset('assets/frontend/img/map-stitbd.png') }}" class="img-fluid" alt="stitbd Map">
                </div>
            </div>

            <div class="align-items-center justify-content-center row text-center clients_logo">
                @foreach ($client as $item)
                    <div class="align-items-center col-xl-2 col-sm-4 col-6 d-flex logo_box justify-content-center">
                        @if ($item->url)
                            <a href="{{ $item->url }}" target="_blank" class="d-block">
                                <img src="{{ asset('uploads/client/' . $item->icon) }}" class="client_logo transition"
                                    alt="Web Logo ILO">
                            </a>
                        @else
                            <div class="d-block">
                                <img src="{{ asset('uploads/client/' . $item->icon) }}" class="client_logo transition"
                                    alt="Web Logo ILO">
                            </div>
                        @endif

                    </div>
                @endforeach


            </div>


        </div>
    </div>
    
    
    
<section id="contact" class="custom-work-section py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center mb-5">
                <h2 class="display-5 fw-bold mb-3">For Custom Work</h2>
                <div class="highlight-box p-3 bg-light-green rounded mb-3 d-inline-block">
                    <p class="fs-5 fw-bold text-success mb-0">Not satisfied with our combo packages? No worries!</p>
                </div>
                <p class="lead text-muted">We offer complete customization - our developers will build your dream Human Resource Management Software from scratch, exactly to your specifications.</p>
            </div>
        </div>
        
        <div class="row g-4 justify-content-center">
            <!-- Contact Form Column -->
            <div class="col-lg-7">
                <div class="contact-form-card p-4 p-md-5 shadow-lg rounded-4">
                    <h3 class="mb-4 text-center">Request Custom Solution</h3>
                    <form id="dataCreateModalForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div id="successMessage" class="alert alert-success" style="display: none;"></div>
                        
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" name="name" class="form-control" id="nameInput" placeholder="Your Name" required>
                                    <label for="nameInput">Name <span class="text-danger">*</span></label>
                                    <div class="invalid-feedback name-error">Please provide your name</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address" required>
                                    <label for="emailInput">Email Address <span class="text-danger">*</span></label>
                                    <div class="invalid-feedback email-error">Please provide a valid email</div>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="tel" name="phone" class="form-control" id="phoneInput" placeholder="Phone Number">
                                    <label for="phoneInput">Phone Number</label>
                                    <div class="invalid-feedback phone-error"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" name="country" class="form-control" id="countryInput" placeholder="Country">
                                    <label for="countryInput">Country</label>
                                    <div class="invalid-feedback country-error"></div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="form-floating">
                                <textarea name="requirement" class="form-control" id="requirementsInput" placeholder="Your Requirements" style="height: 120px"></textarea>
                                <label for="requirementsInput">Please describe your requirements</label>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="fileInput" class="form-label">Attach Files (if any)</label>
                            <input class="form-control" name="attachment" type="file" id="fileInput">
                            <div class="form-text">Max file size: 5MB</div>
                            <div class="invalid-feedback attachment-error"></div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-success btn-lg py-3">
                                <i class="fas fa-paper-plane me-2"></i> SUBMIT REQUEST
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Contact Info Column -->
            <div class="col-lg-5">
                <div class="contact-info-card p-4 p-md-5 shadow-lg rounded-4 h-100">
                    <div class="contact-header mb-4">
                        <h3 class="text-center">Get In Touch</h3>
                        <p class="text-center text-muted">Reach out for custom projects and other inquiries - we're happy to help!</p>
                    </div>
                    
                    <div class="contact-details">
                        <ul class="list-unstyled">
                            <li class="mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="contact-icon bg-success text-white rounded-circle p-3 me-3">
                                        <i class="fas fa-envelope fa-lg"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Email</h5>
                                        <a href="mailto:{{ $contact->email }}" class="text-decoration-none">{{ $contact->email }}</a>
                                    </div>
                                </div>
                            </li>
                            
                            <li class="mb-4">
                                <div class="d-flex align-items-start">
                                    <div class="contact-icon bg-success text-white rounded-circle p-3 me-3">
                                        <i class="fab fa-whatsapp fa-lg"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">WhatsApp</h5>
                                        <p class="mb-1">{{ $contact->whatsapp_no }}</p>
                                        <p class="mb-0">{{ $contact->secondary_whatsapp_no }}</p>
                                    </div>
                                </div>
                            </li>
                            
                            <li>
                                <div class="d-flex align-items-start">
                                    <div class="contact-icon bg-success text-white rounded-circle p-3 me-3">
                                        <i class="fab fa-telegram fa-lg"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Telegram</h5>
                                        <p class="mb-0">{{ $contact->telegram_no }}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .custom-work-section {
        background-color: #f8f9fa;
        background-image: linear-gradient(to bottom, rgba(248, 249, 250, 0.9), rgba(248, 249, 250, 0.9)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    
    .highlight-box {
        background-color: rgba(40, 167, 69, 0.1);
        border-left: 4px solid #0072BC;
    }
    
    .contact-form-card {
        background-color: #fff;
        border-top: 5px solid #0072BC;
    }
    .text-success {
    color: #0072BC !important;
    }
    .bg-success {
    background-color: #0072BC !important;
}
    
    .contact-info-card {
        background-color: #fff;
        border-top: 5px solid #0072BC;
    }
    
    .contact-icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .form-control, .form-select {
        border-radius: 0.5rem;
        padding: 1rem;
    }
    
    .form-floating>label {
        padding: 1rem;
    }
    
    @media (max-width: 768px) {
        .contact-form-card, .contact-info-card {
            padding: 2rem;
        }
        
        .display-5 {
            font-size: 2rem;
        }
    }
    
    @media (max-width: 576px) {
        .contact-form-card, .contact-info-card {
            padding: 1.5rem;
        }
    }
</style>
    
    
    
    <footer class="position-relative">
        {{-- <div class="footer_shape">
            <img src="{{ asset('assets/frontend/img/footer-bg.webp') }}" class="w-100" alt="">
        </div> --}}
        <div class="footer_wrapper">
            <div class="container-md">


                <div class="row py-5 d-none d-xl-flex">
                    <div class="col-md-3">
                        <ul class="nav flex-column">
                            <li class="nav-item mb-4">
                                <span class="footer-title text-white">Disclaimer</span>
                            </li>
                            <li>
                                <p class="text-muted">© 2026. All Rights Reserved. <a
                                        href=""
                                        target="_bank">Nijhum ICT Limited</a></p>
                                <p class="text-muted">All software, applications, themes, and plugins provided here are the
                                    intellectual property of our company.</p>

                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-8 offset-lg-1">
                        <div class="row">
                            <div class="col-md-4">
                                <ul class="nav flex-column">
                                    <li class="nav-item mb-4">
                                        <span class="footer-title text-white">Useful Links</span>
                                    </li>
                                    <li class="nav-item">
                                        <a href="javascript:void(0);" data-target="#services"
                                            class="text-decoration-none text-muted lh-30 scroll-to"><span
                                                class="arrow me-2">→</span>Services</a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="javascript:void(0);" data-target="#industry"
                                            class="text-decoration-none text-muted lh-30 scroll-to"><span
                                                class="arrow me-2">→</span>Industry</a>
                                    </li>


                                    <li class="nav-item"><a href="javascript:void(0);" data-target="#clients"
                                            class="text-decoration-none text-muted lh-30 scroll-to"><span
                                                class="arrow me-2">→</span> Clients</a></li>


                                </ul>
                            </div>
                            @php

                            @endphp
                            <div class="col-md-4">
                                <ul class="nav flex-column">
                                    <li class="nav-item mb-4">
                                        <span class="footer-title text-white">Services</span>
                                    </li>
                                    @foreach ($projects->take(3) as $item)
                                        <li class="nav-item">
                                            <a href="{{ route('view-project', $item->slug) }}" target="_blank"
                                                class="text-decoration-none text-muted lh-30">
                                                <span class="arrow me-2">→</span>{{ $item->name }}
                                            </a>
                                        </li>
                                    @endforeach


                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul class="nav flex-column">
                                    <li class="nav-item mb-4">
                                        <span class="footer-title text-white">Support</span>
                                    </li>
                                    <li class="nav-item">
                                        <a href="javascript:void(0);" data-target="#contact"
                                            class="text-decoration-none text-muted lh-30 scroll-to"><span
                                                class="arrow me-2">→</span>Contact Us</a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#dataCreateModalForm").on("submit", function(e) {

                e.preventDefault(); // Prevent default form submission

                let formData = new FormData(this);

                $.ajax({
                    url: "{{ route('contact.message.store') }}", // Laravel route for storing data
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $(".invalid-feedback").text("").hide(); // Clear previous errors
                    },
                    success: function(response) {
                        if (response.success) {
                            $("#successMessage").text(response.message)
                                .show(); // Show success message

                            // Reset form after successful submission
                            $("#dataCreateModalForm")[0].reset();

                            // Auto-hide success message after 3 seconds
                            setTimeout(function() {
                                $("#successMessage").fadeOut();
                            }, 3000);
                        }
                    },
                    error: function(xhr) {
                        hideLoading();
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;

                            // Display validation errors

                            if (errors.email) {
                                $(".email-error").text(errors.email[0]).show();
                            }


                            // Auto-hide error messages after 3 seconds
                            setTimeout(function() {
                                $(".invalid-feedback").fadeOut();
                            }, 3000);
                        }
                    }
                });
            });
        });
    </script>
@endsection