@extends('root')
@section('title', 'Expenses')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Expenses',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Expenses'
    ])

    {{-- Summary Cards --}}
    <div class="row mb-4" id="summary-cards">
        <div class="col-md-4 col-lg-2">
            <div class="card border-danger h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-danger text-danger" style="width:45px;height:45px;">
                            <i class="ti ti-receipt fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted small">Total (Filter)</h6>
                            <h5 class="mb-0 fw-semibold" id="summary-total">Rp 0</h5>
                            <small class="text-muted"><span id="summary-count">0</span> transaksi</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-2">
            <div class="card border-success h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-success text-success" style="width:45px;height:45px;">
                            <i class="ti ti-check fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted small">Paid</h6>
                            <h5 class="mb-0 fw-semibold text-success" id="summary-paid">Rp 0</h5>
                            <small class="text-muted"><span id="summary-count-paid">0</span> transaksi</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-2">
            <div class="card border-warning h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-warning text-warning" style="width:45px;height:45px;">
                            <i class="ti ti-clock fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted small">Unpaid</h6>
                            <h5 class="mb-0 fw-semibold text-warning" id="summary-unpaid">Rp 0</h5>
                            <small class="text-muted"><span id="summary-count-unpaid">0</span> transaksi</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-2">
            <div class="card border-primary h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-primary text-primary" style="width:45px;height:45px;">
                            <i class="ti ti-calendar fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted small">Bulan Ini</h6>
                            <h5 class="mb-0 fw-semibold" id="summary-this-month">Rp 0</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-2">
            <div class="card border-secondary h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-secondary text-secondary" style="width:45px;height:45px;">
                            <i class="ti ti-history fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted small">Bulan Lalu</h6>
                            <h5 class="mb-0 fw-semibold" id="summary-last-month">Rp 0</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-2">
            <div class="card border-info h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle d-flex align-items-center justify-content-center bg-light-info text-info" style="width:45px;height:45px;">
                            <i class="ti ti-trending-up fs-5"></i>
                        </div>
                        <div class="ms-3">
                            <h6 class="mb-0 text-muted small">Perubahan</h6>
                            <h5 class="mb-0 fw-semibold" id="summary-change">0%</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-body">
        {{-- Toolbar --}}
        <div class="row mb-3">
            <div class="col-md-8">
                <div class="row g-2">
                    <div class="col-md-3">
                        <input type="date" class="form-control" id="filter-date-from" placeholder="Dari Tanggal">
                    </div>
                    <div class="col-md-3">
                        <input type="date" class="form-control" id="filter-date-to" placeholder="Sampai Tanggal">
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="filter-category">
                            <option value="">Semua Kategori</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="filter-payment">
                            <option value="">Semua Metode</option>
                            @foreach($paymentMethods as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-2 mt-1">
                    <div class="col-md-3">
                        <select class="form-select" id="filter-status">
                            <option value="">Semua Status</option>
                            <option value="paid">Paid</option>
                            <option value="unpaid">Unpaid</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-4 text-end">
                <div class="btn-group">
                    <button class="btn btn-outline-success" id="btn-export">
                        <i class="ti ti-download me-1"></i> Export CSV
                    </button>
                    <a href="{{ route('admin.expense-categories.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-category me-1"></i> Kategori
                    </a>
                    <button class="btn btn-primary btn-create" data-url="{{ route('admin.expenses.create') }}">
                        <i class="ti ti-plus me-1"></i> Tambah Expense
                    </button>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped" id="datatable">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Kategori</th>
                        <th>Deskripsi</th>
                        <th>Jumlah</th>
                        <th>Metode</th>
                        <th>Status</th>
                        <th>Ref #</th>
                        <th>Lampiran</th>
                        <th>Bukti TF</th>
                        <th>Opsi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Set default filter to current month
    const now = new Date();
    const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
    const today = now;
    
    const formatDate = (d) => d.toISOString().split('T')[0];
    $('#filter-date-from').val(formatDate(firstDay));
    $('#filter-date-to').val(formatDate(today));

    // Load summary stats
    function loadSummary() {
        $.get('{{ route('admin.expenses.summary') }}', {
            date_from: $('#filter-date-from').val(),
            date_to: $('#filter-date-to').val(),
            category_id: $('#filter-category').val()
        }, function(res) {
            if (res.meta.status === 'success') {
                $('#summary-total').text('Rp ' + parseFloat(res.data.total_amount || 0).toLocaleString('id-ID'));
                $('#summary-count').text(res.data.total_count || 0);
                
                // Paid/Unpaid totals
                $('#summary-paid').text('Rp ' + parseFloat(res.data.total_paid || 0).toLocaleString('id-ID'));
                $('#summary-count-paid').text(res.data.count_paid || 0);
                $('#summary-unpaid').text('Rp ' + parseFloat(res.data.total_unpaid || 0).toLocaleString('id-ID'));
                $('#summary-count-unpaid').text(res.data.count_unpaid || 0);
            }
        });

        // Get dashboard stats for this/last month
        $.get('{{ route('admin.dashboard.data') }}', function(res) {
            if (res.data && res.data.expense_stats) {
                var stats = res.data.expense_stats;
                $('#summary-this-month').text('Rp ' + parseFloat(stats.this_month_total || 0).toLocaleString('id-ID'));
                $('#summary-last-month').text('Rp ' + parseFloat(stats.last_month_total || 0).toLocaleString('id-ID'));
                
                var change = stats.change_percent || 0;
                var changeClass = change > 0 ? 'text-danger' : (change < 0 ? 'text-success' : '');
                var changeIcon = change > 0 ? '↑' : (change < 0 ? '↓' : '');
                $('#summary-change').html('<span class="' + changeClass + '">' + changeIcon + ' ' + Math.abs(change) + '%</span>');
            }
        });
    }
    loadSummary();

    // Initialize DataTable
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('admin.expenses.data') }}',
            data: function(d) {
                d.date_from = $('#filter-date-from').val();
                d.date_to = $('#filter-date-to').val();
                d.category_id = $('#filter-category').val();
                d.payment_method = $('#filter-payment').val();
                d.payment_status = $('#filter-status').val();
            },
            dataSrc: 'data'
        },
        columns: [
            {
                data: 'created_at_timestamp',
                visible: false,
                orderable: true
            },
            { 
                data: 'expense_date_formatted',
                name: 'expense_date'
            },
            { 
                data: 'category',
                render: function(data) {
                    if (!data) return '-';
                    return '<span class="badge" style="background-color:' + data.color + '">' +
                           '<i class="' + data.icon + ' me-1"></i>' + data.name + '</span>';
                }
            },
            { 
                data: 'description',
                render: function(data) {
                    return data.length > 40 ? data.substring(0, 40) + '...' : data;
                }
            },
            { 
                data: 'formatted_amount',
                className: 'text-end fw-semibold'
            },
            { 
                data: 'payment_method_label'
            },
            { 
                data: 'payment_status',
                className: 'text-center',
                render: function(data, type, row) {
                    if (data === 'paid') {
                        return '<span class="badge bg-success"><i class="ti ti-check me-1"></i>Paid</span>';
                    } else {
                        return '<span class="badge bg-danger"><i class="ti ti-clock me-1"></i>Unpaid</span>';
                    }
                }
            },
            { 
                data: 'reference_number',
                render: function(data) {
                    return data || '<span class="text-muted">-</span>';
                }
            },
            { 
                data: 'has_attachment',
                className: 'text-center',
                render: function(data, type, row) {
                    if (!data) return '<span class="text-muted">-</span>';
                    return '<a href="' + row.attachment_url + '" target="_blank" class="btn btn-sm btn-light" title="Lihat Lampiran">' +
                           '<i class="ti ti-paperclip"></i></a>';
                }
            },
            { 
                data: 'has_transfer_proof',
                className: 'text-center',
                render: function(data, type, row) {
                    if (!data) return '<span class="text-muted">-</span>';
                    return '<a href="' + row.transfer_proof_url + '" target="_blank" class="btn btn-sm btn-success" title="Lihat Bukti Transfer">' +
                           '<i class="ti ti-receipt"></i></a>';
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                className: 'text-center fit-column',
                render: function(data, type, row) {
                    var showUrl = '{{ route('admin.expenses.show', ':id') }}'.replace(':id', row.id);
                    var editUrl = '{{ route('admin.expenses.edit', ':id') }}'.replace(':id', row.id);
                    var deleteUrl = '{{ route('admin.expenses.destroy', ':id') }}'.replace(':id', row.id);

                    return `
                        <div class="btn-group btn-group-sm">
                            <a href="${showUrl}" class="btn btn-info" title="Detail">
                                <i class="ti ti-eye"></i>
                            </a>
                            <button class="btn btn-warning btn-create" data-url="${editUrl}" title="Edit">
                                <i class="ti ti-pencil"></i>
                            </button>
                            <button class="btn btn-danger btn-delete" data-url="${deleteUrl}" title="Hapus">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        order: [[0, 'desc']],
        ordering: true,
        language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
            paginate: {
                first: "Pertama",
                last: "Terakhir",
                next: "→",
                previous: "←"
            }
        }
    });

    // Filter change handlers
    $('#filter-date-from, #filter-date-to, #filter-category, #filter-payment, #filter-status').on('change', function() {
        table.ajax.reload();
        loadSummary();
    });

    // Export button
    $('#btn-export').on('click', function() {
        var params = $.param({
            date_from: $('#filter-date-from').val(),
            date_to: $('#filter-date-to').val(),
            category_id: $('#filter-category').val(),
            payment_method: $('#filter-payment').val()
        });
        window.location.href = '{{ route('admin.expenses.export') }}?' + params;
    });
});
</script>
@endpush