@extends('layouts.app')
@push('styles')
    @include('_distributor.desktop.balance.partials.css')
@endpush
@section('content')
    <div class="header">
        <h1>Saldo Saya</h1>
        <div class="date-picker" id="dateRangePicker">
            <img src="https://cdn-icons-png.flaticon.com/128/3652/3652191.png" alt="Calendar Icon" class="icon-small">
            <span id="dateRangeDisplay">01 Jul 2025 - 17 Jul 2025</span>
        </div>
    </div>

    @include('_distributor.desktop.balance.partials.balance-section')

    <div class="card">
        <div class="card-body">
            @include('_distributor.desktop.balance.partials.tabs')
            <div id="saldoBerhasilContent" class="tab-content active">
                <div class="bottom-section">
                    <div class="search-filter-section">
                        <input type="text" placeholder="Cari ID Top Up, No Referensi">
                        <select>
                            <option>Semua Status</option>
                            <option>Status 1</option>
                            <option>Status 2</option>
                        </select>
                    </div>
                    <button class="download-report-button">
                        Download My Balance Report
                    </button>
                </div>
                <div class="data-not-found">
                    Data tidak ditemukan untuk Saldo Berhasil.
                </div>
            </div>
        </div>
    </div>
    @include('_distributor.desktop.balance.partials.modal-withdraw')
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @include('_distributor.desktop.balance.partials.script-withdraw')
@endpush