@extends('layouts.auth.app')

@section('title', 'Search Corporate Taxpayer')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900">Search Corporate Taxpayer</h3>
            <a href="{{ route('capture.corporate.list') }}" class="text-gray-500 hover:text-gray-700">Back to List</a>
        </div>

        <div class="p-6 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Company Name</label>
                    <input type="text" id="txtCompanyName" class="mt-1 w-full border-gray-300 rounded-lg" placeholder="e.g., Acme Ltd">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Mobile Number</label>
                    <input type="text" id="txtMobileNumber" class="mt-1 w-full border-gray-300 rounded-lg" placeholder="e.g., 08012345678">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Company RIN</label>
                    <input type="text" id="txtRIN" class="mt-1 w-full border-gray-300 rounded-lg" placeholder="e.g., RIN-...">
                </div>
            </div>

            <div class="flex items-center justify-end">
                <button id="btnSearch" class="px-4 py-2 bg-teal-600 text-white rounded-lg">Search</button>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company RIN</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CAC No.</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        </tr>
                    </thead>
                    <tbody id="resultBody" class="divide-y divide-gray-200"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('btnSearch').addEventListener('click', function() {
    fetch('{{ route('capture.corporate.search.post') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({
            txtCompanyName: document.getElementById('txtCompanyName').value,
            txtMobileNumber: document.getElementById('txtMobileNumber').value,
            txtRIN: document.getElementById('txtRIN').value
        })
    }).then(r => r.text()).then(html => {
        document.getElementById('resultBody').innerHTML = html;
    }).catch(() => {
        document.getElementById('resultBody').innerHTML = '<tr><td colspan="5" class="text-center py-4 text-red-600">Error performing search</td></tr>';
    });
});
</script>
@endpush