@extends('layouts.website-main-menu')

@section('content')
<!-- ##### Hero Area Start ##### -->
<div class="hero-area">
    <div class="hero-slideshow owl-carousel">

        <!-- Single Slide -->
        <div class="single-slide bg-img">
            <!-- Background Image-->
            <div class="slide-bg-img bg-img bg-overlay" style="background-image: url(images/slide1.jpeg);"></div>
            <!-- Welcome Text -->
            <div class="container h-100">
                <div class="row h-100 align-items-center justify-content-center">
                    <div class="col-12 col-lg-9">
                        <div class="welcome-text text-center">
                            <h2 data-animation="fadeInUp" data-delay="300ms"> EKURHULENI <span>BRT</span></h2>
                            <p data-animation="fadeInUp" data-delay="500ms">KTVR Bus Service offers affordable and reliable
                                bus operating services.</p>
                            @guest
                            <p>Register as a user on our wesbite below</p>
                            <a href="/register" class="btn credit-btn mt-50" data-animation="fadeInUp" data-delay="700ms">Register</a>
                            @else
                                @if (Auth::user())
                                    <a href="/contact-us" class="btn credit-btn mt-50" data-animation="fadeInUp" data-delay="700ms">Contact Us</a>
                                @endif
                            @endguest
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide Duration Indicator -->
            <div class="slide-du-indicator"></div>
        </div>

        <!-- Single Slide -->
        <div class="single-slide bg-img">
            <!-- Background Image-->
            <div class="slide-bg-img bg-img bg-overlay" style="background-image: url(images/slide2.jpeg);"></div>
            <!-- Welcome Text -->
            <div class="container h-100">
                <div class="row h-100 align-items-center justify-content-center">
                    <div class="col-12 col-lg-9">
                        <div class="welcome-text text-center">
                            <h2 data-animation="fadeInDown" data-delay="300ms">EKURHULENI <span>TRANSPORT</span></h2>
                            <p data-animation="fadeInDown" data-delay="500ms">KTVR Bus Service offers affordable and reliable
                                bus operating services.</p>
                            @guest
                                <p>Register as a user on our wesbite below</p>
                                <a href="/register" class="btn credit-btn mt-50" data-animation="fadeInUp" data-delay="700ms">Register</a>
                            @else
                                @if (Auth::user())
                                    <a href="/contact-us" class="btn credit-btn mt-50" data-animation="fadeInUp" data-delay="700ms">Contact Us</a>
                                @endif
                            @endguest
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide Duration Indicator -->
            <div class="slide-du-indicator"></div>
        </div>

        <!-- Single Slide -->
        <div class="single-slide bg-img">
            <!-- Background Image-->
            <div class="slide-bg-img bg-img bg-overlay" style="background-image: url(images/slide3.jpeg);"></div>
            <!-- Welcome Text -->
            <div class="container h-100">
                <div class="row h-100 align-items-center justify-content-center">
                    <div class="col-12 col-lg-9">
                        <div class="welcome-text text-center">
                            <h2 data-animation="fadeInUp" data-delay="300ms">EKURHULENI <span>BUS</span></h2>
                            <p data-animation="fadeInUp" data-delay="500ms">KTVR Bus Service offers affordable and reliable
                                bus operating services.</p>
                            @guest
                                <p>Register as a user on our wesbite below</p>
                                <a href="/register" class="btn credit-btn mt-50" data-animation="fadeInUp" data-delay="700ms">Register</a>
                            @else
                                @if (Auth::user())
                                    <a href="/contact-us" class="btn credit-btn mt-50" data-animation="fadeInUp" data-delay="700ms">Contact Us</a>
                                @endif
                            @endguest
                        </div>
                    </div>
                </div>
            </div>
            <!-- Slide Duration Indicator -->
            <div class="slide-du-indicator"></div>
        </div>

    </div>
</div>
<!-- ##### Hero Area End ##### -->

<!-- ##### Call To Action Start ###### -->
<section class="cta-2-area wow fadeInUp" data-wow-delay="100ms">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- Cta Content -->
                <div class="cta-content d-flex flex-wrap align-items-center justify-content-between">
                    @if (!Auth::check())
                    <div class="cta-text">
                        <h4>Register an account on our website by clicking this register button</h4>
                    </div>
                    <div class="cta-btn">
                        <form method="GET" action="/register">
                            @csrf
                            <button type="submit" class="btn credit-btn box-shadow">{{ __('Register') }}</button>
                        </form>
                    </div>
                    @else
                        <div class="cta-text">
                            <h4>You are welcome to contact us if you require more information.</h4>
                        </div>
                        <div class="cta-btn">
                            <a href="/contact-us" class="btn credit-btn box-shadow">Contact Us</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ##### Call To Action End ###### -->

