@extends('root')
@section('title', 'Reseller Commission')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Reseller Commission',
        'links' => [],
        'current' => 'Reseller Commission'
    ])

    <div class="card card-body">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h5 class="mb-1 d-flex align-items-center gap-2">
                    <i class="ti ti-coin text-primary"></i>
                    Komisi Reseller
                </h5>
                <p class="mb-0 text-muted small">
                    Hitung komisi berdasarkan periode tertentu dan ajukan permintaan withdraw.
                </p>
            </div>
        </div>

        <form id="filter-form" class="row g-3 mb-3">
            <div class="col-md-3">
                <label class="form-label">Dari Tanggal</label>
                <input type="date" name="from" id="from" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label">Sampai Tanggal</label>
                <input type="date" name="to" id="to" class="form-control">
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="button" class="btn btn-primary" id="btn-refresh">
                    <i class="ti ti-calculator me-1"></i> Hitung
                </button>
            </div>
        </form>

        <div class="row" id="summary">
            <div class="col-md-4 mb-3">
                <div class="border rounded p-3 h-100">
                    <div class="text-muted small mb-1">Total Messages</div>
                    <h4 id="c_total_messages" class="mb-0">-</h4>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="border rounded p-3 h-100">
                    <div class="text-muted small mb-1">Commission / Message</div>
                    <h4 id="c_per_message" class="mb-0">-</h4>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="border rounded p-3 h-100">
                    <div class="text-muted small mb-1">Total Commission</div>
                    <h4 id="c_total_commission" class="mb-0">-</h4>
                </div>
            </div>
        </div>

        <button type="button" class="btn btn-success mt-2" id="btn-withdraw">
            <i class="ti ti-wallet me-1"></i> Request Withdraw
        </button>
    </div>
</div>
@endsection

@push('scripts')
<script>
function loadCommission() {
    const params = new URLSearchParams();
    if ($('#from').val()) params.append('from', $('#from').val());
    if ($('#to').val()) params.append('to', $('#to').val());

    fetch('{{ route('reseller.commission.index') }}?' + params.toString())
        .then(resp => resp.json())
        .then(data => {
            $('#c_total_messages').text(data.total_messages);
            $('#c_per_message').text('Rp ' + parseFloat(data.commission_per_message).toLocaleString('id-ID'));
            $('#c_total_commission').text('Rp ' + parseFloat(data.total_commission).toLocaleString('id-ID'));
        });
}

$(function () {
    $('#btn-refresh').on('click', loadCommission);
    loadCommission();

    $('#btn-withdraw').on('click', function () {
        const params = new URLSearchParams();
        if ($('#from').val()) params.append('from', $('#from').val());
        if ($('#to').val()) params.append('to', $('#to').val());

        fetch('{{ route('reseller.commission.withdraw') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                from: $('#from').val(),
                to: $('#to').val()
            })
        }).then(resp => resp.json())
            .then(data => {
                alert('Withdraw requested. Total: Rp ' + parseFloat(data.summary.total_commission).toLocaleString('id-ID'));
            });
    });
});
</script>
@endpush