@extends('layouts.master')

@section('styles')
    @include('layouts.components.datatable-assets')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .stat-card-custom {
            border-radius: 14px;
            transition: all 0.25s ease;
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }
        .stat-card-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .filter-card {
            border-radius: 14px;
            border: 1px solid rgba(0, 0, 0, 0.07);
            background: #ffffff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
        }
        .btn-preset {
            border-radius: 20px;
            font-size: 11.5px;
            font-weight: 600;
            padding: 4px 12px;
            transition: all 0.2s ease;
        }
        .btn-preset.active {
            background-color: #2B5240 !important;
            color: #ffffff !important;
            border-color: #2B5240 !important;
        }
        .order-code-badge {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 12px;
            font-weight: 700;
            color: #0284c7;
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            padding: 3px 8px;
            border-radius: 6px;
        }
        .badge-pulse {
            animation: pulse-op 2s infinite;
        }
        @keyframes pulse-op {
            0% { opacity: 1; }
            50% { opacity: 0.55; }
            100% { opacity: 1; }
        }
    </style>
@endsection

@section('content')

    <div class="page-header-breadcrumb mb-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
            <div>
                <h1 class="page-title fw-bold fs-18 mb-1">
                    <i class="ri-file-chart-line me-1 text-success"></i> Laporan Keuangan & Arus Transaksi
                </h1>
                <p class="text-muted mb-0 fs-13">Rekapitulasi arus dana masuk (pembelian), pencairan (penjualan unit), laba bersih, serta ekspor pembukuan resmi ke Excel.</p>
            </div>
            <div class="d-flex align-items-center gap-2">
                <a href="javascript:void(0);" id="btn-export-excel" class="btn btn-success btn-wave shadow-sm">
                    <i class="ri-file-excel-2-line me-1"></i> Export Excel (.xls)
                </a>
                <a href="javascript:void(0);" id="btn-export-csv" class="btn btn-outline-secondary btn-wave">
                    <i class="ri-file-text-line me-1"></i> Export CSV
                </a>
                <button type="button" class="btn btn-light border btn-wave" id="btn-refresh" title="Muat Ulang">
                    <i class="ri-refresh-line"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-xl-4 g-3 mb-4">

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-bold text-uppercase mb-1">TOTAL INFLOW (MASUK)</span>
                            <h3 class="mb-0 fw-bold text-success fs-18" id="stat-gross-inflow">{{ $initialStats['gross_inflow_formatted'] ?? 'Rp 0' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><span id="stat-paid-count" class="fw-bold">{{ $initialStats['paid_count'] ?? '0' }}</span> Pembelian Sukses</span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent rounded-circle">
                            <i class="ri-arrow-down-circle-line fs-22 text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-bold text-uppercase mb-1">TOTAL OUTFLOW (PENCAIRAN)</span>
                            <h3 class="mb-0 fw-bold text-danger fs-18" id="stat-gross-outflow">{{ $initialStats['gross_outflow_formatted'] ?? 'Rp 0' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><span id="stat-redeemed-count" class="fw-bold">{{ $initialStats['redeemed_count'] ?? '0' }}</span> Pencairan Sukses</span>
                        </div>
                        <div class="avatar avatar-md bg-danger-transparent rounded-circle">
                            <i class="ri-arrow-up-circle-line fs-22 text-danger"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-bold text-uppercase mb-1">ARUS KAS BERSIH (NET)</span>
                            <h3 class="mb-0 fw-bold text-primary fs-18" id="stat-net-cash-flow">{{ $initialStats['net_cash_flow_formatted'] ?? 'Rp 0' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block">Inflow dikurangi Outflow</span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent rounded-circle">
                            <i class="ri-scales-3-line fs-22 text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card custom-card stat-card-custom mb-0 h-100">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="d-block text-muted fs-11 fw-bold text-uppercase mb-1">TOTAL TRANSAKSI SUKSES</span>
                            <h3 class="mb-0 fw-bold text-dark fs-18" id="stat-total-transactions">{{ $initialStats['total_transactions_formatted'] ?? '0' }}</h3>
                            <span class="text-muted fs-11 mt-1 d-block"><span id="stat-sub-paid" class="fw-bold text-success">{{ $initialStats['paid_count'] ?? '0' }}</span> Masuk • <span id="stat-sub-redeemed" class="fw-bold text-danger">{{ $initialStats['redeemed_count'] ?? '0' }}</span> Cair</span>
                        </div>
                        <div class="avatar avatar-md bg-indigo-transparent rounded-circle">
                            <i class="ri-checkbox-circle-line fs-22 text-indigo"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card custom-card filter-card mb-4">
        <div class="card-header d-flex align-items-center justify-content-between py-2 border-bottom">
            <div class="card-title fs-14 fw-semibold text-dark mb-0">
                <i class="ri-filter-3-line me-1 text-primary"></i> Filter & Rentang Tanggal Laporan
            </div>
            <button type="button" class="btn btn-sm btn-link text-muted p-0 text-decoration-none" id="btn-reset-filters">
                <i class="ri-restart-line me-1"></i> Reset Filter
            </button>
        </div>
        <div class="card-body p-3">

            <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
                <span class="fs-12 fw-semibold text-muted me-2"><i class="ri-calendar-line me-1"></i>Pilihan Cepat:</span>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset" data-preset="today">Hari Ini</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset" data-preset="yesterday">Kemarin</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset" data-preset="last_7_days">7 Hari Terakhir</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset" data-preset="last_30_days">30 Hari Terakhir</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset active" data-preset="this_month">Bulan Ini</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset" data-preset="last_month">Bulan Lalu</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset" data-preset="this_year">Tahun Ini</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset" data-preset="all_time">Semua Waktu</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-preset" data-preset="custom">Kustom Rentang Tanggal</button>
            </div>

            <form id="financial-filter-form" class="row g-2 align-items-end">
                <input type="hidden" name="date_preset" id="filter-date-preset" value="this_month">

                <div class="col-md-3 col-sm-6 custom-date-col" style="display: none;">
                    <label class="form-label fs-12 fw-semibold text-muted mb-1">Tanggal Mulai (Dari):</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light"><i class="ri-calendar-event-line"></i></span>
                        <input type="date" class="form-control form-control-sm" id="filter-start-date" name="start_date">
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 custom-date-col" style="display: none;">
                    <label class="form-label fs-12 fw-semibold text-muted mb-1">Tanggal Selesai (Sampai):</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light"><i class="ri-calendar-event-line"></i></span>
                        <input type="date" class="form-control form-control-sm" id="filter-end-date" name="end_date">
                    </div>
                </div>

                <div class="col-md-2 col-sm-6">
                    <label class="form-label fs-12 fw-semibold text-muted mb-1">Tipe Transaksi:</label>
                    <select class="form-select form-select-sm" id="filter-type" name="type">
                        <option value="">Semua Tipe</option>
                        <option value="inflow">Pembelian (Inflow)</option>
                        <option value="outflow">Pencairan / Redeem (Outflow)</option>
                    </select>
                </div>

                <div class="col-md-2 col-sm-6">
                    <label class="form-label fs-12 fw-semibold text-muted mb-1">Status Transaksi:</label>
                    <select class="form-select form-select-sm" id="filter-status" name="status">
                        <option value="ALL">Semua Status Sukses</option>
                        <option value="PAID">PAID (Lunas)</option>
                        <option value="REDEEMED">REDEEMED (Pencairan Sukses)</option>
                    </select>
                </div>

                <div class="col-md-3 col-sm-6">
                    <label class="form-label fs-12 fw-semibold text-muted mb-1">Produk Investasi:</label>
                    <select class="form-select form-select-sm" id="filter-product" name="product_id">
                        <option value="ALL">Semua Produk</option>
                        @foreach($products as $prod)
                            <option value="{{ $prod->id }}">{{ $prod->name }} ({{ $prod->code }})</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3 col-sm-6">
                    <label class="form-label fs-12 fw-semibold text-muted mb-1">Metode Pembayaran:</label>
                    <select class="form-select form-select-sm" id="filter-payment-method" name="payment_method">
                        <option value="ALL">Semua Metode</option>
                        @foreach($paymentMethods as $pm)
                            <option value="{{ $pm }}">{{ $pm }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2 col-sm-6">
                    <button type="button" class="btn btn-sm btn-primary w-100" id="btn-apply-filter">
                        <i class="ri-search-line me-1"></i> Terapkan Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="card custom-card">
        <div class="card-header justify-content-between border-bottom-0 flex-wrap gap-2 py-3">

            <div class="d-flex align-items-center gap-2 flex-grow-1" style="max-width: 360px;">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0 text-muted"><i class="ri-search-line"></i></span>
                    <input class="form-control border-start-0" type="search" id="financial-search-input" placeholder="Cari no order, nama investor, produk..." aria-label="Search">
                </div>
            </div>
            <div class="d-flex align-items-center gap-2">
                <span class="badge bg-light text-muted border py-1 px-2 fs-12" id="label-active-period">
                    Periode: Bulan Ini
                </span>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-refresh-table" title="Refresh Data">
                    <i class="ri-refresh-line me-1"></i>Refresh
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="financial-report-table" class="table table-hover text-nowrap w-100 align-middle">
                    <thead class="table-success">
                        <tr>
                            <th style="width: 50px;">NO</th>
                            <th>NO. ORDER</th>
                            <th>TANGGAL</th>
                            <th>INVESTOR</th>
                            <th>PRODUK REKSA DANA</th>
                            <th>TIPE TRANSAKSI</th>
                            <th class="text-end">NOMINAL (IDR)</th>
                            <th class="text-end">UNIT & NAB</th>
                            <th>METODE BAYAR</th>
                            <th class="text-center">STATUS</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        $(document).ready(function() {

            flatpickr("#filter-start-date", { dateFormat: "Y-m-d" });
            flatpickr("#filter-end-date", { dateFormat: "Y-m-d" });

            const dataTable = (typeof AppDatatable !== 'undefined')
                ? AppDatatable.init('#financial-report-table', {
                    ajax: {
                        url: "{{ route('financial-reports.api.list') }}",
                        type: "GET",
                        data: function(d) {
                            d.date_preset     = $('#filter-date-preset').val();
                            d.start_date      = $('#filter-start-date').val();
                            d.end_date        = $('#filter-end-date').val();
                            d.type            = $('#filter-type').val();
                            d.status          = $('#filter-status').val();
                            d.product_id      = $('#filter-product').val();
                            d.payment_method  = $('#filter-payment-method').val();
                            d.search_query    = $('#financial-search-input').val();
                        }
                    },
                    columns: [
                        { data: 'index', name: 'id', orderable: false, searchable: false, className: 'text-center' },
                        { data: 'order_number', name: 'order_number' },
                        { data: 'date', name: 'created_at' },
                        { data: 'user', name: 'user_id' },
                        { data: 'product', name: 'investment_product_id' },
                        { data: 'type', name: 'order_number' },
                        { data: 'amount', name: 'amount', className: 'text-end' },
                        { data: 'units', name: 'units', className: 'text-end' },
                        { data: 'payment_method', name: 'payment_method' },
                        { data: 'status', name: 'status', className: 'text-center' },
                    ],
                    order: [[2, 'desc']],
                    pageLength: 10,
                })
                : $('#financial-report-table').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    stateSave: true,
                    stateDuration: 7200,
                    dom: "<'row'<'col-12'tr>>" +
                         "<'row align-items-center mt-3 pt-3 border-top g-2'<'col-sm-12 col-md-6 d-flex align-items-center gap-2 justify-content-sm-start justify-content-center'l i><'col-sm-12 col-md-6 d-flex justify-content-sm-end justify-content-center'p>>",
                    ajax: {
                        url: "{{ route('financial-reports.api.list') }}",
                        type: "GET",
                        data: function(d) {
                            d.date_preset     = $('#filter-date-preset').val();
                            d.start_date      = $('#filter-start-date').val();
                            d.end_date        = $('#filter-end-date').val();
                            d.type            = $('#filter-type').val();
                            d.status          = $('#filter-status').val();
                            d.product_id      = $('#filter-product').val();
                            d.payment_method  = $('#filter-payment-method').val();
                            d.search_query    = $('#financial-search-input').val();
                        }
                    },
                    columns: [
                        { data: 'index', name: 'id', orderable: false, searchable: false, className: 'text-center' },
                        { data: 'order_number', name: 'order_number' },
                        { data: 'date', name: 'created_at' },
                        { data: 'user', name: 'user_id' },
                        { data: 'product', name: 'investment_product_id' },
                        { data: 'type', name: 'order_number' },
                        { data: 'amount', name: 'amount', className: 'text-end' },
                        { data: 'units', name: 'units', className: 'text-end' },
                        { data: 'payment_method', name: 'payment_method' },
                        { data: 'status', name: 'status', className: 'text-center' },
                    ],
                    order: [[2, 'desc']],
                    pageLength: 10,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                    language: {
                        processing: '<div class="spinner-border spinner-border-sm text-primary me-2"></div> Memuat data laporan...',
                        lengthMenu: 'Tampilkan _MENU_ entri',
                        info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ data',
                        infoEmpty: 'Menampilkan 0 sampai 0 dari 0 data',
                        infoFiltered: '(disaring dari _MAX_ total data)',
                        zeroRecords: '<div class="py-4 text-center text-muted"><i class="ri-inbox-2-line fs-24 d-block mb-1 text-muted opacity-50"></i><span class="fs-13">Tidak ada data transaksi yang cocok</span></div>',
                        paginate: {
                            first: '<i class="ri-skip-back-line"></i>',
                            last: '<i class="ri-skip-forward-line"></i>',
                            next: '<i class="ri-arrow-right-s-line"></i>',
                            previous: '<i class="ri-arrow-left-s-line"></i>'
                        }
                    }
                });

            if (typeof AppDatatable !== 'undefined' && typeof AppDatatable.bindSearch === 'function') {
                AppDatatable.bindSearch(dataTable, '#financial-search-input');
            } else {
                let searchTimeout;
                $('#financial-search-input').on('input', function() {
                    clearTimeout(searchTimeout);
                    const val = $(this).val();
                    searchTimeout = setTimeout(function() {
                        dataTable.search(val).draw();
                    }, 400);
                });
            }

            $('#btn-refresh-table').on('click', function() {
                dataTable.ajax.reload();
                refreshStats();
            });

            function refreshStats() {
                $.ajax({
                    url: "{{ route('financial-reports.api.stats') }}",
                    type: "GET",
                    data: {
                        date_preset:    $('#filter-date-preset').val(),
                        start_date:     $('#filter-start-date').val(),
                        end_date:       $('#filter-end-date').val(),
                        type:           $('#filter-type').val(),
                        status:         $('#filter-status').val(),
                        product_id:     $('#filter-product').val(),
                        payment_method: $('#filter-payment-method').val(),
                    },
                    success: function(res) {
                        if (res.success && res.data) {
                            const d = res.data;
                            $('#stat-gross-inflow').text(d.gross_inflow_formatted);
                            $('#stat-paid-count').text(d.paid_count);
                            $('#stat-gross-outflow').text(d.gross_outflow_formatted);
                            $('#stat-redeemed-count').text(d.redeemed_count);
                            $('#stat-net-cash-flow').text(d.net_cash_flow_formatted);
                            $('#stat-total-transactions').text(d.total_transactions_formatted);
                            $('#stat-sub-paid').text(d.paid_count);
                            $('#stat-sub-redeemed').text(d.redeemed_count);
                        }
                    }
                });
            }

            function updateExportUrls() {
                const params = $.param({
                    date_preset:    $('#filter-date-preset').val(),
                    start_date:     $('#filter-start-date').val(),
                    end_date:       $('#filter-end-date').val(),
                    type:           $('#filter-type').val(),
                    status:         $('#filter-status').val(),
                    product_id:     $('#filter-product').val(),
                    payment_method: $('#filter-payment-method').val(),
                    search_query:   dataTable.search() || '',
                });

                $('#btn-export-excel').attr('href', "{{ route('financial-reports.export.excel') }}?" + params);
                $('#btn-export-csv').attr('href', "{{ route('financial-reports.export.csv') }}?" + params);
            }

            $('.btn-preset').on('click', function() {
                $('.btn-preset').removeClass('active');
                $(this).addClass('active');

                const preset = $(this).data('preset');
                $('#filter-date-preset').val(preset);

                if (preset === 'custom') {
                    $('.custom-date-col').show();
                } else {
                    $('.custom-date-col').hide();
                    $('#filter-start-date').val('');
                    $('#filter-end-date').val('');

                    $('#label-active-period').text('Periode: ' + $(this).text());

                    dataTable.page(0).ajax.reload();
                    refreshStats();
                    updateExportUrls();
                }
            });

            $('#btn-apply-filter').on('click', function() {
                const activePresetText = $('.btn-preset.active').text();
                const startDate = $('#filter-start-date').val();
                const endDate = $('#filter-end-date').val();

                if ($('#filter-date-preset').val() === 'custom' && startDate && endDate) {
                    $('#label-active-period').text('Periode: ' + startDate + ' s/d ' + endDate);
                } else {
                    $('#label-active-period').text('Periode: ' + activePresetText);
                }

                dataTable.page(0).ajax.reload();
                refreshStats();
                updateExportUrls();
            });

            $('#btn-refresh').on('click', function() {
                dataTable.ajax.reload();
                refreshStats();
                updateExportUrls();
            });

            $('#btn-reset-filters').on('click', function() {
                $('#financial-filter-form')[0].reset();
                $('.btn-preset').removeClass('active');
                $('.btn-preset[data-preset="this_month"]').addClass('active');
                $('#filter-date-preset').val('this_month');
                $('.custom-date-col').hide();
                $('#label-active-period').text('Periode: Bulan Ini');

                dataTable.state.clear();
                dataTable.page(0).ajax.reload();
                refreshStats();
                updateExportUrls();
            });

            updateExportUrls();
        });
    </script>
@endsection