@extends('layouts.default')
@php
$welcomeSetings = \App\Models\Setting::first(['tagline']);
@endphp

@section('title', $welcomeSetings->tagline)

@section('content')

@if ($welcomePage->home_slider_status)
@php
$slides = \App\Models\Slide::where('status', true)->orderBy('created_at', 'asc')->get();
@endphp
<div id="homeSlider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        @foreach ($slides as $index => $slide)
        <li data-target="#homeSlider" data-slide-to="{{ $index }}" @if ($index == 0) class="active" @endif></li>
        @endforeach
    </ol>
    <div class="carousel-inner">
        @foreach ($slides as $index => $slide)
        <div class="carousel-item position-relative @if ($index == 0) active @endif">
            <div style="height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; width: 100%; z-index: 1;"></div>
            <img src="{{ asset('storage/slides/' . $slide->image) }}" class="d-block w-100" alt="slider-{{ $index }}" style="height: 75vh; object-fit: cover;">
            <div class="carousel-caption d-none d-md-block">
                <div class="carousel-caption d-none d-md-block">
                    <p class="color-one text-capitalize font-weight-bold">{!! $slide->subtitle !!}</p>
                    <h1 class="slider-title text-white">{!! $slide->title !!}</h1>

                    @if ($slide->action_name and $slide->action_link)
                    <a target="_blank" href="{{ $slide->action_link }}"
                        class="btn btn-main animated fadeInUp btn-round-full">
                        {!! $slide->action_name !!}
                        <i class="btn-icon fa fa-angle-right ml-2"></i>
                    </a>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @if (count($slides) > 1)
    <a class="carousel-control-prev" href="#homeSlider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#homeSlider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    @endif
</div>
@endif

@if ($welcomePage->hero_status)
<section class="slider" style="background: url('{{ asset('storage/welcome/' . $welcomePage->hero_background) }}') no-repeat; background-size: cover; background-position: center">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-10">
                <div class="block">
                    @if ($welcomePage->hero_subtitle)
                    <b class="d-block mb-3 color-one text-capitalize">
                        {!! $welcomePage->hero_subtitle !!}
                    </b>
                    @endif
                    
                    @if ($welcomePage->hero_title)
                    <h1 class="animated fadeInUp mb-5">{!! $welcomePage->hero_title !!}</h1>
                    @endif
                    
                    @if ($welcomePage->hero_action_name and $welcomePage->hero_action_link)
                    <a target="_blank" href="{{ $welcomePage->hero_action_link }}"
                        class="btn btn-main animated fadeInUp btn-round-full">
                        {!! $welcomePage->hero_action_name !!}
                        <i class="btn-icon fa fa-angle-right ml-2"></i>
                    </a>
                    @endif
                    
                </div>
            </div>
        </div>
    </div>
</section>
@endif

@if ($welcomePage->services_status)
<section class="section service">
    <div class="container">
        
        <div class="row justify-content-center">
            
            @if (count($services) > 0)
            @foreach ($services as $service)
            <div class="col-sm-6 col-md-4">
                <div class="bg-gray p-4 rounded border-1 shadow-sm 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">{{ $service->name }}</h4>
                        <p class="text-center">{{ $service->caption }}</p>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
            
        </div>
    </div>
</section>
@endif


@if ($welcomePage->slogan_status)
<section class="section intro">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="section-title">
                    <div class="text-center">
                        @if ($welcomePage->slogan_subtitle)
                        <span class="h6 text-color">{{ $welcomePage->slogan_subtitle }}</span>
                        @endif
                    </div>
                    @if ($welcomePage->slogan_title)
                    <h2 class="mt-3 content-title text-center">{{ $welcomePage->slogan_title }}</h2>
                    @endif
                </div>
            </div>
        </div>
        
        @if ($welcomePage->key_point_one_icon or $welcomePage->key_point_two_icon or $welcomePage->key_point_three_icon)
        <div class="row">
            <div class="col-lg-12">
                
                
                <div class="row justify-content-center">
                    
                    @if ($welcomePage->key_point_one_icon and $welcomePage->key_point_one_title and $welcomePage->key_point_one_caption)
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="intro-item mb-5 mb-lg-0">
                            @if ($welcomePage->key_point_one_icon)
                            <i class="{{ $welcomePage->key_point_one_icon }} color-one"></i>                                
                            @endif
                            <h4 class="mt-4 mb-3">{{ $welcomePage->key_point_one_title }}</h4>
                            <p>{{ $welcomePage->key_point_one_caption }}</p>
                        </div>
                    </div>                        
                    @endif
                    
                    @if ($welcomePage->key_point_two_icon and $welcomePage->key_point_two_title and $welcomePage->key_point_two_caption)
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="intro-item mb-5 mb-lg-0">
                            @if ($welcomePage->key_point_two_icon)
                            <i class="{{ $welcomePage->key_point_two_icon }} color-one"></i>                                
                            @endif
                            <h4 class="mt-4 mb-3">{{ $welcomePage->key_point_two_title }}</h4>
                            <p>{{ $welcomePage->key_point_two_caption }}</p>
                        </div>
                    </div>                        
                    @endif
                    
                    @if ($welcomePage->key_point_three_icon and $welcomePage->key_point_three_title and $welcomePage->key_point_three_caption)
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="intro-item mb-5 mb-lg-0">
                            @if ($welcomePage->key_point_three_icon)
                            <i class="{{ $welcomePage->key_point_three_icon }} color-one"></i>                                
                            @endif
                            <h4 class="mt-4 mb-3">{{ $welcomePage->key_point_three_title }}</h4>
                            <p>{{ $welcomePage->key_point_three_caption }}</p>
                        </div>
                    </div>                        
                    @endif
                    
                </div>
                
                
            </div>
        </div>
        @endif        
        
    </div>
