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


                <!-- Cards Section -->
                <div class="cards-grid">
                    <!-- Raw Banana -->
                    <div class="stat-card">
                        <div class="card-icon raw"><img src="{{ asset('images/raw_banana.svg') }}" alt="Pisang Mentah" onerror="this.src=''; this.parentElement.innerHTML='<i class=\'fas fa-lemon\'></i>';"/></div>
                        <div class="card-info">
                            <p class="card-label">Pisang Mentah</p>
                            <h3 class="card-value"><span id="val_raw_banana">0.00</span> <small>g</small></h3>
                        </div>
                    </div>
                    <!-- Raw Orange -->
                    <div class="stat-card">
                        <div class="card-icon raw"><img src="{{ asset('images/raw_orange.svg') }}" alt="Jeruk Mentah" onerror="this.src=''; this.parentElement.innerHTML='<i class=\'fas fa-apple-alt\'></i>';"/></div>
                        <div class="card-info">
                            <p class="card-label">Jeruk Mentah</p>
                            <h3 class="card-value"><span id="val_raw_orange">0.00</span> <small>g</small></h3>
                        </div>
                    </div>
                    <!-- Ripe Banana -->
                    <div class="stat-card ripe-card">
                        <div class="card-icon ripe"><img src="{{ asset('images/ripe_banana.svg') }}" alt="Pisang Matang" onerror="this.src=''; this.parentElement.innerHTML='<i class=\'fas fa-lemon\'></i>';"/></div>
                        <div class="card-info">
                            <p class="card-label text-warning">Pisang Matang</p>
                            <h3 class="card-value text-warning"><span id="val_ripe_banana">0.00</span> <small>g</small></h3>
                        </div>
                    </div>
                    <!-- Ripe Orange -->
                    <div class="stat-card ripe-card">
                        <div class="card-icon ripe"><img src="{{ asset('images/ripe_orange.svg') }}" alt="Jeruk Matang" onerror="this.src=''; this.parentElement.innerHTML='<i class=\'fas fa-apple-alt\'></i>';"/></div>
                        <div class="card-info">
                            <p class="card-label text-warning">Jeruk Matang</p>
                            <h3 class="card-value text-warning"><span id="val_ripe_orange">0.00</span> <small>g</small></h3>
                        </div>
                    </div>
                </div>

                <!-- 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>

                
<!-- Foto Section -->
                <div class="section-container" id="fotoSection">
                    <div class="section-header">
                        <div class="section-title">
                            <i class="fas fa-camera"></i> Foto Deteksi Buah
                        </div>
                        <div class="section-actions flex-wrap">
                            <div class="filter-bar">
                                <div class="filter-tabs">
                                    <button class="filter-tab active" data-filter="session" id="tabFotoSession">Sesi</button>
                                    <button class="filter-tab" data-filter="today" id="tabFotoToday">Hari ini</button>
                                    <button class="filter-tab" data-filter="week" id="tabFotoWeek">Minggu</button>
                                    <button class="filter-tab" data-filter="month" id="tabFotoMonth">Bulan</button>
                                    <button class="filter-tab" data-filter="custom" id="tabFotoCustom">Custom</button>
                                </div>
                                <div class="filter-extra">
                                    <select id="filterFotoSessionId" class="date-input filter-session-select" style="display:none;"></select>
                                    <div id="customFotoDateRange" class="custom-date-range" style="display:none;">
                                        <input type="date" id="filterFotoDateFrom" class="date-input" />
                                        <span>-</span>
                                        <input type="date" id="filterFotoDateTo" class="date-input" />
                                        <button id="btnApplyFotoFilter" class="btn-primary btn-sm"><i class="fas fa-check"></i></button>
                                    </div>
                                </div>
                            </div>
                            <select id="filterFotoLabel" class="date-input select-label">
                                <option value="">Semua Buah</option>
                                <option value="pisang matang">Pisang Matang</option>
                                <option value="pisang mentah">Pisang Mentah</option>
                                <option value="jeruk matang">Jeruk Matang</option>
                                <option value="jeruk mentah">Jeruk Mentah</option>
                            </select>
                            <button class="btn-icon" id="btnRefreshFoto" title="Refresh"><i class="fas fa-sync-alt"></i></button>
                        </div>
                    </div>
                    <div class="foto-grid" id="fotoGrid">
                        <div class="foto-empty">Belum ada foto tersimpan.</div>
                    </div>
                </div>

            
@endsection