@extends('frontend.layouts.master')
@section('title') {{ __('header.home_title') }} @endsection
@section('main-content')
@include('frontend.layouts.notification')

<section class="ds section_padding_top_15 section_padding_bottom_15 table_section section_bottom_overlap">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-9 col-sm-8 text-center text-sm-left">
				<div class="media small-teaser teaser inline-block">
					<div class="media-left media-middle">
						<div class="teaser_icon light_bg_color big_bg highlight2 round size_xsmall">
							<i class="fa fa-phone"></i>
						</div>
					</div>
					<div class="media-body media-middle">
						<span class="fontsize_20 medium grey">+255 656 295 486 | +255784295483</span>
						<br>
						<span class="small-text small-spacing">Main Office, Tegeta Dar es salaam P.O Box 96218 Dar es salaam</span>
					</div>
				</div>
				<div class="media small-teaser teaser inline-block">
					<div class="media-left media-middle">
						<div class="teaser_icon light_bg_color big_bg highlight2 round size_xsmall">
							<i class="fa fa-clock-o"></i>
						</div>
					</div>
					<div class="media-body media-middle">
						<span class="fontsize_20 medium grey">Open Hours</span>
						<br>
						<span class="small-text small-spacing">Weekdays 8.00-18.00, Sat: closed</span>
					</div>
				</div>
			</div>
			<div class="col-md-2 col-sm-4 text-center text-sm-right">
				<a href="#pickup" class="theme_button color2 margin_0">Book an Appointment</a>
			</div>
			<div class="col-md-3 col-sm-4 text-center text-sm-right">
				<a href="{{asset('frontend/document/profile.pdf')}}" target="_blank" class="theme_button color2 margin_0">Company Profile</a>
			</div>
		</div>
	</div>
</section>

@if(count($banners)>0)
	<section class="intro_section page_mainslider ds">
		<div class="flexslider" data-dots="false">
			<ul class="slides">
				@foreach($banners as $key=>$banner)
					<li>
						@php
							$photo=explode(',',$banner->photo);
						@endphp
						<img class="" src="{{ Storage::url($banner->photo) }}" alt="{{ Storage::url($banner->photo) }}">
						<div class="container">
							<div class="row">
								<div class="col-sm-12 text-center">
									<div class="slide_description_wrapper">
										<div class="slide_description">
											<div class="intro-layer" data-animation="fadeInRight">
												<h3 class="highlight">
													{{$banner->title}}
												</h3>
											</div>
											<div class="intro-layer" data-animation="fadeInRight">
												<h2>
													{{$banner->subtitle}}
												</h2>
											</div>
											<div class="intro-layer" data-animation="fadeInRight">
												<p>{!!$banner->description!!}</p>
												<a href="{{$banner->link}}" class="theme_button color1">{{$banner->button}}</a>
											</div>
										</div>
										<!-- eof .slide_description -->
									</div>
									<!-- eof .slide_description_wrapper -->
								</div>
								<!-- eof .col-* -->
							</div>
							<!-- eof .row -->
						</div>
						<!-- eof .container -->
					</li>
				@endforeach
			</ul>
		</div>
		<!-- eof flexslider -->

		<div class="scroll_button_wrap">
			<a href="#about" class="scroll_button">
				<span class="sr-only">scroll down</span>
			</a>
		</div>
	</section>
@endif

<section id="about" class="ls section_padding_top_100 section_padding_bottom_150">
	<div class="container">
		<div class="row">
			<div class="col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 text-center">
				<h2 class="section_header with_icon">
					Welcome to GIN Investment Limited 
				</h2>
				<p class="small-text grey">More About Us</p>
				<p class="bottommargin_30">
					GIN Investment Limited was incorporated on May 13, 2004, as a provider of waste management services in Tanzania. The company segments including providing home and office cleaning service, street cleaning service, Municipal solid waste collection, transferring to designated collection points and transportation to the final disposal sites. The company also is supplying cleansing equipment, tools and electrical fiscal devices.
				</p>
				{{-- <img src="images/signature.png" alt="" /> --}}
			</div>
		</div>
		<div class="row topmargin_40 columns_margin_top_60">
			<div class="col-md-4">
				<div class="teaser with_border rounded text-center">
					<div class="teaser_icon main_bg_color2 round size_small offset_icon">
						<i class="fa fa-leaf"></i>
					</div>
					<h4 class="poppins hover-color2">
						<a href="#">Corporate Services</a>
					</h4>
					<p>
						Guaranteed that all of your universal waste management is performed safely and responsibly.
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="teaser with_border rounded text-center">
					<div class="teaser_icon main_bg_color3 round size_small offset_icon">
						<i class="fa fa-inbox"></i>
					</div>
					<h4 class="poppins hover-color3">
						<a href="#">Convenient Pickup</a>
					</h4>
					<p>
						Safety Waste Collection
						details: We collect all types of wastes through our talented team and standard facilities.
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="teaser with_border rounded text-center">
					<div class="teaser_icon main_bg_color round size_small offset_icon">
						<i class="fa fa-calendar"></i>
					</div>
					<h4 class="poppins">
						<a href="#">E-waste Events</a>
					</h4>
					<p>
						We work with non-profits, businesses, and other organizations to host community e-waste events.
					</p>
				</div>
			</div>
		</div>
	</div>
