@extends('voyager::master')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/voyager/css/clock.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/voyager/css/lightbox.min.css') }}">
@stop

@push('javascript')
    <script src="{{ asset('assets/voyager/js/digital-clock.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/voyager/js/lightbox.min.js') }}"></script>
@endpush

@section('content')

    <div class="container main-dashboard">
        <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-lg-5 pl-lg-3">
                    <div id="station-d" class="mt-4 ">
                        <h3>{{ __('messages.StationName') }}</h3>
                        <div id="station-image"><img src="{{ asset('assets/voyager/images/111.png') }}"
                                                     alt="{{ __('messages.StationName') }}">
                        </div>
                    </div>
                </div>

            <div class="clock-section col-lg-2   ">
                    <div class="clock-d mt-4">
                        <section class="clock container">
                            <div class="clock__container grid">
                                <div class="clock__content grid">
                                    <div class="clock__circle">
                                        <span class="clock__twelve"></span>
                                        <span class="clock__three"></span>
                                        <span class="clock__six"></span>
                                        <span class="clock__nine"></span>

                                        <div class="clock__rounder"></div>
                                        <div class="clock__hour" id="clock-hour"></div>
                                        <div class="clock__minutes" id="clock-minutes"></div>
                                        <div class="clock__seconds" id="clock-seconds"></div>

                                        <!-- Dark/light button -->
                                        <!-- <div class="clock__theme">
                                             <i class='bx bxs-moon' id="theme-button"></i>
                                         </div>-->
                                    </div>

                                    <div>
                                        <div class="clock__text" style="display: none">
                                            <div class="clock__text-hour" id="text-hour"></div>
                                            <div class="clock__text-minutes" id="text-minutes"></div>
                                            <div class="clock__text-ampm" id="text-ampm"></div>
                                        </div>

                                        <div class="clock__date">
                                            <span id="date-day-week"></span>
                                            <span id="date-month"></span>
                                            <span id="date-day"></span>
                                            <span id="date-year" ></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="clock-time">
                                    <div class="clock-StartTime"><strong> Start Time
                                        </strong> <span> 7:30</span></div>
                                    <div class="clock-TimeRemaining"><strong> Time Remaining
                                            : </strong> <span> 2:30</span></div>
                                </div>
                            </div>
                        </section>


                    </div>

                </div>


                <div class="slider-section col-lg-5 pr-lg-3">
                    <div class="slider">

                        <div id="carouselExampleCaptions" class="carousel slide carousel-fade"
                             data-bs-ride="carousel">
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
                                        class="active" aria-current="true" aria-label="Slide 1"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                                        aria-label="Slide 2"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                                        aria-label="Slide 3"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"
                                        aria-label="Slide 4"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4"
                                        aria-label="Slide 5"></button>
                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5"
                                        aria-label="Slide 6"></button>

                            </div>
                            <div class="carousel-inner">
                                <div class="carousel-item active">

                                    <a href="{{ asset('assets/voyager/images/slider/1.jpg') }}"
                                       class="" title="My Caption" data-lightbox="image-set">

                                        <img src="{{ asset('assets/voyager/images/slider/1.jpg') }}"
                                             class="swipebox" title="My Caption"/>

                                    </a>
                                </div>
                                <div class="carousel-item">
                                    <a href="{{ asset('assets/voyager/images/slider/2.jpg') }}"
                                       class="" title="My Caption" data-lightbox="image-set">

                                        <img src="{{ asset('assets/voyager/images/slider/2.jpg') }}"
                                             class="swipebox" title="My Caption"/>

                                    </a>
                                </div>
                                <div class="carousel-item">
                                    <a href="{{ asset('assets/voyager/images/slider/3.jpg') }}"
                                       class="" title="My Caption" data-lightbox="image-set">

                                        <img src="{{ asset('assets/voyager/images/slider/3.jpg') }}"
                                             class="swipebox" title="My Caption"/>

                                    </a>
                                </div>
                                <div class="carousel-item">
                                    <a href="{{ asset('assets/voyager/images/slider/4.jpg') }}"
                                       class="" title="My Caption" data-lightbox="image-set">

                                        <img src="{{ asset('assets/voyager/images/slider/4.jpg') }}"
                                             class="swipebox" title="My Caption"/>

                                    </a>

                                </div>
                                <div class="carousel-item">
                                    <a href="{{ asset('assets/voyager/images/slider/5.jpg') }}"
                                       class="" title="My Caption" data-lightbox="image-set">

                                        <img src="{{ asset('assets/voyager/images/slider/5.jpg') }}"
                                             class="swipebox" title="My Caption"/>

                                    </a>
                                </div>
                                <div class="carousel-item">
                                    <a href="{{ asset('assets/voyager/images/slider/6.jpg') }}"
                                       class="" title="My Caption" data-lightbox="image-set">

                                        <img src="{{ asset('assets/voyager/images/slider/6.jpg') }}"
                                             class="swipebox" title="My Caption"/>

                                    </a>
                                </div>
                            </div>

                        </div>


                    </div>


                </div>
            </div>
        </div>
    </div>
    </div>
@stop