</section>
@endif


@if ($welcomePage->mission_status)
<section class="row" style="margin-bottom: 100px">
    
    <div class="col-md-6">
        <div class="bg-about" style=" position: static; content: ''; left: 0px; top: 0px; min-height: 500px; background: url('{{ asset('storage/welcome/' . $welcomePage->mission_picture) }}') no-repeat; background-size: cover;">
        </div>
    </div>
    
    <div class="col-md-6 d-flex align-items-center">
        
        <div class="about-item">
            <div class="col-md-9">
                @if ($welcomePage->mission_subtitle)
                <span class="h6 text-color">{!! $welcomePage->mission_subtitle !!}</span>
                @endif
                @if ($welcomePage->mission_title)
                <h2 class="mb-3 position-relative content-title">{!! $welcomePage->mission_title !!}</h2>
                @endif
                
                <div class="about-content p-0">
                    @if ($welcomePage->mission_subtitle)
                    <p>{!! $welcomePage->mission_description !!}</p>
                    @endif
                    
                    @if ($welcomePage->mission_action_link and $welcomePage->mission_action_name)
                    <a href="{{ $welcomePage->mission_action_link }}"
                        class="btn btn-main btn-round-full">{{ $welcomePage->mission_action_name }}
                        <i class="btn-icon fa fa-angle-right ml-2"></i>
                    </a>
                    @endif
                </div>
            </div>
        </div>
        
    </div>
    
</section>
@endif



@if ($welcomePage->offer_status)
<section class="section cta" style="background: url('{{ asset('storage/welcome/' . $welcomePage->offer_background) }}') no-repeat; background-size: cover; background-position: center">
    <div class="container">
        <div class="row">
            <div class="col-xl-6 col-lg-6">
                <div class="cta-item  bg-white p-5 rounded" style="min-height: 260px">
                    @if ($welcomePage->offer_one_title)
                    <h3 class="mt-2 mb-4 text-color text-center">{!! $welcomePage->offer_one_title !!}</h3>
                    @endif
                    
                    @if ($welcomePage->offer_one_description)
                    <p class="mb-4">{!! $welcomePage->offer_one_description !!}</p>
                    @endif
                </div>
            </div>
            
            <div class="col-xl-6 col-lg-6">
                <div class="cta-item  bg-white p-5 rounded" style="min-height: 260px">
                    @if ($welcomePage->offer_two_title)
                    <h3 class="mt-2 mb-4 text-color text-center">{!! $welcomePage->offer_two_title !!}</h3>
                    @endif
                    
                    @if ($welcomePage->offer_two_description)
                    <p class="mb-4">{!! $welcomePage->offer_two_description !!}</p>
                    @endif
                </div>
            </div>
        </div><br><br>
        
    </div>
</section>
@endif

@if ($welcomePage->contact_status)
<section class="mt-70 position-relative">
    <div class="container">
        <div class="cta-block-2 bg-gray p-5 rounded border-1">
            <div class="row justify-content-center align-items-center ">
                <div class="col-lg-7">
                    @if ($welcomePage->contact_subtitle)
                    <span class="text-color">{{ $welcomePage->contact_subtitle }}</span>
                    @endif
                    
                    @if ($welcomePage->contact_title)
                    <h2 class="mt-2 mb-4 mb-lg-0">{{ $welcomePage->contact_title }}</h2>
                    @endif                    
                </div>
                
                <div class="col-lg-4">
                    @if ($welcomePage->contact_action_name and $welcomePage->contact_action_link)
                    <a target="_blank" href="{{ $welcomePage->contact_action_link }}" class="btn btn-main animated fadeInUp 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