@extends('layouts.main-app')

@section('title', 'Services')

@section('content')

    @include('layouts.navbar')

    <div class="relative ">
        <div class="relative z-50 py-12 text-center">
            <h1 class="text-4xl font-bold text-black">OUR SERVICES </h1>
        </div>
    </div>





    <div class="container relative max-w-screen-xl mx-auto">
        <div class="flex flex-col justify-center space-y-8  my-4">
            <div class="flex justify-center">
                <p class="">
                    <strong class="text-2xl">Staff Augmentation</strong>
                    <br>
                    This approach involves hiring temporary employees to address skill gaps or boost capacity for a limited time. It's an effective option when you need to swiftly respond to changing demands or circumstances. Staff augmentation can be a cost-effective solution for both short-term and long-term requirements, while also allowing you to maintain control over the project.
                    <br>
                    <br>
                    <strong class="text-2xl">Managed Service</strong>       
                    <br>
                    This approach involves outsourcing IT functions to a third-party vendor who offers the necessary expertise and resources. It's an ideal option when you want to delegate the entire project or manage operations. Managed services can be more cost-effective over time, with the provider taking full responsibility for service delivery.

                </p>
            </div>
        </div>


    </div>

    <div class="container relative max-w-screen-xl mx-auto">
        <div class="my-12">
            <h1 class="text-3xl font-bold">
                IN THE IT FIELD WE PROVIDE:
            </h1>
        </div>
    </div>

    <div class="container ml-auto max-w-screen-2xl">
        <div class="my-8 overflow-hidden swiper-container">
            <div class="swiper-wrapper">
                @foreach ($servicesByCategory[3] as $service)
                    <div class="swiper-slide">
                        <div class="relative flex">
                            <div class="absolute right-0 z-0 h-full w-[10rem]">
                                <div class="bg-[#42684f] h-full rounded-xl text-center font-bold text-white text-4xl">
                                    01 <!-- Adjust this if you want dynamic numbering -->
                                </div>
                            </div>
                            <div class="card-services relative z-50 p-4 mx-8 my-12 bg-white border-2 rounded-xl">
                                <div class="flex items-center gap-4">
                                    <div>
                                        <img src="{{ asset('images/System-Dev.png') }}" alt="">
                                    </div>
                                    <div>
                                        <h1 class="text-xl font-bold text-center">{{ $service->name }}</h1>
                                    </div>
                                </div>
                                <p class="py-8 italic">
                                    {{ $service->description }}
                                </p>
                                <a href="{{ route('services.show', $service->id) }}"
                                    class="card-services-button text-center">Learn
                                    More</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="flex items-end my-2 ">
                <div id="swiper-button-prev">
                    <button><img src="{{ asset('images/btn-left.png') }}" alt=""></button>
                </div>
                <div id="swiper-button-next">
                    <button><img src="{{ asset('images/btn-right.png') }}" alt=""></button>
                </div>
            </div>
        </div>
    </div>


    <div class="container relative max-w-screen-xl mx-auto">
        <h1 class="text-3xl font-bold">
            IN THE NON-IT FIELD WE PROVIDE:
        </h1>
    </div>

    <div class="ml-auto max-w-screen-2xl ">
        <div class="my-8 overflow-hidden swiper-container">
            <div class="swiper-wrapper">
                @foreach ($servicesByCategory[2] as $service)
                    <div class="swiper-slide">
                        <div class="relative flex">
                            <div class="absolute right-0 z-0 h-full w-[10rem]">
                                <div class="bg-[#42684f] h-full rounded-xl text-center font-bold text-white text-4xl">
                                    01 <!-- Adjust this if you want dynamic numbering -->
                                </div>
                            </div>
                            <div class="card-services relative z-50 p-4 mx-8 my-12 bg-white border-2 rounded-xl">
                                <div class="flex items-center gap-4">
                                    <div>
                                        <img src="{{ asset('images/System-Dev.png') }}" alt="">
                                    </div>
                                    <div>
                                        <h1 class="text-xl font-bold text-center">{{ $service->name }}</h1>
                                    </div>
                                </div>
                                <p class="py-8 italic">
                                    {{ $service->description }}
                                </p>
                                <a href="{{ route('services.show', $service->id) }}"
                                    class="card-services-button text-center">Learn
                                    More</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="flex items-end my-2 ">
                <div id="swiper-button-prev">
                    <button><img src="{{ asset('images/btn-left.png') }}" alt=""></button>
                </div>
                <div id="swiper-button-next">
                    <button><img src="{{ asset('images/btn-right.png') }}" alt=""></button>
                </div>
            </div>
        </div>
    </div>



    <!--<div class="container max-w-screen-xl mx-auto my-12">-->
    <!--    <h1 class="font-bold text-center text-[#42684f] text-xl">Our partners</h1>-->
    <!--    @include('layouts.partners')-->
    <!--</div>-->


    <style>
        /* From Uiverse.io by alexruix */
        .card-services {
            width: 30rem;
            height: 17rem;
            border-radius: 20px;
            background: #f5f5f5;
            position: relative;
            padding: 1.8rem;
            border: 2px solid #c3c6ce;
            transition: 0.5s ease-out;
            overflow: visible;
        }

        .card-services-details {
            color: black;
            height: 100%;
            gap: .5em;
            display: grid;
            place-content: center;
        }

        .card-services-button {
            transform: translate(-50%, 125%);
            width: 60%;
            border-radius: 1rem;
            border: none;
            background-color: #42684f;
            color: #fff;
            font-size: 1rem;
            padding: .5rem 1rem;
            position: absolute;
            left: 50%;
            bottom: 0;
            opacity: 0;
            transition: 0.3s ease-out;
        }

        .card-services .text-body {
            color: rgb(134, 134, 134);
        }

        /*Text*/
        .card-services .text-title {
            font-size: 1.5em;
            font-weight: bold;
        }

        /*Hover*/
        .card-services:hover {
            border-color: #42684f;
            box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
        }

        .card-services:hover .card-services-button {
            transform: translate(-50%, 50%);
            opacity: 1;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const swiper = new Swiper('.swiper-container', {
                loop: true,
                slidesPerView: 1, // Shows part of the previous and next slides
                spaceBetween: 0, // Adjust this value to control the amount of peek
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '#swiper-button-next',
                    prevEl: '#swiper-button-prev',
                },
                breakpoints: {
                    // When the viewport width is <= 640px (small screens)
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    // When the viewport width is <= 768px (tablets)
                    768: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    // When the viewport width is <= 1024px (small desktops)
                    1024: {
                        slidesPerView: 2,
                        spaceBetween: 0,
                    },

                    1440: {
                        slidesPerView: 3.5,
                        spaceBetween: 0,
                    },
                },
            });
        });
    </script>

    @include('layouts.footer')
@endsection