<!-- ##### Call To Action Start ###### -->
<section class="cta-area d-flex flex-wrap">
    <!-- Cta Thumbnail -->
    <div class="cta-thumbnail bg-img jarallax" style="background-image: url(images/buses1.jpeg);"></div>

    <!-- Cta Content -->
    <div class="cta-content">
        <!-- Section Heading -->
        <div class="section-heading white">
            <div class="line"></div>
            <h2>ABOUT KTVR BUS SERVICE</h2>
        </div>
        <h6>KTVR Bus Service (Pty) Ltd (“KTVR”) is a private company incorporated in terms of the Companies Act of 2008. KTVR is a special purpose vehicle that has been established to offer Bus Rapid Transit (BRT) transport services under an interim service agreement of the Phase 1 A,B and C of the City of Ekurhuleni (CoE) Integrated Rapid Public Transport Network (IRPTN).</h6>
        <div class="d-flex flex-wrap mt-50">
            <!-- Single Skills Area -->
            <div class="single-skils-area mb-70 mr-5">
                <div id="circle" class="circle" data-value="0.90">
                    <div class="skills-text">
                        <span>90%</span>
                    </div>
                </div>
                <p>Energy</p>
            </div>

            <!-- Single Skills Area -->
            <div class="single-skils-area mb-70 mr-5">
                <div id="circle2" class="circle" data-value="0.75">
                    <div class="skills-text">
                        <span>75%</span>
                    </div>
                </div>
                <p>power</p>
            </div>

            <!-- Single Skills Area -->
            <div class="single-skils-area mb-70">
                <div id="circle3" class="circle" data-value="0.97">
                    <div class="skills-text">
                        <span>97%</span>
                    </div>
                </div>
                <p>resource</p>
            </div>
        </div>
        <!-- <a href="/contact-us" class="btn credit-btn box-shadow btn-2">Read More</a> -->
    </div>
</section>
<!-- ##### Call To Action End ###### -->

<!-- ##### Special Feature Area Start ###### -->
<section class="special-feature-area d-flex flex-wrap">
    <!-- Special Feature Content -->
    <div class="special-feature-content section-padding-100">
        <div class="feature-text">
            <!-- Section Heading -->
            <div class="section-heading white mb-50">
                <div class="line"></div>
                <h2>Our Vision</h2>
            </div>
            <h6>To be a leader in service excellence and, A transport provider of choice.</h6>
            <div class="single-service-area d-flex wow fadeInUp" data-wow-delay="200ms">
                <div class="icon">
                    <i class="icon-profits"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- Special Feature Thumbnail -->
    <div class="special-feature-thumbnail bg-img jarallax" style="background-image: url(images/busservice.jpeg);"></div>
</section>
<!-- ##### Special Feature Area End ###### -->

<!-- ##### Special Feature Area Start ###### -->
<section class="special-feature-area style-2 d-flex flex-wrap">
    <!-- Special Feature Thumbnail -->
    <div class="special-feature-thumbnail bg-img jarallax" style="background-image: url(images/office.jpeg);"></div>
    <!-- Special Feature Content -->
    <div class="special-feature-content section-padding-100">
        <div class="feature-text">
            <!-- Section Heading -->
            <div class="section-heading white mb-50">
                <div class="line"></div>
                <h2>Our Mission</h2>
            </div>
            <h6>Providing accessible, reliable, safe and cost effective transport and related services to the community.</h6>
            <div class="single-service-area d-flex wow fadeInUp" data-wow-delay="200ms">
                <div class="icon">
                    <i class="icon-diamond"></i>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ##### Special Feature Area End ###### -->

<!-- ##### Miscellaneous Area Start ###### -->
<section class="miscellaneous-area bg-gray section-padding-100-0">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- Section Heading -->
                <div class="section-heading text-center mb-100">
                    <div style="background-color: white;" class="line"></div>
                    <p style="color: white;">Take look at our</p>
                    <h2 style="color: white;">Harambee services</h2>
                </div>
            </div>
        </div>
        <div class="row align-items-end justify-content-center">
            <!-- Contact Area -->
            <div class="col-12 col-md-6 col-lg-4">
                <div class="contact--area mb-100 wow fadeInUp" data-wow-delay="300ms">
                    <!-- Section Heading -->
                    <div class="section-heading mb-50">
                        <div style="background-color: white;" class="line"></div>
                        <h2 style="color: white;">Harambee Card</h2>
                    </div>
                    <!-- Contact Content -->
                    <div class="contact-content">
                        <a target="_blank" href="main-website/img/services/card.png" class="btn btn-danger rounded-pill text-white py-2 px-4 mb-2">
                            <img src="main-website/img/service1.jpeg" alt="">
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="contact--area mb-100 wow fadeInUp" data-wow-delay="300ms">
                    <!-- Section Heading -->
                    <div class="section-heading mb-50">
                        <div style="background-color: white;" class="line"></div>
                        <h2 style="color: white;">Timetable</h2>
                    </div>
                    <!-- Contact Content -->
                    <div class="contact-content">
                        <a target="_blank" href="main-website/img/services/Timetable-poster-WEBSITE-768x1551-1.jpg" class="btn btn-danger rounded-pill text-white py-2 px-4 mb-2">
                            <img src="main-website/img/service2.jpeg" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="contact--area mb-100 wow fadeInUp" data-wow-delay="300ms">
                    <!-- Section Heading -->
                    <div class="section-heading mb-50">
                        <div style="background-color: white;" class="line"></div>
                        <h2 style="color: white;">Route Map</h2>
                    </div>
                    <!-- Contact Content -->
                    <div class="contact-content">
                        <a target="_blank" href="main-website/img/services/Route-map-v7-768x1211-1.jpg" class="btn btn-danger rounded-pill text-white py-2 px-4 mb-2">
                            <img src="main-website/img/service3.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<!-- ##### Miscellaneous Area End ###### -->

<script>
document.addEventListener("DOMContentLoaded", function () {
    if (!localStorage.getItem("location_consent")) {
        if (confirm("Do you allow us to track your location?")) {
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    let latitude = position.coords.latitude;
                    let longitude = position.coords.longitude;

                    fetch("/log-location", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            latitude: latitude,
                            longitude: longitude,
                            consent: true
                        })
                    });

                    localStorage.setItem("location_consent", "yes");
                },
                function () {
                    fetch("/log-location", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            consent: false
                        })
                    });

                    localStorage.setItem("location_consent", "no");
                }
            );
        }
    }
});
</script>

@endsection