@extends('layouts.app')

@section('content')
<div class="container mx-auto px-2 py-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Agent Details: {{ $agent->name }}</h1>

    <!-- Agent Basic Info -->
    <div class="bg-white shadow-md rounded-lg p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Basic Information</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <p class="text-gray-600"><strong>Agent ID:</strong> {{ $agent->id }}</p>
                <p class="text-gray-600"><strong>Name:</strong> {{ $agent->name }}</p>
            </div>
            <div>
                <p class="text-gray-600"><strong>Contact No.:</strong> {{ $agent->mobile_no }}</p>
                <p class="text-gray-600"><strong>Joining Date:</strong> {{ $agent->created_at ? $agent->created_at->format('d M Y') : 'N/A' }}</p>
            </div>
        </div>
    </div>

    <!-- Service Orders Filters and Table -->
    <div class="bg-white shadow-md rounded-lg p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">Assigned Services</h2>
        @if (session('error'))
            <div class="bg-red-100 text-red-700 p-4 rounded mb-4">
                {{ session('error') }}
            </div>
        @endif
        <form id="service-filter-form" class="bg-gray-50 p-3 rounded-lg shadow-sm mb-6">
            <div class="flex items-center space-x-2 justify-between flex-wrap gap-2">
                <!-- Branch Filter (Visible for super_admin/co_admin) -->
                @if(auth()->user()->isAdmin())
                <div class="w-40">
                    <label for="branch_id" class="block text-sm font-bold text-gray-600">Branch</label>
                    <select name="branch_id" id="branch_id" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                        <option value="" {{ request('branch_id') == '' ? 'selected' : '' }}>All Branches</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                @endif

                <!-- Date Filters (Visible for All Roles) -->
                <div class="w-28">
                    <label for="from_date" class="block text-sm font-bold text-gray-600">From Date</label>
                    <input type="date" name="from_date" id="from_date" value="{{ request('from_date') }}"
                           class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                </div>
                <div class="w-28">
                    <label for="to_date" class="block text-sm font-bold text-gray-600">To Date</label>
                    <input type="date" name="to_date" id="to_date" value="{{ request('to_date') }}"
                           class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                </div>

                <!-- Admin-Only Filters -->
                @if(auth()->user()->role === 'super_admin' || auth()->user()->role === 'co_admin')
                <div class="w-32">
                    <label for="date_type" class="block text-sm font-bold text-gray-600">Date Type</label>
                    <select name="date_type" id="date_type" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                        <option value="" {{ request('date_type', '') == '' ? 'selected' : '' }}>All Date</option>
                        @foreach($dateTypes as $value => $label)
                            @if($value !== '')
                                <option value="{{ $value }}" {{ request('date_type') == $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
                <div class="w-40">
                    <label for="service_id" class="block text-sm font-bold text-gray-600">Service</label>
                    <select name="service_id" id="service_id" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                        <option value="">All Services</option>
                        @foreach($services as $service)
                            <option value="{{ $service->id }}" {{ request('service_id') == $service->id ? 'selected' : '' }}>{{ $service->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="w-28">
                    <label for="status" class="block text-sm font-bold text-gray-600">Status</label>
                    <select name="status" id="status" class="mt-1 block w-full border-gray-200 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-400 focus:border-indigo-500 text-sm">
                        <option value="">All Statuses</option>
                        @foreach($statuses as $status)
                            <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>{{ str_replace('_', ' ', ucfirst($status)) }}</option>
                        @endforeach
                    </select>
                </div>
                @endif

                <div class="ml-auto">
                    <button onclick="resetFilters()" class="bg-red-500 text-white px-2 py-1 rounded-lg hover:bg-red-600 text-sm">Reset</button>
                </div>
            </div>
            <div id="loading" class="hidden text-gray-600 mt-2">Loading...</div>
        </form>
        <!-- Dynamic Totals Display (shows only when status='completed' selected) -->
<div id="totals-display" class="{{ isset($payable) ? '' : 'hidden' }} bg-blue-100 p-4 mb-4 rounded text-center text-sm font-medium">
    <strong>Total Payable:</strong> <span id="payable-span">{{ isset($payable) ? number_format($payable, 0) : '' }}</span> | 
    <strong>Paid:</strong> <span id="paid-span">{{ isset($paid) ? number_format($paid, 0) : '' }}</span> | 
    <strong>Due:</strong> <span id="due-span">{{ isset($due) ? number_format($due, 0) : '' }}</span>
</div>

        <div class="overflow-x-auto relative">
            <!-- CHANGE: Removed Grand Total, Payment, Balance columns from thead -->
            <table class="min-w-full bg-white border border-gray-300" id="service-orders-table">
                <thead>
                    <tr>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Sl.</th>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Submission Date</th>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Invoice ID</th>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Service Name</th>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Customer Name</th>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Customer ID</th>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Branch</th>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Agent Commission</th>
                        <!-- REMOVED: Grand Total, Payment, Balance -->
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Delivery Date</th>
                        <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Status</th>
                    </tr>
                </thead>
                <tbody id="service-orders-tbody">
                    @include('agents.partials.service-order-rows', ['serviceOrders' => $serviceOrders])
                    <!-- NOTE: In your service-order-rows partial, remove <td> for Grand Total, Payment, Balance, and any subtotal row/footer -->
                </tbody>
            </table>
            <div id="loading-spinner" class="absolute inset-0 flex items-center justify-center bg-gray-100 bg-opacity-50 hidden">
                <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-indigo-500"></div>
            </div>
        </div>
    </div>

    <!-- Payment History Table -->
<div class="bg-white shadow-md rounded-lg p-6">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-semibold">Payment History</h2>
        <!-- FIXED: Always show global total due from completed (before Add Payment) -->
        <div class="flex items-center space-x-4">
            <span class="text-lg font-bold text-green-600">Total Due (Completed): {{ number_format($totalDueFromCompleted ?? 0, 0) }}</span>
            <a href="{{ route('agents.payments.create', $agent) }}" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                Add Payment
            </a>
        </div>
    </div>
    @if (session('success'))
        <div class="bg-green-100 text-green-700 p-4 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="bg-red-100 text-red-700 p-4 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white border border-gray-300">
            <thead>
                <tr>
                    <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Date</th>
                    <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Voucher ID</th>
                    <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Branch</th>
                    <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">Paid Amount</th>
                    <th class="px-4 py-2 border-b text-center text-sm font-medium text-gray-700">New Due</th>
                </tr>
            </thead>
            <tbody>
                @include('agents.partials.payment-rows', ['payments' => $payments])
            </tbody>
        </table>
    </div>
</div>
</div>

@push('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    const tableBody = document.getElementById('service-orders-tbody');
    const tableContainer = document.getElementById('service-orders-table').parentElement;
    const loadingSpinner = document.getElementById('loading-spinner');
    const loadingText = document.getElementById('loading');
    const totalsDisplay = document.getElementById('totals-display');
    let debounceTimeout;

    // Verify elements exist
    if (!tableBody || !tableContainer || !loadingSpinner || !loadingText || !totalsDisplay) {
        console.error('Required elements not found:', { tableBody, tableContainer, loadingSpinner, loadingText, totalsDisplay });
        return;
    }

    // Filters change event listeners
    const filterIds = ['branch_id', 'from_date', 'to_date', 'date_type', 'service_id', 'status'];
    filterIds.forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.addEventListener('change', () => {
                console.log('Filter changed:', id, el.value); // Debugging
                if (id === 'from_date' || id === 'to_date') {
                    const fromDate = document.getElementById('from_date').value;
                    const toDate = document.getElementById('to_date').value;
                    if (fromDate && toDate && fromDate > toDate) {
                        alert('From Date cannot be later than To Date');
                        el.value = '';
                        return;
                    }
                }
                applyFilter(id, el.value);
            });
        }
    });

    // getFilterParams function
    function getFilterParams() {
        let branchId = document.getElementById('branch_id') ? document.getElementById('branch_id').value : '';
        // Enforce user's branch_id for branch_admin and branch_staff
        @if (in_array(auth()->user()->role, ['branch_admin', 'branch_staff']))
            branchId = '{{ auth()->user()->branch_id ?? '' }}';
        @endif

        return {
            branch_id: branchId,
            from_date: document.getElementById('from_date') ? document.getElementById('from_date').value : '',
            to_date: document.getElementById('to_date') ? document.getElementById('to_date').value : '',
            date_type: document.getElementById('date_type') ? document.getElementById('date_type').value : '',
            service_id: document.getElementById('service_id') ? document.getElementById('service_id').value : '',
            status: document.getElementById('status') ? document.getElementById('status').value : ''
        };
    }

    // applyFilter function
    window.applyFilter = function(key, value) {
        clearTimeout(debounceTimeout);
        debounceTimeout = setTimeout(() => {
            const params = getFilterParams();
            if (key) params[key] = value;

            const url = new URL(window.location);
            Object.keys(params).forEach(k => {
                if (params[k]) url.searchParams.set(k, params[k]);
                else url.searchParams.delete(k);
            });
            history.pushState({}, '', url);

            console.log('Applying filter params:', params); // Debugging
            fetchTable('{{ route("agents.filter", $agent->id) }}', params);
        }, 300);
    };

    // resetFilters function
    window.resetFilters = function() {
        filterIds.forEach(id => {
            const el = document.getElementById(id);
            if (el) el.value = '';
        });
        history.pushState({}, '', window.location.pathname);
        fetchTable('{{ route("agents.filter", $agent->id) }}');
    };

    // fetchTable function
    function fetchTable(url, params = {}) {
        loadingSpinner.classList.remove('hidden');
        loadingText.classList.remove('hidden');
        let query = new URLSearchParams(params).toString();
        let fetchUrl = url + (query ? '?' + query : '');

        console.log('Fetching URL:', fetchUrl); // Debugging
        return fetch(fetchUrl, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            }
        })
        .then(response => {
            console.log('Response status:', response.status); // Debugging
            if (!response.ok) return response.json().then(err => { throw new Error(err.error || 'Failed to fetch data'); });
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data); // Debugging
            if (!data.table) throw new Error('No table data in response');
            tableBody.innerHTML = data.table;

            // Update totals display if applicable
            if (data.payable !== null && data.payable !== undefined) {
                document.getElementById('payable-span').textContent = new Intl.NumberFormat('en-US').format(data.payable);
                document.getElementById('paid-span').textContent = new Intl.NumberFormat('en-US').format(data.paid);
                document.getElementById('due-span').textContent = new Intl.NumberFormat('en-US').format(data.due);
                totalsDisplay.classList.remove('hidden');
            } else {
                totalsDisplay.classList.add('hidden');
            }
        })
        .catch(error => {
            console.error('Fetch error:', error.message, error); // Enhanced error logging
            alert('Failed to filter service orders: ' + error.message);
        })
        .finally(() => {
            loadingSpinner.classList.add('hidden');
            loadingText.classList.add('hidden');
        });
    }

    // Initial fetch if filters are applied on load (optional, but ensures consistency)
    const initialParams = getFilterParams();
    if (Object.values(initialParams).some(val => val !== '')) {
        fetchTable('{{ route("agents.filter", $agent->id) }}', initialParams);
    }

    // Session alerts
    @if(session('success'))
        alert('{{ session("success") }}');
        applyFilter();
    @endif
    @if(session('error'))
        alert('{{ session("error") }}');
    @endif
});
</script>
@endpush
@endsection