</section>

<section id="pickup" class="ds page_contact parallax section_padding_100">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 text-center">
				<h2 class="section_header with_icon">
					Book an Appointment of Cleaning Service
				</h2>
				<p class="small-text">At offices and Homes</p>

				<form action="{{route('applicant.store')}}" method="POST" id="applicantForm" novalidate="novalidate">
					@csrf

					<div class="col-md-4">
						<div class="form-group">
							<label for="pickup-name">Full Name
								<span class="required">*</span>
							</label>
							{{-- <i class="fa fa-user highlight2" aria-hidden="true"></i> --}}
							<input type="text" aria-required="true" size="30" value="" name="name" id="pickup-name" class="form-control @error('name') is-invalid @enderror" placeholder="Full Name" required>
							@error('name')
								<span class="invalid-feedback" role="alert">
									<strong>{{ $message }}</strong>
								</span>
							@enderror
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label for="pickup-phone">Phone Number
								<span class="required">*</span>
							</label>
							{{-- <i class="fa fa-phone highlight2" aria-hidden="true"></i> --}}
							<input type="text" aria-required="true" size="30" value="" name="phone" id="pickup-phone" class="form-control @error('phone') is-invalid @enderror" placeholder="Phone Number" required>
							@error('phone')
								<span class="invalid-feedback" role="alert">
									<strong>{{ $message }}</strong>
								</span>
							@enderror
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label for="pickup-date">Date
								<span class="required">*</span>
							</label>
							{{-- <i class="fa fa-calendar highlight2" aria-hidden="true"></i> --}}
							<input type="date" aria-required="true" size="30" value="" name="date" id="pickup-date" class="form-control @error('date') is-invalid @enderror" placeholder="Date" required>
							@error('date')
								<span class="invalid-feedback" role="alert">
									<strong>{{ $message }}</strong>
								</span>
							@enderror
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label for="pickup-time">Time
								<span class="required">*</span>
							</label>
							{{-- <i class="fa fa-clock-o highlight2" aria-hidden="true"></i> --}}
							<input type="time" aria-required="true" size="30" value="" name="time" id="pickup-time" class="form-control @error('time') is-invalid @enderror" placeholder="Time" required>
							@error('time')
								<span class="invalid-feedback" role="alert">
									<strong>{{ $message }}</strong>
								</span>
							@enderror
						</div>
					</div>
					<div class="col-sm-6">

						<div class="form-group">
							<label for="pickup-message">Message</label>
							{{-- <i class="fa fa-comment-o highlight2" aria-hidden="true"></i> --}}
							<textarea aria-required="true" rows="3" cols="45" name="message" id="pickup-message" class="form-control @error('message') is-invalid @enderror" placeholder="Message" required></textarea>
							@error('message')
								<span class="invalid-feedback" role="alert">
									<strong>{{ $message }}</strong>
								</span>
							@enderror
						</div>
					</div>

					<div class="col-sm-12">

						<div class="contact-form-submit topmargin_20">
							<button type="submit" id="contact_form_submit" name="contact_submit" class="theme_button color1">Send Message</button>
						</div>
					</div>
				</form>

			</div>
		</div>
	</div>
</section>

