@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-12">
                <h1 contenteditable="true">Laporan Jam Kerja</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" colspan="2">{{$human_day[$k]}} <br />{{$human_date[$k]}}</th>
                                <th class="text-middle" colspan="2">{{$human_day[$k]}} <br />{{$human_date[$k]}}</th>
                                <th class="text-middle" colspan="2">{{$human_day[$k]}} <br />{{$human_date[$k]}}</th>
                                <th class="text-middle" colspan="2">{{$human_day[$k]}} <br />{{$human_date[$k]}}</th>
                                <th class="text-middle" colspan="2">{{$human_day[$k]}} <br />{{$human_date[$k]}}</th>
                                <th class="text-middle" colspan="2">{{$human_day[$k]}} <br />{{$human_date[$k]}}</th>
                                <th class="text-middle" colspan="2">{{$human_day[$k]}} <br />{{$human_date[$k]}}</th>
                            <th colspan="2" class="text-middle">Total AWH</th>
        </tr>
        <tr>
            {{-- <th class="text-middle">No</th> --}}
            <th class="text-middle"></th>
                            <th class="text-middle">Jam Masuk</th>
                <th class="text-middle">Jam Keluar</th>
                                <th class="text-middle">Jam Masuk</th>
                <th class="text-middle">Jam Keluar</th>
                                <th class="text-middle">Jam Masuk</th>
                <th class="text-middle">Jam Keluar</th>
                                <th class="text-middle">Jam Masuk</th>
                <th class="text-middle">Jam Keluar</th>
                                <th class="text-middle">Jam Masuk</th>
                <th class="text-middle">Jam Keluar</th>
                                <th class="text-middle">Jam Masuk</th>
                <th class="text-middle">Jam Keluar</th>
                                <th class="text-middle">Jam Masuk</th>
                <th class="text-middle">Jam Keluar</th>
                            <th class="text-middle">Total Jam Kerja</th>
            <th class="text-middle">Total Jam Istirahat</th>
        </tr>