@extends('root')
@section('title', 'Saldo Adjustment')

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

    {{-- Summary Cards --}}
    <div class="row mb-4" id="summary-cards">
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">Total Credit</h6>
                            <h4 class="mb-0 mt-2" id="total-credit">Rp 0</h4>
                            <small id="count-credit">0 transaksi</small>
                        </div>
                        <i class="ti ti-arrow-up fs-1 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">Total Debit</h6>
                            <h4 class="mb-0 mt-2" id="total-debit">Rp 0</h4>
                            <small id="count-debit">0 transaksi</small>
                        </div>
                        <i class="ti ti-arrow-down fs-1 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">Net Adjustment</h6>
                            <h4 class="mb-0 mt-2" id="net-adjustment">Rp 0</h4>
                            <small>Credit - Debit</small>
                        </div>
                        <i class="ti ti-chart-bar fs-1 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body d-flex align-items-center justify-content-center">
                    <a href="{{ route('admin.balance-adjustments.create') }}" class="btn btn-warning btn-lg w-100">
                        <i class="ti ti-plus me-2"></i> Buat Adjustment
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card card-body mb-3">
        <div class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Tipe</label>
                <select class="form-select" id="filter-type">
                    <option value="">Semua</option>
                    <option value="credit">Credit (Tambah)</option>
                    <option value="debit">Debit (Kurang)</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Tanggal Mulai</label>
                <input type="date" class="form-control" id="filter-start-date">
            </div>
            <div class="col-md-3">
                <label class="form-label">Tanggal Akhir</label>
                <input type="date" class="form-control" id="filter-end-date">
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button class="btn btn-primary me-2" id="btn-filter">
                    <i class="ti ti-filter"></i> Filter
                </button>
                <button class="btn btn-outline-secondary" id="btn-reset">
                    <i class="ti ti-refresh"></i> Reset
                </button>
            </div>
        </div>
    </div>

    {{-- Data Table --}}
    <div class="card card-body">
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-adjustments">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Client</th>
                        <th>Admin</th>
                        <th>Tipe</th>
                        <th>Nominal</th>
                        <th>Saldo Sebelum</th>
                        <th>Saldo Sesudah</th>
                        <th>Alasan</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    // Load summary
    function loadSummary() {
        $.get('{{ route('admin.balance-adjustments.summary') }}', {
            start_date: $('#filter-start-date').val(),
            end_date: $('#filter-end-date').val()
        }, function(data) {
            $('#total-credit').text(data.total_credit);
            $('#total-debit').text(data.total_debit);
            $('#count-credit').text(data.count_credit + ' transaksi');
            $('#count-debit').text(data.count_debit + ' transaksi');
            $('#net-adjustment').text(data.net_adjustment);
        });
    }

    // Initialize DataTable
    var table = $('#datatable-adjustments').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.balance-adjustments.data') }}',
            data: function(d) {
                d.adjustment_type = $('#filter-type').val();
                d.start_date = $('#filter-start-date').val();
                d.end_date = $('#filter-end-date').val();
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'created_at', name: 'created_at' },
            { 
                data: null,
                render: function(data) {
                    return '<strong>' + data.client_name + '</strong><br><small class="text-muted">' + data.client_account + '</small>';
                }
            },
            { data: 'admin_name', name: 'admin_name' },
            { 
                data: null,
                render: function(data) {
                    return '<span class="badge ' + data.type_badge_class + '">' + data.type_label + '</span>';
                }
            },
            { 
                data: 'formatted_amount',
                className: 'text-end fw-bold'
            },
            { data: 'balance_before', className: 'text-end' },
            { data: 'balance_after', className: 'text-end' },
            { 
                data: null,
                render: function(data) {
                    var html = '<strong>' + data.title + '</strong>';
                    if (data.notes && data.notes !== '-') {
                        html += '<br><small class="text-muted">' + data.notes + '</small>';
                    }
                    return html;
                }
            }
        ]
    });

    // Filter button
    $('#btn-filter').on('click', function() {
        table.ajax.reload();
        loadSummary();
    });

    // Reset button
    $('#btn-reset').on('click', function() {
        $('#filter-type').val('');
        $('#filter-start-date').val('');
        $('#filter-end-date').val('');
        table.ajax.reload();
        loadSummary();
    });

    // Initial load
    loadSummary();
});
</script>
@endpush