@extends('layouts.master')



<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>




@push('cssCode')
    <style type="text/css">
        .d-none {
            display: none;
        }

        .lds-dual-ring {

            width: 30px;
            height: 30px;
        }

        .lds-dual-ring:after {
            content: " ";
            display: block;
            width: 30px;
            height: 30px;
            margin: 8px;
            margin-top: 0;
            border-radius: 50%;
            border: 3px solid #6d7fcc;
            border-color: #6d7fcc transparent #6d7fcc transparent;
            animation: lds-dual-ring 1.2s linear infinite;
        }

        @keyframes lds-dual-ring {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .uploadProfileImage {

            /*background: rgba(170, 201, 177, .7);*/

            height: 100px;

            width: 100px;

            margin: 0px auto;

            background-size: cover;

            /* border-radius: 50%;*/

            z-index: 2;

            overflow: hidden;

            border: 2px solid #fff;

            cursor: pointer;

        }



        #top {

            margin-top: 10px;

        }



        .col-sm-2 {

            margin-top: 15px;

        }





        .switch {

            position: relative;

            display: inline-block;

            width: 52px;
            height: 27px;


        }



        .switch input {
            display: none;
        }



        .slider {

            position: absolute;

            cursor: pointer;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background-color: #ccc;

            -webkit-transition: .4s;

            transition: .4s;

        }



        .slider:before {

            position: absolute;

            content: "";

            height: 20px;
            width: 20px;

            left: 4px;

            bottom: 4px;

            background-color: white;

            -webkit-transition: .4s;

            transition: .4s;

        }



        input:checked+.slider {

            background-color: #2196F3;

        }



        input:focus+.slider {

            box-shadow: 0 0 1px #2196F3;

        }



        input:checked+.slider:before {

            -webkit-transform: translateX(26px);

            -ms-transform: translateX(26px);

            transform: translateX(26px);

        }



        /* Rounded sliders */

        .slider.round {

            border-radius: 34px;

        }



        .slider.round:before {

            border-radius: 50%;

        }

        /* Overview css starts from here */

        .main-body {
            height: max-content;
            padding: 1em;
        }


        .main-box {
            display: flex;
            color: #ffffff;
            justify-content: flex-end;
        }

        .text {
            margin: 0px 6px;
            width: 150px;
            height: 105px;
            text-align: center;
            border-radius: 8px;
        }

        .text.one {
            background: #f64142;
        }

        .text.two {
            background: #425cfb;
        }

        .text.three {
            background: #4c4c4c;
        }

        .text p {
            font-size: 24px;
            margin-bottom: 0;
            margin-top: 5px;
        }

        .text h2 {
            font-size: 65px;
            margin-top: 0;
            margin-bottom: 0px;
        }

        .title-right {
            width: 50%;
            float: right;
            height: max-content;
        }

        .page-title {

            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 60px;
            padding-bottom: 80px;
        }

        /* Overview css ends here */
    </style>


    <style>
        .clientTable {
            margin: 20px auto;
            font-size: 15px;
            font-weight: bold;
        }

        .clientTable tr td {
            padding: 4px;
            /* text-align: center; */
        }

        .nav-tabs li.active a {
            background-color: #41B3AB !important;
            color: #ffffff !important;
        }

        table td .btn {
            margin-right: 0px !important;
        }

        .text-right-width {
            text-align: right;
            width: 50%;
        }

        .profile-img {
            width: 150px;
            margin: 20px auto;
            border: 3px solid #000000;
            height: 150px;
        }

        .dataTables_wrapper .dataTables_length {
            float: right;
            display: none;
        }

        .dataTables_wrapper .dataTables_filter {
            float: left;
            text-align: left;
        }

        /*.modal-backdrop.in {
                                                                                                                                    filter: alpha(opacity=50);
                                                                                                                                    opacity: 0;
                                                                                                                                }*/
    </style>
@endpush

@section('content')
    <div class="right_col" role="main">
        <div class="row">
            <h3>Waypoint triggered logs</h3>
            <form method="get">
                <div class="col-md-4 form-group">
                    <div class="input-group" style="display:block;">
                        <input type="text" id="daterange"
                            value="{{ Request::input('startdate') }}-{{ Request::input('enddate') }}"
                            class="form-control filters" placeholder="Select Date range">
                        <input type="hidden" name="startdate" value="{{ Request::input('startdate') }}"
                            class="form-control filters startdate" placeholder="Select Date range">
                        <input type="hidden" name="enddate" value="{{ Request::input('enddate') }}"
                            class="form-control filters enddate" placeholder="Select Date range">
                                            </div>
                </div>
                <div class="col-md-1 form-group">
                    <input type="submit" class="btn btn-primary" value="Search" name="submit">
                </div>
                <div class="col-md-1 form-group">
                    <input type="submit" class="btn btn-primary" value="All" name="All">
                </div>
                <div class="col-md-1 form-group">
                    <input id="clrBtn" class="btn btn-primary" name="export" type="submit" value="Export Search">
                </div>
                <div class="col-md-1 form-group">
                    <input id="clrBtn" class="btn btn-primary" name="exportall" type="submit" value="Export All">
                </div>
                <div class="col-md-1 form-group">
                    <input id="clrBtn" class="btn btn-primary" name="export_maps" type="submit" value="Maps coordinate">
                </div>
            </form>




            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="">
                        <div class="">

                            <div class="clearfix"></div>

                        </div>
                    </div>
                    <div class="row">

                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="form-control d-none" id="route-66-dropdown">

                                </select>
                            </div>

                        </div>
                    </div>

                    <div class="table-responsive col-md-12">


                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Waypoint UID</th>
                                    <th>Triggers</th>
                                    <th>Date/Time</th>
                                </tr>
                            </thead>
                            <tbody id="live_form">
                                                                <tr>

                                    No Results found

                                </tr>
                                
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
<script type="text/javascript">
    $(document).ready(function() {
        
        var start = moment().subtract(29, 'days');
        var end = moment();

        function cb(start, end) {
            $('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
        }

        $('#daterange').daterangepicker({
            "startDate": "08/22/2015",
            "endDate": "08/22/25",
            'ranges': {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                    'month').endOf('month')]
            }
        }, function(start, end, label) {
            $('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
            $('.startdate').val(start.format('YYYY-MM-DD'));
            $('.enddate').val(end.format('YYYY-MM-DD'));
            console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format(
                'YYYY-MM-DD') + ' (predefined range: ' + label + ')');
        });

    });
</script>
@push('jsCode')
    <style type="text/css">
        .daterangepicker .ranges li:hover {
            background-color: #ccc !important;
        }

        .switch {

            position: relative;

            display: inline-block;

            width: 52px;
            height: 27px;


        }



        .switch input {
            display: none;
        }
    </style>


    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush