@extends('layouts.frontend')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/6.0.1/css/tempus-dominus.min.css">
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <div id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-white sidebar collapse">
            <div class="position-sticky pt-3">
                <h4 class="px-3 mb-3">Report History</h4>
                
                <div class="col-md-12">
                    <input type="date" id="dayPicker" class="form-control mb-3" value="{{ $date }}">
                </div>
                {{-- <div class="col-md-12">
                    <select id="hourPicker" class="form-control mb-3">
                        @for($i = 0; $i < 24; $i++)
                            <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}">
                                {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}:00
                            </option>
                        @endfor
                    </select>
                </div>  --}}
                <input type="text" id="hourPicker" value="00" hidden>
                <div class="form-group">
                    <a class="btn btn-outline-primary" href="{{ route('frontend.dashboard') }}">
                        Back To Dasboard
                    </a>
                </div>                               
            </div>          
        </div>
        
        <!-- Main Content -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4 bg-secondary">
            <!-- Stats Cards -->
            @if($reports->count())
            <div class="row">
                <div class="col-md-12 mb-3 mb-md-0">
                    <div class="card">
                        <div class="card-header">
                            <div id="selectionIndicator" class="p-2 text-center">
                                <span style="font-size: 1.5em;" id="selectedDateTime" class="badge bg-primary">{{ $date }}</span>
                                <span style="font-size: 1.5em;" id="excel" class="badge bg-success" onclick="downloadExcel()">Download Excel</span>
                        </div>
                        <div class="card-body">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Year</th>
                                        <th>Month</th>
                                        <th>Date</th>
                                        <th>Hour</th>
                                        <th>Mobil</th>
                                        <th>Truk</th>
                                        <th>Motor</th>
                                        <th>Sepeda</th>
                                        <th>Crowd</th>
                                        <th>Pencurian JPO</th>
                                        <!-- <th>JSON</th> -->
                                        <th>Created At</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($reports as $report)
                                        <tr>
                                            <td>{{ $report->year }}</td>
                                            <td>{{ \App\Models\Report::MONTH_SELECT[$report->month] }}</td>
                                            <td>{{ $report->date }}</td>
                                            <td>{{ str_pad($report->hour, 2, '0', STR_PAD_LEFT) }}</td>
                                            <td>{{ json_decode($report->attributes)->car_count ?? '-' }}</td>
                                            <td>{{ json_decode($report->attributes)->truck_count ?? '-' }}</td>
                                            <td>{{ json_decode($report->attributes)->motorcycle_count ?? '-' }}</td>
                                            <td>{{ json_decode($report->attributes)->bicycle_count ?? '-' }}</td>
                                            <td>{{ json_decode($report->attributes)->crowd ?? '-' }}</td>
                                            <td>{{ json_decode($report->attributes)->pencurian_jpo ?? '-' }}</td>
                                            <!-- <td>{{ $report->attributes }}</td> -->
                                            <td>{{ $report->created_at }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </main>

    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dayPicker = document.getElementById('dayPicker');
        const hourPicker = document.getElementById('hourPicker');
        [dayPicker, hourPicker].forEach(picker => {
            picker.addEventListener('change', function() {
                window.location.href = "?date=" + dayPicker.value;
            });
        });
    });
</script>
<script>
function downloadExcel() {
  const link = document.createElement('a');
  link.href = '/path/to/your/file.xlsx'; // Update with your file path
  link.download = 'report.xlsx'; // Default filename
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>
@endsection