@extends('voyager::master')

@section('content')
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
            @if (Route::has('login'))
                <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
                    @auth
                        <a href="{{ url('/home') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Home</a>
                    @else
                        <a href="{{ route('login') }}" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</a>
                        @endif
                    @endauth
                </div>
            @endif
        </div>

        <style>
            #customers {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            }

            #customers td, #customers th {
            border: 1px solid #ddd;
            padding: 8px;
            }

            #customers tr:nth-child(even){background-color: #f2f2f2;}

            #customers tr:hover {background-color: #ddd;}

            #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: #04AA6D;
            color: white;
            }
            .text-middle{
                text-align:center !important;
            }
            </style>

        <div class="text-center py-0">
            <div class="reportcontainer">
            <div class="row my-3 justify-content-center">
                <div class="col-md-9">
                <h1 contenteditable="true">Report AWH</h1>
                <p class="lead text-muted">{{$tanggal_awal}} - {{$tanggal_akhir}}</p>
                <form method="GET" action="/all-report">
                    <div class="row">
                         <div class="col-md-2">
                         </div>
                        <div class="col-md-2" style="margin-top: 5px;">
                            <p>Pilih Tanggal Awal</p>
                        </div>
                        <div class="col-md-3">
                            <input type="date" class="form-control" name="startTime" id="datepicker" value="{{$tgl}}">
                        </div>
                        <!-- <select name="startTime" class="form-control" id="sel1">
                        <option>Pilih Tanggal</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        <option>{{$k}}</option>
                        
                        </select> -->
                        <div class="col-md-2" style="margin-top: -5px;">
                            <input class="btn btn-primary btn-sm m-2 btn-block" type="button" onclick="filter_date()" value="Pilih Tanggal">
                        </div>
                        <div class="col-md-2" style="margin-top: -5px;">
                            <button onclick="exportToExcel()"class="btn btn-success btn-sm m-2 btn-block">Export Excel</button>
                        </div>
                    </div>

                </form>
                <!-- <a href="#" class="btn btn-primary m-2">Reload</a> -->
                </div>
            </div>
            </div>
        </div>
        <div>

        <table id="customers" style="color:black">
            <tr>
                {{-- <th class="text-middle">No</th> --}}
                <th class="text-middle">Nama</th>
                                <th class="text-middle">{{$human_day[$k]}} <br/>{{$human_date[$k]}}</th>
                                <th class="text-middle">{{$human_day[$k]}} <br/>{{$human_date[$k]}}</th>
                                <th class="text-middle">{{$human_day[$k]}} <br/>{{$human_date[$k]}}</th>
                                <th class="text-middle">{{$human_day[$k]}} <br/>{{$human_date[$k]}}</th>
                                <th class="text-middle">{{$human_day[$k]}} <br/>{{$human_date[$k]}}</th>
                                <th class="text-middle">{{$human_day[$k]}} <br/>{{$human_date[$k]}}</th>
                                <th class="text-middle">{{$human_day[$k]}} <br/>{{$human_date[$k]}}</th>
                                <th class="text-middle">Total AWH</th>
            </tr>