<section id="services" class="ls ms section_padding_100">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 text-center">
				<h2 class="section_header with_icon">
					Our Services
				</h2>
				<p class="small-text grey">What we do</p>
			</div>
		</div>
		<div class="row columns_margin_bottom_20">
			@if($services)
				@foreach($services as $service)
					<div class="col-md-4 col-sm-6">
						<article class="vertical-item content-padding with_background text-center rounded overflow-hidden">
							<div class="item-media">
								@php
                                    $photo=explode(',',$service->photo);
                                @endphp
                                <img src="{{ Storage::url($service->photo) }}" alt="{{ Storage::url($service->photo) }}">
							</div>
							<div class="item-content">
								<h4 class="entry-title">
									<a href="{{route('service.detail',$service->slug)}}">{{$service->title}}</a>
								</h4>
								<p class="margin_0">
									{!! substr($service->description, 0, 100) !!}
								</p>
								<a href="{{route('service.detail',$service->slug)}}" class="read-more"></a>
							</div>
						</article>
					</div>
				@endforeach
			@endif
		</div>
		<div class="row topmargin_30">
			<div class="col-sm-12 text-center">
				<a href="{{route('service')}}" class="theme_button wide_button color1">All services</a>
			</div>
		</div>
	</div>
</section>

<section class="ls overflow_hidden half_section section_padding_top_100 section_padding_bottom_150 columns_padding_80">
	<div class="image_cover image_cover_left">
		<!-- you can put your image here instead of puting it in column-->
		<!-- <img src="img/parallax/half_image.jpg" alt=""> -->
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6">
				<img src="{{ asset('frontend/images/home.jpeg') }}" alt="">
			</div>
			<!-- .col-* -->
			<div class="col-md-6">

				<h2 class="section_header with_icon text-center">
					Our Company Directives
				</h2>
				<p class="small-text grey">About us</p>

				<p>
					GIN Investment Limited was incorporated on May 13, 2004, as a provider
					of waste management services in Tanzania. The company segments
					including providing street cleaning service, Municipal solid waste
					collection, transferring to designated collection points and transportation
					to the final disposal sites.
				</p>

				<div class="panel-group" id="accordion1">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">
									<i class="fa fa-envelope"></i>
									Purpose
								</a>
							</h4>
						</div>
						<div id="collapse1" class="panel-collapse collapse in">
							<div class="panel-body">
								To be a leader in the provision of quality waste management
								and environmental services in Tanzania.
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion1" href="#collapse2" class="collapsed">
									<i class="fa fa-envelope"></i>
									Vision
								</a>
							</h4>
						</div>
						<div id="collapse2" class="panel-collapse collapse">
							<div class="panel-body">
								To ensure Integrated Solid Waste Management system is
								operational in our operating system by 2030
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion1" href="#collapse3" class="collapsed">
									<i class="fa fa-envelope"></i>
									Mission
								</a>
							</h4>
						</div>
						<div id="collapse3" class="panel-collapse collapse">
							<div class="panel-body">
								To build long-term relationship with our customers
								and provision of specialized services by pursuing business through
								innovation and advanced tech
							</div>
						</div>
					</div>
				</div>

			</div>
			<!-- .col-* -->


		</div>
	</div>

</section>


<section id="faq" class="ls ms section_padding_100">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 text-center">
				<h2 class="section_header with_icon">
					FAQ
				</h2>
				<p class="small-text grey bottommargin_0">Frequently asked qaestions</p>
			</div>
		</div>
		<div class="row columns_margin_top_60">
			@if($faqs)
				@foreach($faqs as $faq)
					<div class="col-md-4">
						<div class="teaser with_background rounded text-center">
							<div class="teaser_icon main_bg_color2 round offset_icon fontsize_30">
								<h3 class="margin_0">?</h3>
							</div>
							<h4 class="poppins">
								{{$faq->title}}
							</h4>
							<p>
								{!! substr($faq->description, 0, 100) !!}
							</p>
						</div>
					</div>
				@endforeach
			@endif
		</div>
		<div class="row topmargin_30">
			<div class="col-sm-12 text-center">
				<a href="{{ route('faq')}}" class="theme_button color1 wide_button">to faq page</a>
			</div>
		</div>
	</div>
</section>

<section id="news" class="ls ms section_padding_100">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 text-center">
				<h2 class="section_header with_icon">
					Latest News
				</h2>
				<p class="small-text grey">Blog Posts</p>
			</div>
		</div>
		<div class="row columns_margin_bottom_20">
			@if($posts)
                @foreach($posts as $post)
					<div class="col-md-4 col-sm-6">
						<article class="vertical-item content-padding with_background text-center rounded overflow-hidden">
							<div class="item-media">
								@php
                                    $photo=explode(',',$post->photo);
                                @endphp
                                <img src="{{ Storage::url($post->photo) }}" alt="{{ Storage::url($post->photo) }}">
							</div>
							<div class="item-content">
								<h4 class="entry-title">
									<a href="{{route('blog.detail',$post->slug)}}">{{$post->title}}</a>
								</h4>
								<p class="margin_0">
									{!! substr($post->description, 0, 100) !!}
								</p>
								<a href="{{route('blog.detail',$post->slug)}}" class="read-more"></a>
							</div>
						</article>
					</div>
				@endforeach
			@endif
		</div>
		<div class="row topmargin_30">
			<div class="col-sm-12 text-center">
				<a href="{{route('blog')}}" class="theme_button wide_button color1">Our blog</a>
			</div>
		</div>
	</div>
