@extends('layouts.app')
@section('content')

                <!-- Calculation Summary Section -->
                <div class="section-container" id="summarySection">
                    <div class="section-header">
                        <div class="section-title">
                            <i class="fas fa-calculator"></i> Ringkasan Kalkulasi Sesi
                        </div>
                    </div>
                    <div class="summary-grid">
                        <div class="summary-item">
                            <span class="summary-label">🍌 Pisang Mentah</span>
                            <span class="summary-value"><span id="sum_raw_banana">0.00</span> <small>g</small></span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">🍌 Pisang Matang</span>
                            <span class="summary-value"><span id="sum_ripe_banana">0.00</span> <small>g</small></span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">🍊 Jeruk Mentah</span>
                            <span class="summary-value"><span id="sum_raw_orange">0.00</span> <small>g</small></span>
                        </div>
                        <div class="summary-item">
                            <span class="summary-label">🍊 Jeruk Matang</span>
                            <span class="summary-value"><span id="sum_ripe_orange">0.00</span> <small>g</small></span>
                        </div>
                        <div class="summary-item highlight">
                            <span class="summary-label">📊 Total Data Masuk</span>
                            <span class="summary-value"><span id="sum_total_records">0</span> <small>record</small></span>
                        </div>
                        <div class="summary-item highlight-alt">
                            <span class="summary-label">⚖️ Total Berat</span>
                            <span class="summary-value"><span id="sum_grand_total">0.00</span> <small>g</small></span>
                        </div>
                    </div>
                </div>

                <!-- History Section -->
                <div class="section-container" id="historySection">
                    <div class="section-header">
                        <div class="section-title">
                            <i class="fas fa-clipboard-list"></i> Riwayat Sortirasi
                        </div>
                        <div class="section-actions">
                            <div class="filter-bar">
                                <div class="filter-tabs">
                                    <button class="filter-tab active" data-filter="session" id="tabSession">Sesi</button>
                                    <button class="filter-tab" data-filter="today" id="tabToday">Hari ini</button>
                                    <button class="filter-tab" data-filter="week" id="tabWeek">Minggu</button>
                                    <button class="filter-tab" data-filter="month" id="tabMonth">Bulan</button>
                                    <button class="filter-tab" data-filter="custom" id="tabCustom">Custom</button>
                                </div>
                                <div class="filter-extra">
                                    <select id="filterSessionId" class="date-input filter-session-select" style="display:none;"></select>
                                    <div id="customDateRange" class="custom-date-range" style="display:none;">
                                        <input type="date" id="filterDateFrom" class="date-input" />
                                        <span>-</span>
                                        <input type="date" id="filterDateTo" class="date-input" />
                                        <button id="btnApplyFilter" class="btn-primary btn-sm"><i class="fas fa-check"></i></button>
                                    </div>
                                </div>
                            </div>
                            <button class="btn-icon" id="btnRefresh" title="Refresh"><i class="fas fa-sync-alt"></i></button>
                        </div>
                    </div>
                    <div class="table-wrapper">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Tanggal & Waktu</th>
                                    <th>P. Mentah</th>
                                    <th>P. Matang</th>
                                    <th>J. Mentah</th>
                                    <th>J. Matang</th>
                                </tr>
                            </thead>
                            <tbody id="historyTableBody">
                                <tr><td colspan="5" class="empty-state">Belum ada data.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                @endsection