@extends('layouts.app')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <h1 class="h3 mb-0">Handling Fees Report</h1>
    <form class="row g-2 ajax-filter" method="GET" action="{{ route('reports.handling-fees') }}" data-ajax-target="#report-results">
        <div class="col-auto">
            <input class="form-control" name="date_from" type="date" value="{{ $filters['date_from'] ?? '' }}" placeholder="From Date">
        </div>
        <div class="col-auto">
            <input class="form-control" name="date_to" type="date" value="{{ $filters['date_to'] ?? '' }}" placeholder="To Date">
        </div>
        <div class="col-auto">
            <select class="form-select" name="agent_id">
                <option value="">All agents</option>
                @foreach($agents as $agent)
                    <option value="{{ $agent->id }}" @selected(($filters['agent_id'] ?? '') == $agent->id)>
                        {{ $agent->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" type="submit">Filter</button>
        </div>
        <div class="col-auto">
            <a class="btn btn-outline-success export-link" href="{{ route('reports.handling-fees', array_merge(request()->except('export'), ['export' => 'xls'])) }}">Excel</a>
        </div>
    </form>
</div>

<div class="row mb-4">
    <div class="col-md-6">
        <div class="card bg-light">
            <div class="card-body py-3">
                <h6 class="card-subtitle mb-2 text-muted">Total Handling Fees By Currency</h6>
                @forelse($totalFees as $currency => $total)
                    <div class="d-flex justify-content-between mb-1 border-bottom pb-1">
                        <span class="fw-semibold">{{ $currency }}</span>
                        <span class="text-success">{{ number_format($total, 2) }}</span>
                    </div>
                @empty
                    <p class="mb-0 text-muted">No handling fees recorded.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

<div id="report-results">
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Currency</th>
                        <th>Agent</th>
                        <th class="text-end">Handling Fee</th>
                        <th>Fee Currency</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transactions as $transaction)
                        <tr>
                            <td>{{ $transaction->created_at->format('Y-m-d H:i') }}</td>
                            <td class="text-capitalize">{{ $transaction->type }}</td>
                            <td>{{ $transaction->currency->code }}</td>
                            <td>{{ optional($transaction->agent)->name ?? '-' }}</td>
                            <td class="text-end fw-semibold text-success">{{ number_format((float) $transaction->handling_fee, 4) }}</td>
                            <td>{{ $transaction->fee_currency }}</td>
                            <td class="text-end"><a class="btn btn-outline-primary btn-sm" href="{{ route('reports.transactions.show', $transaction) }}">Details</a></td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-muted text-center" colspan="7">No handling fees found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
@endsection