</section>

<section class="cs main_color2 section_padding_top_30 section_padding_bottom_30">
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-6">
				<div class="media small-teaser teaser inline-block">
					<div class="media-left media-middle">
						<div class="teaser_icon light_bg_color big_bg highlight2 round size_xsmall">
							<i class="fa fa-phone"></i>
						</div>
					</div>
					<div class="media-body media-middle">
						<span class="fontsize_20 medium black">
							+255 656 295 486 | +255784295483
						</span>
						<br>
						<span class="small-text small-spacing lightgrey">
							Main Office, Tegeta Dar es salaam
							P.O Box 96218 Dar es salaam</span>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-6">
				<div class="media small-teaser teaser inline-block">
					<div class="media-left media-middle">
						<div class="teaser_icon light_bg_color big_bg highlight2 round size_xsmall">
							<i class="fa fa-clock-o"></i>
						</div>
					</div>
					<div class="media-body media-middle">
						<span class="fontsize_20 medium black">Open Hours</span>
						<br>
						<span class="small-text small-spacing lightgrey">Weekdays 8.00-18.00, Sat: closed</span>
					</div>
				</div>
			</div>
			<div class="col-md-4 col-sm-6 col-sm-offset-3 col-md-offset-0">
				<div class="widget widget_mailchimp">
					<form class="signup topmargin_10" action="./" method="get">
						<!-- <div class="form-group-wrap"> -->
						<div class="form-group margin_0">
							<input class="mailchimp_email form-control" name="email" type="email" placeholder="Email Address">
						</div>
						<button type="submit" class="theme_button">Sign Up!</button>
						<!-- </div> -->
						<div class="response"></div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>

{{-- <section class="ls">
	<div class="owl-carousel" data-responsive-xlg="8" data-responsive-lg="8" data-responsive-md="5" data-responsive-sm="3" data-responsive-xs="2" data-loop="true" data-margin="0" data-nav="true">
		@if($galleries)
			@foreach($galleries as $gallery)
				<div class="vertical-item content-absolute corporate consulting">
					<div class="item-media">
						@php
							$photo=explode(',',$gallery->photo);
						@endphp
						<img src="{{ Storage::url($gallery->photo) }}" alt="">
						<div class="media-links">
							<a class="abs-link prettyPhoto" data-gal="prettyPhoto[gal]" title="" href="{{ Storage::url($gallery->photo) }}"></a>
						</div>
					</div>
				</div>
			@endforeach
		@endif
	</div>
</section> --}}
	
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Validate form
        $('#applicantForm').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                location: {
                    required: true,
                    minlength: 4
                },
                phone: {
                    required: true,
                    minlength: 9
                },
                email: {
                    required: true,
                    email: true
                },
            },
            messages: {
                name: {
                    required: "Come on, you have a name, don't you?",
                    minlength: "Your name must have at least 2 characters"
                },
                phone: {
                    required: "Come on, you have a phone number, don't you?",
                    minlength: "Your phone number must have at least 9 characters"
                },
                date: {
                    required: "No date given",
                    email: "Please enter date for booking"
                },
				time: {
                    required: "No time given",
                    minlength: "Please enter time for booking"
                },
				message: {
                    required: "No message given",
                    minlength: "Please enter message for booking"
                },

            },
            submitHandler: function(form) {
                // Disable form elements
                $(form).find(':input').attr('disabled', 'disabled');
                $(form).find('label').css('cursor', 'default');

                // Prepare form data
                var formData = new FormData(form);

                // Perform AJAX request
                $.ajax({
                    type: "POST",
                    url: $(form).attr('action'),
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        // Check for success in the response
                        if (response.success) {
                            // Show success modal
                            $('#successModal').modal('show');
                        } else {
                            // Show error message (if needed)
                            $('#error').modal('show');
                        }
                    },
                    error: function() {
                        // Show error message
                        $('#error').modal('show');
                    }
                });
            }
        });
    });
</script>
@endpush