@extends('layouts.app')

@section('content')
    <div class="container mx-auto p-4">
        <h1 class="text-xl font-bold mb-4">{{ $viewType === 'statement' ? 'Agent Statement' : 'Agent Payment History' }}</h1>

        <form id="filterForm" method="GET" action="{{ route('agents.statement') }}" class="mb-6">
            <div class="grid grid-cols-1 md:grid-cols-5 gap-2">
                <div>
                    <label for="from_date" class="block text-xs font-medium text-gray-700">From Date</label>
                    <input type="date" id="from_date" name="from_date" value="{{ $from }}" class="mt-1 block w-32 text-xs border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 py-1">
                </div>
                <div>
                    <label for="to_date" class="block text-xs font-medium text-gray-700">To Date</label>
                    <input type="date" id="to_date" name="to_date" value="{{ $to }}" class="mt-1 block w-32 text-xs border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 py-1">
                </div>
                <div>
                    <label for="agent_id" class="block text-xs font-medium text-gray-700">Agent</label>
                    <select id="agent_id" name="agent_id" class="mt-1 block w-32 text-xs border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 py-1">
                        <option value="">Select Agent</option>
                        @foreach($agents as $agent)
                            <option value="{{ $agent->id }}" {{ $agentId == $agent->id ? 'selected' : '' }}>{{ $agent->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="view_type" class="block text-xs font-medium text-gray-700">View Type</label>
                    <select id="view_type" name="view_type" class="mt-1 block w-32 text-xs border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 py-1">
                        <option value="statement" {{ $viewType === 'statement' ? 'selected' : '' }}>Statement</option>
                        <option value="payment" {{ $viewType === 'payment' ? 'selected' : '' }}>Payment</option>
                    </select>
                </div>
                @if($viewType === 'statement')
                    <div>
                        <label for="service_id" class="block text-xs font-medium text-gray-700">Service</label>
                        <select id="service_id" name="service_id" class="mt-1 block w-32 text-xs border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 py-1">
                            <option value="">All Services</option>
                            @foreach($services as $service)
                                <option value="{{ $service->id }}" {{ $serviceId == $service->id ? 'selected' : '' }}>{{ $service->name ?? 'Service ' . $service->id }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>
        </form>

        @if($agentId)
            @if($selectedAgent)
                <h2 class="text-lg font-bold mb-2">{{ $viewType === 'statement' ? 'Statement' : 'Payment History' }} for {{ $selectedAgent->name }}</h2>
            @endif

            @if($viewType === 'statement')
                @if(($orders->isNotEmpty() || $payments->isNotEmpty()))
                    <div class="overflow-x-auto">
                        <table id="statementTable" class="min-w-full bg-white border border-gray-300">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="py-1 px-3 border-b text-left text-sm">Type</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Date</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Customer Name</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Customer Identity</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Service Name</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Voucher ID</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Branch</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Payment Method</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Transaction ID</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Payable</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Paid</th>
                                    <th class="py-1 px-3 border-b text-left text-sm">Due</th>
                                </tr>
                            </thead>
                            <tbody id="statementBody">
                                @foreach($orders as $order)