@extends('layouts.appv2')

@section('content')
    <!-- ===============================================-->
    <!--    Main Content-->
    <!-- ===============================================-->
    <main class="main" id="top">
        <div class="container" data-layout="container">
            <script>
                var isFluid = JSON.parse(localStorage.getItem('isFluid'));
                if (isFluid) {
                    var container = document.querySelector('[data-layout]');
                    container.classList.remove('container');
                    container.classList.add('container-fluid');
                }
            </script>
            <nav class="navbar navbar-light navbar-vertical navbar-expand-xl">
                <script>
                    var navbarStyle = localStorage.getItem("navbarStyle");
                    if (navbarStyle && navbarStyle !== 'transparent') {
                        document.querySelector('.navbar-vertical').classList.add(`navbar-${navbarStyle}`);
                    }
                </script>
                <div class="d-flex align-items-center">
                    <div class="toggle-icon-wrapper">
                        <button class="btn navbar-toggler-humburger-icon navbar-vertical-toggle" data-bs-toggle="tooltip"
                            data-bs-placement="left" title="Toggle Navigation"><span class="navbar-toggle-icon"><span
                                    class="toggle-line"></span></span></button>
                    </div>
                    {{-- <a class="navbar-brand" href="#">
                        <div class="d-flex align-items-center py-3"><img class="me-2" src="assets/img/cgl/green.png"
                                alt="" width="60" /><span class="font-sans-serif fw-bold"
                                style="color: #064521 "> CGL </span>
                        </div>
                    </a> --}}
                </div>



                <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
                    <div class="navbar-vertical-content scrollbar">
                        <ul class="navbar-nav flex-column mb-3" id="navbarVerticalNav">

                            <li class="nav-item">
                                <!-- label-->
                                <div class="row navbar-vertical-label-wrapper mt-3 mb-2">
                                    <div class="col-auto navbar-vertical-label">Navigation
                                    </div>
                                    <div class="col ps-0">
                                        <hr class="mb-0 navbar-vertical-divider" />
                                    </div>
                                </div>
                                <!-- Per Location parent pages-->
                                <a class="nav-link" href="#section1" role="button">
                                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                                class="fas fa-search-location"></span></span><span
                                            class="nav-link-text ps-1">Per Location</span>
                                    </div>
                                </a>
                                {{-- <!-- Comparative Analysis Report parent pages-->
                    <a class="nav-link" href="#section2" role="button">
                        <div class="d-flex align-items-center"><span class="nav-link-icon"><span class="fas fa-table"></span></span><span class="nav-link-text ps-1">Comparative Analysis</span>
                        </div>
                    </a> --}}
                                <!-- Grand total parent pages-->
                                <a class="nav-link" href="#section3" role="button">
                                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                                class="far fa-check-square"></span></span><span
                                            class="nav-link-text ps-1">Grand Total</span>
                                    </div>
                                </a>

                            </li>

                        </ul>

                    </div>
                </div>
            </nav>
            <!-- SIDEBAR ENDW -->
            <div class="content">
                <div class="card bg-light shadow-none">
                    <div class="bg-holder bg-card d-none d-sm-block"
                        style="background-image:url(../assets/img/illustrations/ticket-bg.png);">
                    </div>
                    <div class="row g-0">
                        <div class="col-sm-6 col-md-10">
                            <div class="card-header d-flex align-items-center z-1 p-0"><img
                                    src="../assets/img/cgl/green.png" alt="" width="96" />
                                <div class="ms-n3">
                                    <h5 class="mb-1 text-primary">Welcome to</h5>
                                    <h4 class="mb-0 text-primary fw-bold">CGL<span class="text-info fw-medium">
                                            Dashboard</span></h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-2 d-flex align-items-center">
                            <h5 id="live-clock-date"></h5>
                        </div>
                    </div>


                </div>
                <nav class="navbar navbar-light navbar-glass navbar-top navbar-expand">

                    {{-- <button class="btn navbar-toggler-humburger-icon navbar-toggler me-1 me-sm-3" type="button"
                        data-bs-toggle="collapse" data-bs-target="#navbarVerticalCollapse"
                        aria-controls="navbarVerticalCollapse" aria-expanded="false" aria-label="Toggle Navigation"><span
                            class="navbar-toggle-icon"><span class="toggle-line"></span></span></button> --}}
                    {{-- <a class="navbar-brand me-1 me-sm-3" href="index.html">
                        <div class="d-flex align-items-center"><img class="me-2"
                                src="assets/img/icons/spot-illustrations/falcon.png" alt="" width="40" /><span
                                class="font-sans-serif">falcon</span>
                        </div>
                    </a> --}}
                    {{-- upper right side  --}}
                    <ul class="navbar-nav navbar-nav-icons ms-auto flex-row align-items-center">
                        <h5 id="live-clock-date"></h5>
                    </ul>
                </nav>
                {{-- body start --}}
                @include('location')
                <br>
                <br>
                <br>
                @include('table')
                <br>
                @include('footer')
            </div>
        </div>
    </main>
    <!-- ===============================================-->
    <!--    End of Main Content-->
    <!-- ===============================================-->
@endsection