@extends('layouts.default')

@section('title', 'Services')

@section('content')
@if ($servicesPage->hero_status)
<section class="page-title bg-1"
style="background: url('{{ asset('storage/servicesPage/' . $servicesPage->hero_background) }}') no-repeat; background-size: cover; background-position: center">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="block text-center">
                @if ($servicesPage->hero_subtitle)
                <span class="text-white">{{ $servicesPage->hero_subtitle }}</span>
                @endif
                
                @if ($servicesPage->hero_title)
                <h1 class="text-capitalize mb-4 text-lg">{{ $servicesPage->hero_title }}</h1>
                @endif      
            </div>
        </div>
    </div>
</div>
</section>
@endif

@if ($welcomePage->services_status)
<section class="section service border-top">
    <div class="container">
        <div class="row justify-content-center">
            
            <div class="col-lg-7 text-center">
                <div class="section-title">
                    @if ($welcomePage->services_title)
                    <span class="h6 text-color">{{ $welcomePage->services_title }}</span>
                    @endif
                    
                    @if ($welcomePage->services_subtitle)
                    <h2 class="mt-3 content-title ">{{ $welcomePage->services_subtitle }} </h2>
                    @endif                    
                </div>
            </div>
        </div>
        
        <div class="row justify-content-center">

            @if (count($services) > 0)
            @foreach ($services as $service)
            <div class="col-sm-6 col-md-4">
                <div class="card border shadow position-relative" @if(count($services) > 3) style="margin-bottom: 60px" @endif>
                    <div class="position-absolute" style="top: -30px; left: 40%; width: 60px; height: 60px; background: rgba(123, 191, 67); z-index: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                        <i style="font-size: 1.5rem;" class="{{ $service->icon }} text-white"></i>
                    </div>
                    <div class="card-body bg-light" style="height: 320px; overflow: hidden; padding-top: 40px">
                        <h4 class="mb-3 text-center text-uppercase">{{ $service->name }}</h4>
                        <p class="text-center">{{ $service->caption }}</p>
                    </div>
                </div>
            </div>
            @endforeach
            @endif 
            
        </div>
    </div>
</section>
@endif



@if ($welcomePage->contact_status)
<section class="cta-2">
    <div class="container">
        <div class="cta-block p-5 rounded">
            <div class="row justify-content-center align-items-center ">
                <div class="col-lg-7 text-center text-lg-left">
                    @if ($welcomePage->contact_subtitle)
                    <span class="text-color">{{ $welcomePage->contact_subtitle }}</span>
                    @endif
                    
                    @if ($welcomePage->contact_title)
                    <h2 class="mt-2 text-white">{{ $welcomePage->contact_title }}</h2>
                    @endif
                </div>
                <div class="col-lg-4 text-center text-lg-right mt-4 mt-lg-0">
                    @if ($welcomePage->contact_action_name and $welcomePage->contact_action_link)   
                    <a target="_blank" href="{{ $welcomePage->contact_action_link }}" class="btn btn-main btn-round-full">
                        {{ $welcomePage->contact_action_name }}
                        <i class="btn-icon fa fa-angle-right ml-2"></i>
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
@endif
@endsection