@extends('master.app')
@section('title', 'Customer Agent Transactions')

@section('body')
<main class="app-content">
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Customer Agent Transactions</h5>
            <a href="{{ route('customer-agent-transactions.create') }}" class="btn btn-primary btn-sm">
                <i class="fa fa-plus"></i> Add
            </a>
        </div>

        <div class="card-body">
            @include('general.valert')

            <form class="row g-2 mb-3" method="get" action="{{ route('customer-agent-transactions.index') }}">
                <div class="col-md-3">
                    <label class="small text-muted">Customer</label>
                    <select name="customer_id" class="form-control select2">
                        <option value="">All</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}" @selected(request('customer_id')==$c->id)>
                                {{ $c->name ?? ('Customer #'.$c->id) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="small text-muted">Employee (Agent)</label>
                    <select name="employee_id" class="form-control select2">
                        <option value="">All</option>
                        @foreach($employees as $e)
                            <option value="{{ $e->id }}" @selected(request('employee_id')==$e->id)>
                                {{ $e->name ?? $e->full_name ?? ('Employee #'.$e->id) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="small text-muted">Direction</label>
                    <select name="direction" class="form-control">
                        <option value="">All</option>
                        <option value="in"  @selected(request('direction')=='in')>IN (Collected)</option>
                        <option value="out" @selected(request('direction')=='out')>OUT (Expense/Paid)</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="small text-muted">Type</label>
                    <input type="text" name="type" value="{{ request('type') }}" class="form-control"
                           placeholder="collection/expense...">
                </div>

                <div class="col-md-2">
                    <label class="small text-muted">From</label>
                    <input type="date" name="from" value="{{ request('from') }}" class="form-control">
                </div>

                <div class="col-md-2">
                    <label class="small text-muted">To</label>
                    <input type="date" name="to" value="{{ request('to') }}" class="form-control">
                </div>

                <div class="col-md-12 d-flex gap-2">
                    <button class="btn btn-outline-primary btn-sm"><i class="fa fa-search"></i> Filter</button>
                    <a class="btn btn-outline-dark btn-sm" href="{{ route('customer-agent-transactions.index') }}">Reset</a>
                </div>
            </form>

            <div class="row mb-3">
                <div class="col-md-3">
                    <div class="p-2 border rounded">
                        <div class="small text-muted">Total IN</div>
                        <div class="fw-bold">{{ number_format($totals->total_in ?? 0, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="p-2 border rounded">
                        <div class="small text-muted">Total OUT</div>
                        <div class="fw-bold">{{ number_format($totals->total_out ?? 0, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="p-2 border rounded">
                        <div class="small text-muted">Total IN (Base)</div>
                        <div class="fw-bold">{{ number_format($totals->total_in_base ?? 0, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="p-2 border rounded">
                        <div class="small text-muted">Total OUT (Base)</div>
                        <div class="fw-bold">{{ number_format($totals->total_out_base ?? 0, 2) }}</div>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-sm table-bordered align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Date</th>
                            <th>Customer</th>
                            <th>Employee</th>
                            <th>Dir</th>
                            <th>Type</th>
                            <th class="text-end">Amount</th>
                            <th>Currency</th>
                            <th class="text-end">Rate</th>
                            <th>Ref</th>
                            <th>Method</th>
                            <th width="140">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $row)
                            <tr>
                                <td>{{ $row->id }}</td>
                                <td>{{ $row->date }}</td>
                                <td>{{ $row->customer->name ?? ('Customer #'.$row->customer_id) }}</td>
                                <td>{{ $row->employee->name ?? $row->employee->full_name ?? ('Employee #'.$row->employee_id) }}</td>
                                <td>
                                    @if($row->direction=='in')
                                        <span class="badge bg-success">IN</span>
                                    @else
                                        <span class="badge bg-danger">OUT</span>
                                    @endif
                                </td>
                                <td>{{ $row->type }}</td>
                                <td class="text-end">{{ number_format($row->amount ?? 0, 2) }}</td>
                                <td>{{ $row->currency->title_en ?? $row->currency->title_ps ?? 'N/A' }}</td>
                                <td class="text-end">{{ number_format($row->ex_rate ?? 1, 4) }}</td>
                                <td>{{ $row->reference }}</td>
                                <td>{{ $row->payment_method }}</td>
                                <td class="d-flex gap-1">
                                    <a class="btn btn-outline-dark btn-sm" href="{{ route('customer-agent-transactions.show',$row->id) }}">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                    <a class="btn btn-outline-primary btn-sm" href="{{ route('customer-agent-transactions.edit',$row->id) }}">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    <form action="{{ route('customer-agent-transactions.destroy',$row->id) }}" method="post"
                                          onsubmit="return confirm('Delete this record?')">
                                        @csrf @method('delete')
                                        <button class="btn btn-outline-danger btn-sm">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="12" class="text-center text-muted">No data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-2">{{ $data->links() }}</div>
        </div>
    </div>
</main>
@endsection