@extends('layouts.app')
@section('content')
<!-- What we do Start -->
@if(count($whatWeDos)>0)
@php
$whatwedo_arrays1 = $whatWeDos->take(6)->all();
$whatwedo_arrays2 = $whatWeDos->slice(6)->values()->all();
@endphp
<div class="container-fluid py-5 wow fadeInUp" id="what-we-do" data-wow-delay="0.1s">
    <div class="container py-5">
        <div class="row g-5">
            <div class="col-lg-7">
                <div class="section-title position-relative pb-3 mb-5">
                    <h5 class="fw-bold text-primary text-uppercase">What we do</h5>
                    <p class="mb-0 h1">Empowering Business</p>
                </div>
                <p class="mb-4">We translate business idea in to better software solutions.</p>
                <div class="row g-0 mb-3">
                    <div class="col-sm-6 wow zoomIn" data-wow-delay="0.2s">
                        @foreach($whatwedo_arrays1 as $whatwedo_arrayval)
                        <h5 class="d-flex justify-evenly align-middle"><i class="fa fa-check text-primary me-3"></i><p class="text-wrap">{{$whatwedo_arrayval->title}}</p></h5>
                        @endforeach
                    </div>
                    <div class="col-sm-6 wow zoomIn" data-wow-delay="0.3s">
                        @foreach($whatwedo_arrays2 as $whatwedo_arrayval)
                        <h5 class="d-flex justify-evenly align-middle"><i class="fa fa-check text-primary me-3"></i><p class="text-wrap">{{$whatwedo_arrayval->title}}</p></h5>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-lg-5 min-h-500px">
                <div class="position-relative h-100">
                    <img class="position-absolute w-100 h-100 rounded wow zoomIn object-cover" alt="empowering" data-wow-delay="0.9s" src="{{asset('user/images/empowering.jpg')}}">
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<!-- What we do End -->
<!-- Why choose us Start -->
@if(count($whyChooses)>0)
@php
$whychooses_half = ceil($whyChooses->count() / 2);
$whychooses_chunks = $whyChooses->chunk($whychooses_half);
$whychooses_arrays1 = $whychooses_chunks->get(0)->all();
$whychooses_arrays2 = $whychooses_chunks->get(1)->all()
@endphp
<div class="container-fluid py-5 wow fadeInUp" id="why-choose-us" data-wow-delay="0.1s">
    <div class="container py-5">
        <div class="section-title text-center position-relative pb-3 mb-5 mx-auto max-w-600px">
            <h5 class="fw-bold text-primary text-uppercase">Why Choose Us</h5>
            <p class="mb-0 h1">Expertise You Can Trust. Support You Can Rely On.</p>
        </div>
        <div class="row g-5">
            <div class="col-lg-4">
                <div class="row g-5">
                    @foreach($whychooses_arrays1 as $whychooses_arrayval)
                    <div class="col-12 wow zoomIn" data-wow-delay="0.2s">
                        <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3 w-60px h-60px">
                            <img src="{{ asset('storage/uploads/whychooseus/'.$whychooses_arrayval->icon) }}" class="img-fluid logo-img" alt="why_choose_us_icon">
                        </div>
                        <h4>{{$whychooses_arrayval->title}}</h4>
                        <p class="mb-0">{{$whychooses_arrayval->desc}}</p>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-4  wow zoomIn min-h-350px" data-wow-delay="0.9s">
                <div class="position-relative h-100">
                    <img class="position-absolute w-100 h-100 rounded wow zoomIn object-cover" data-wow-delay="0.1s" alt="why_choose_us_cover" src="{{asset('user/images/why_choose_us.jpg')}}">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="row g-5">
                    @foreach($whychooses_arrays2 as $whychooses_arrayval)
                    <div class="col-12 wow zoomIn" data-wow-delay="0.4s">
                        <div class="bg-primary rounded d-flex align-items-center justify-content-center mb-3 w-60px h-60px">
                            <img src="{{ asset('storage/uploads/whychooseus/'.$whychooses_arrayval->icon) }}" class="img-fluid logo-img" alt="why_choose_us_icon">
                        </div>
                        <h4>{{$whychooses_arrayval->title}}</h4>
                        <p class="mb-0">{{$whychooses_arrayval->desc}}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endif
<!-- Why choose us End -->
<!-- Service Start -->
<div class="container-fluid py-5 wow fadeInUp" id="services" data-wow-delay="0.2s">
    <div class="container py-5">
        <div class="section-title text-center position-relative pb-3 mb-5 mx-auto max-w-600px">
            <h5 class="fw-bold text-primary text-uppercase">Our Services</h5>
            <p class="mb-0 h1">Innovation-Fueled Services That Drive Digital Growth</p>
        </div>
        <div class="row g-5">
            @foreach($services as $key => $service)
            <div class="col-lg-4 col-md-6 wow zoomIn">
                <div class="service-item bg-light rounded d-flex flex-column align-items-center text-center">
                    <div class="service-icon">
                        <img src="{{ asset('storage/uploads/service/'.$service->icon) }}" class="img-fluid" alt="{{$service->title}}">
                    </div>
                    <h4 class="mb-3">{{$service->title}}</h4>
                    <p class="m-0">{{$service->short_description}}</p>
                    <a class="btn btn-lg btn-primary rounded" href="{{url('service/'.$service->slug)}}">
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
<!-- Service End -->
@endsection