@extends('layouts.app')

@section('title', 'Create Payout')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Create Payout</h1>
            <p class="text-gray-700 dark:text-gray-300">Select agents to create payouts for their approved commissions</p>
        </div>
        <a href="{{ route('payouts.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Back
        </a>
    </div>

    <!-- Settings Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Payout Settings</h3>
        </div>
        <div class="p-4">
            <form action="{{ route('payouts.update-minimum') }}" method="POST" class="flex flex-wrap items-end gap-4">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Minimum Payout Amount (RM)</label>
                    <div class="flex items-center gap-2">
                        <div class="relative">
                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">RM</span>
                            <input type="number" name="minimum_payout" value="{{ $minimumPayout }}"
                                   step="0.01" min="0" max="10000"
                                   class="pl-12 pr-4 py-2 w-40 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm font-medium">
                            Update
                        </button>
                    </div>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Agents must have at least this amount in approved commissions to be eligible for payout.</p>
                </div>
            </form>
        </div>
    </div>

    @if($eligibleAgents->count() > 0)
    <form id="bulkPayoutForm" action="{{ route('payouts.store') }}" method="POST">
        @csrf

        <!-- Bulk Selection Bar -->
        <div id="bulkSelectionBar" class="hidden bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 mb-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <span class="text-sm font-medium text-green-700 dark:text-green-300">
                        <span id="selectedAgentCount">0</span> agent(s) selected
                    </span>
                    <span class="text-sm text-green-600 dark:text-green-400">
                        Total: RM <span id="selectedAgentTotal">0.00</span>
                    </span>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" onclick="clearAgentSelection()" class="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                        Clear Selection
                    </button>
                    <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm font-medium"
                            onclick="return confirm('Create payouts for selected agents?');">
                        <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        Create Payouts
                    </button>
                </div>
            </div>
        </div>

        <!-- Payment Method -->
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Payment Method</label>
            <select name="payment_method" class="px-3 py-2 border border-gray-300 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <option value="Bank Transfer">Bank Transfer</option>
                <option value="E-Wallet">E-Wallet</option>
                <option value="Cash">Cash</option>
                <option value="Cheque">Cheque</option>
            </select>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Eligible Agents</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ $eligibleAgents->count() }} agent(s) with RM {{ number_format($minimumPayout, 2) }}+ in approved commissions</p>
                </div>
                <button type="button" onclick="selectAllAgents()" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800">
                    Select All
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-4 py-3 text-left">
                                <input type="checkbox" id="selectAllAgents" onchange="toggleSelectAllAgents(this)"
                                       class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-600 dark:border-gray-500">
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Agent</th>
                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Commissions</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Amount</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Bank Details</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($eligibleAgents as $agent)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <input type="checkbox" name="agent_ids[]" value="{{ $agent->id }}"
                                           data-amount="{{ $agent->available_amount }}"
                                           onchange="updateAgentSelection()"
                                           class="agent-checkbox rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-600 dark:border-gray-500">
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <a href="{{ route('agents.show', $agent) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
                                        {{ $agent->name }}
                                    </a>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 font-mono">{{ $agent->coupon_code }}</div>
                                    <span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400">
                                        {{ $agent->performanceTier->name ?? 'Basic' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900 dark:text-white">
                                    {{ $agent->commission_count }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-green-600 dark:text-green-400">
                                    RM {{ number_format($agent->available_amount, 2) }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                    @if($agent->bank_name)
                                        <div>{{ $agent->bank_name }}</div>
                                        <div class="text-xs">{{ $agent->bank_account_number }}</div>
                                        <div class="text-xs text-gray-400">{{ $agent->bank_account_name }}</div>
                                    @else
                                        <span class="text-yellow-600 dark:text-yellow-400">Not provided</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <td colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">
                                Total (All Eligible):
                            </td>
                            <td class="px-6 py-3 text-right text-sm font-bold text-green-600 dark:text-green-400">
                                RM {{ number_format($eligibleAgents->sum('available_amount'), 2) }}
                            </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </form>
    @else
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-12 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No eligible agents</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            No agents have approved commissions meeting the minimum payout of RM {{ number_format($minimumPayout, 2) }}.
        </p>
        <div class="mt-6 flex justify-center gap-3">
            <a href="{{ route('commissions.pending') }}" class="inline-flex items-center px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700">
                Approve Pending Commissions
            </a>
            <a href="{{ route('payouts.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                Back to Payouts
            </a>
        </div>
    </div>
    @endif

    @if(isset($belowMinimumAgents) && $belowMinimumAgents->count() > 0)
    <!-- Below Minimum Agents -->
    <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-yellow-50 dark:bg-yellow-900/20">
            <h3 class="text-lg font-semibold text-yellow-800 dark:text-yellow-200">Below Minimum Threshold</h3>
            <p class="text-sm text-yellow-600 dark:text-yellow-400">{{ $belowMinimumAgents->count() }} agent(s) have commissions below RM {{ number_format($minimumPayout, 2) }}</p>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Agent</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Commissions</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Amount</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Needs</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($belowMinimumAgents as $agent)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <a href="{{ route('agents.show', $agent) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">
                                    {{ $agent->name }}
                                </a>
                                <div class="text-xs text-gray-500 dark:text-gray-400 font-mono">{{ $agent->coupon_code }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900 dark:text-white">
                                {{ $agent->commission_count }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-yellow-600 dark:text-yellow-400">
                                RM {{ number_format($agent->available_amount, 2) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400">
                                RM {{ number_format($minimumPayout - $agent->available_amount, 2) }} more
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>

<script>
function toggleSelectAllAgents(checkbox) {
    const checkboxes = document.querySelectorAll('.agent-checkbox');
    checkboxes.forEach(cb => cb.checked = checkbox.checked);
    updateAgentSelection();
}

function selectAllAgents() {
    const checkboxes = document.querySelectorAll('.agent-checkbox');
    checkboxes.forEach(cb => cb.checked = true);
    document.getElementById('selectAllAgents').checked = true;
    updateAgentSelection();
}

function updateAgentSelection() {
    const checkboxes = document.querySelectorAll('.agent-checkbox:checked');
    const count = checkboxes.length;
    let total = 0;

    checkboxes.forEach(cb => {
        total += parseFloat(cb.dataset.amount);
    });

    document.getElementById('selectedAgentCount').textContent = count;
    document.getElementById('selectedAgentTotal').textContent = total.toFixed(2);

    const selectionBar = document.getElementById('bulkSelectionBar');
    if (count > 0) {
        selectionBar.classList.remove('hidden');
    } else {
        selectionBar.classList.add('hidden');
    }

    // Update select all checkbox state
    const allCheckboxes = document.querySelectorAll('.agent-checkbox');
    const selectAll = document.getElementById('selectAllAgents');
    if (allCheckboxes.length > 0) {
        selectAll.checked = checkboxes.length === allCheckboxes.length;
        selectAll.indeterminate = checkboxes.length > 0 && checkboxes.length < allCheckboxes.length;
    }
}

function clearAgentSelection() {
    const checkboxes = document.querySelectorAll('.agent-checkbox');
    checkboxes.forEach(cb => cb.checked = false);
    document.getElementById('selectAllAgents').checked = false;
    updateAgentSelection();
}
</script>
@endsection