@extends('layouts.main-app')

@section('title', 'Services')

@section('content')

    @include('layouts.navbar')

    <div class="relative h-[20rem]">
        <div class="relative z-50 py-20 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 text-center my-14">
            <div class="flex justify-center">
                <p class="">
                    At Primover Consultancy Services, Inc. (PCSI), we are committed to upholding our company philosophy,
                    where all our clients receive top priority. Our services begin by understanding your business processes
                    and goals, serving as the foundation for developing customized solutions through our consulting and
                    solutions framework, tailored to meet your specific requirements.
                </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