@extends('backend.layouts.main')
@section('panel')
    <h4 class="fw-bold py-3 mb-3">
        Financial Reports
    </h4>

    <div class="card mb-4">
        <div class="card-body">
            <form id="filter-form" class="row align-items-end">
                <div class="col-md-3">
                    <label for="from_date" class="form-label">Dari Tanggal</label>
                    <input type="date" class="form-control" id="from_date" name="from_date">
                </div>
                <div class="col-md-3">
                    <label for="to_date" class="form-label">Sampai Tanggal</label>
                    <input type="date" class="form-control" id="to_date" name="to_date">
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary me-2">Terapkan Filter</button>
                    <button type="button" class="btn btn-secondary" id="btn-reset">Reset</button>
                </div>
                <div class="col-md-2 text-end">
                    <select class="form-select" id="quick_filter">
                        <option value="">-- Pilih Cepat --</option>
                        <option value="today">Hari Ini</option>
                        <option value="weekly">Minggu Ini</option>
                        <option value="monthly">Bulan Ini</option>
                        <option value="yearly">Tahun Ini</option>
                    </select>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-datatable table-responsive">
                    <table id="data-table" class="table table-bordered table-sm w-100">
                        <thead class="table-dark">
                            <tr>
                                <th class="text-center" style="font-size: 12px;">No</th>
                                <th class="text-center" style="font-size: 12px;">Tanggal</th>
                                <th class="text-center" style="font-size: 12px;">Member Aktif</th>
                                <th class="text-center" style="font-size: 12px;">Jml Depo</th>
                                <th class="text-center" style="font-size: 12px;">Total Depo</th>
                                <th class="text-center" style="font-size: 12px;">Depo Sukses</th>
                                <th class="text-center" style="font-size: 12px;">Total WD</th>
                                <th class="text-center" style="font-size: 12px;">WD Sukses</th>
                                <th class="text-center" style="font-size: 12px;">Total Bonus</th>
                                <th class="text-center" style="font-size: 12px;">Profit</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
<script type="text/javascript">
    $(function () {
        // Inisialisasi DataTables
        var table = $('#data-table').DataTable({
            processing: true,
            serverSide: true,
            lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
            ajax: {
                url: "{{ url()->current() }}",
                type: "GET",
                data: function (d) {
                    // Kirim data filter ke controller
                    d.from_date = $('#from_date').val();
                    d.to_date = $('#to_date').val();
                }
            },
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                {data: 'created_at', name: 'created_at'},
                {data: 'members', name: 'members'},
                {data: 'no_deposit', name: 'no_deposit'},
                {data: 'deposit', name: 'deposit'},
                {data: 'deposit_success', name: 'deposit_success'},
                {data: 'withdraw', name: 'withdraw'},
                {data: 'withdraw_success', name: 'withdraw_success'},
                {data: 'bonus', name: 'bonus'},
                {data: 'profit', name: 'profit'}
            ],
            columnDefs: [
                { className: 'text-center align-middle', targets: '_all' }
            ]
        });

        // Event Submit Filter Manual
        $('#filter-form').on('submit', function(e) {
            e.preventDefault();
            table.draw();
        });

        // Event Reset Filter
        $('#btn-reset').on('click', function() {
            $('#from_date').val('');
            $('#to_date').val('');
            $('#quick_filter').val('');
            table.draw();
        });

        // Event Quick Filter (Hari ini, Minggu ini, dll)
        $('#quick_filter').on('change', function() {
            let filter = $(this).val();
            
            // Mengambil tanggal LOKAL browser saat ini
            let today = new Date();
            let year = today.getFullYear();
            // padStart digunakan agar bulan/tanggal yang 1 digit ditambah '0' di depannya (misal: 3 jadi 03)
            let month = String(today.getMonth() + 1).padStart(2, '0'); 
            let day = String(today.getDate()).padStart(2, '0');
            
            let toDate = `${year}-${month}-${day}`; // Format akhir: YYYY-MM-DD
            let fromDate = "";

            if (filter === 'today') {
                fromDate = toDate;
            } else if (filter === 'weekly') {
                // Mundur 7 hari dari hari ini
                let lastWeek = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000));
                let lwYear = lastWeek.getFullYear();
                let lwMonth = String(lastWeek.getMonth() + 1).padStart(2, '0');
                let lwDay = String(lastWeek.getDate()).padStart(2, '0');
                fromDate = `${lwYear}-${lwMonth}-${lwDay}`;
            } else if (filter === 'monthly') {
                // Set selalu ke tanggal 1 di bulan yang sama
                fromDate = `${year}-${month}-01`;
            } else if (filter === 'yearly') {
                // Set selalu ke tanggal 1 Januari di tahun yang sama
                fromDate = `${year}-01-01`;
            }

            if(filter !== "") {
                $('#from_date').val(fromDate);
                $('#to_date').val(toDate);
                table.draw();
            }
        });
    });
</script>
@endpush