@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>
                        <option value="all" {{ $showAllAgents ? 'selected' : '' }}>All Agents</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 class="block text-xs font-medium text-gray-700">Service</label>
                        <div x-data="{ 
                            open: false, 
                            selected: {{ json_encode(array_filter($serviceIds ?? [])) }}, 
                            originalSelected: {{ json_encode(array_filter($serviceIds ?? [])) }},
                            services: @js($services->map(fn($s) => ['id' => $s->id, 'name' => $s->name ?? 'Service ' . $s->id]))
                        }" @click="if(!open) originalSelected = [...selected]" @click.outside="open = false; if(JSON.stringify(selected) !== JSON.stringify(originalSelected)) { document.getElementById('filterForm').submit() }" class="relative">
                            <button type="button" @click="open = !open" class="mt-1 block w-32 text-xs border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 py-1 px-2 text-left bg-white flex justify-between items-center">
                                <span x-text="selected.length > 0 ? selected.length + ' svc(s)' : 'All Services'"></span>
                                <svg class="w-3 h-3 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                            </button>
                            <div x-show="open" x-transition class="absolute z-10 w-40 mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-48 overflow-auto" style="display: none;">
                                <template x-for="service in services" :key="service.id">
                                    <label class="flex items-center px-2 py-1.5 hover:bg-gray-50 cursor-pointer">
                                        <input type="checkbox" :value="service.id" x-model="selected" class="mr-2 h-3 w-3 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                        <span class="text-xs" x-text="service.name"></span>
                                    </label>
                                </template>
                            </div>
                            <input type="hidden" name="service_ids" x-bind:value="selected.length > 0 ? selected.join(',') : ''">
                            <input type="hidden" id="service_ids_ajax" x-bind:value="selected.length > 0 ? selected.join(',') : ''">
                        </div>
                    </div>
                @endif
            </div>
        </form>

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

            @if($viewType === 'statement')
                @if(count($items) > 0)
                    <div class="overflow-x-auto">
                        <table id="statementTable" class="min-w-full bg-white border border-gray-300" style="table-layout: fixed; width: 100%;">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 6%;">Type</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 10%;">Date</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 9%;">Customer Name</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 7%;">Customer Identity</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 9%;">Service Name</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 7%;">Voucher ID</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 7%;">Branch</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 8%;">Payment Method</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 8%;">Transaction ID</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 7%;">Payable</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 7%;">Paid</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 7%;">Due</th>
                                </tr>
                            </thead>
                            <tbody id="statementBody">
                                @forelse($items as $item)
                                    <tr class="{{ $item['type'] === 'Service Order' ? 'bg-blue-50' : 'bg-green-50' }}">
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['type'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['delivery_date'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['customer_name'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['identity_no'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['service_name'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm font-bold">{{ $item['voucher_id'] ? Str::of($item['voucher_id'])->replace('-', '') : '' }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['branch'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['payment_method'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['trx_id'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['payable'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['paid'] }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $item['due'] }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="12" class="py-1 px-3 border-b text-sm text-red-500">No completed orders or payments found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            <tfoot class="bg-gray-100">
                                <tr>
                                    <td colspan="9" class="py-1 px-3 border-t font-bold text-right text-sm">Totals:</td>
                                    <td id="totalPayable" class="py-1 px-3 border-b text-sm">{{ $totalPayable }}</td>
                                    <td id="totalPaid" class="py-1 px-3 border-b text-sm">{{ $totalPaid }}</td>
                                    <td id="totalDue" class="py-1 px-3 border-b text-sm">{{ $totalDue }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @else
                    <p class="text-red-500 text-sm">No completed orders or payments found for the selected criteria.</p>
                @endif
            @elseif($viewType === 'payment')
                @if($payments->isNotEmpty())
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white border border-gray-300" style="table-layout: fixed; width: 100%;">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 20%;">Voucher ID</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 25%;">Payment Date</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 20%;">Branch</th>
                                    <th class="py-1 px-3 border-b text-left text-sm" style="width: 15%;">Paid</th>
                                    @if(auth()->user()->isSuperAdmin())
                                        <th class="py-1 px-3 border-b text-left text-sm" style="width: 10%;">Action</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($payments as $payment)
                                    <tr>
                                        <td class="py-1 px-3 border-b text-sm font-bold">{{ Str::of($payment->voucher_id ?? 'N/A')->replace('-', '') }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $payment->created_at->format('Y-m-d H:i:s') }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ $payment->payment->branch->name ?? 'N/A' }}</td>
                                        <td class="py-1 px-3 border-b text-sm">{{ number_format($payment->amount, 0) }}</td>
                                        <td class="py-1 px-3 border-b text-sm">
                                            <a href="{{ route('vouchers.show', $payment->voucher_id) }}" class="text-green-500 hover:text-green-700 hover:underline mr-2">View</a>
                                            @if(auth()->user()->isSuperAdmin())
                                                <a href="{{ route('vouchers.edit', $payment->voucher_id) }}" class="text-blue-500 hover:text-blue-700 hover:underline">Edit</a>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="bg-gray-100">
                                <tr>
                                    <td colspan="{{ auth()->user()->isSuperAdmin() ? 4 : 5 }}" class="py-1 px-3 border-t font-bold text-right text-sm">Total Paid:</td>
                                    <td class="py-1 px-3 border-b text-sm">{{ number_format($payments->sum('amount'), 0) }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @else
                    <p class="text-red-500 text-sm">No payment history found for the selected criteria.</p>
                @endif
            @endif

            <button onclick="window.open('{{ route('agents.statement.print', request()->query()) }}', '_blank')" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded no-print mt-4">Print View</button>
        @else
            <p class="text-gray-500 text-sm">Please select an agent to view the {{ $viewType === 'statement' ? 'statement' : 'payment history' }}.</p>
        @endif
    </div>

    <script>
        document.querySelectorAll('#filterForm select, #filterForm input').forEach(element => {
            element.addEventListener('change', () => {
                document.getElementById('filterForm').submit();
            });
        });

        // AJAX polling for Statement view updates
        function updateStatementView() {
            const agentId = document.getElementById('agent_id').value;
            const fromDate = document.getElementById('from_date').value;
            const toDate = document.getElementById('to_date').value;
            const serviceIdsEl = document.getElementById('service_ids_ajax');
            const serviceIds = serviceIdsEl ? serviceIdsEl.value : '';
            const viewType = document.getElementById('view_type').value;

            if (viewType === 'statement' && agentId) {
                fetch('{{ route('agents.statement.data') }}?agent_id=' + encodeURIComponent(agentId) + '&from_date=' + encodeURIComponent(fromDate) + '&to_date=' + encodeURIComponent(toDate) + '&service_ids=' + encodeURIComponent(serviceIds), {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(response => {
                        if (!response.ok) throw new Error('Network response was not ok');
                        return response.json();
                    })
                    .then(data => {
                        console.log('Statement data:', {
                            items: data.items,
                            totalPayable: data.totalPayable,
                            totalPaid: data.totalPaid,
                            totalDue: data.totalDue
                        });
                        const statementBody = document.getElementById('statementBody');
                        statementBody.innerHTML = '';
                        if (data.items && data.items.length > 0) {
                            data.items.forEach(item => {
                                const row = document.createElement('tr');
                                row.className = item.type === 'Service Order' ? 'bg-blue-50' : 'bg-green-50';
                                row.innerHTML = `
                                    <td class="py-1 px-3 border-b text-sm">${item.type || ''}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.delivery_date || ''}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.customer_name || ''}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.identity_no || ''}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.service_name || ''}</td>
                                    <td class="py-1 px-3 border-b text-sm font-bold">
                                        ${(item.voucher_id || '').replace(/-/g, '')}
                                    </td>
                                    <td class="py-1 px-3 border-b text-sm">${item.branch || ''}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.payment_method || ''}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.trx_id || ''}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.payable || 0}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.paid || 0}</td>
                                    <td class="py-1 px-3 border-b text-sm">${item.due || 0}</td>
                                `;
                                statementBody.appendChild(row);
                            });
                        } else {
                            statementBody.innerHTML = '<tr><td colspan="12" class="py-1 px-3 border-b text-sm text-red-500">No completed orders or payments found.</td></tr>';
                        }

                        // Update totals
                        document.getElementById('totalPayable').textContent = data.totalPayable || 0;
                        document.getElementById('totalPaid').textContent = data.totalPaid || 0;
                        document.getElementById('totalDue').textContent = data.totalDue || 0;
                    })
                    .catch(error => console.error('Error fetching statement data:', error));
            }
        }
    </script>
@endsection