@extends('layouts.app')

@section('title', 'Pay All Orders')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <a href="{{ route('orders') }}" class="text-primary hover:underline">&larr; Back to Orders</a>
    </div>

    <h1 class="text-3xl font-bold text-gray-800 mb-8">Pay All Pending Orders</h1>

    <div class="bg-gray-100 rounded-xl shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Orders to Pay</h2>
        <div class="space-y-3 mb-4">
            @foreach($pendingOrders as $order)
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                    <input type="checkbox" name="order_ids[]" value="{{ $order->id }}" id="order_{{ $order->id }}" 
                           class="mr-3 h-5 w-5 text-primary" checked>
                    <div>
                        <label for="order_{{ $order->id }}" class="font-medium text-gray-800 cursor-pointer">{{ $order->order_number }}</label>
                        <p class="text-sm text-gray-500">{{ $order->items->count() }} items</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="font-semibold text-orange-600">₦{{ number_format($order->total - $order->paid_amount, 0) }}</p>
                    <p class="text-xs text-gray-500">Remaining</p>
                </div>
            </div>
            @endforeach
        </div>
        <div class="border-t pt-4 flex justify-between items-center">
            <p class="text-lg font-semibold">Total Amount:</p>
            <p class="text-2xl font-bold text-primary">₦{{ number_format($totalAmount, 0) }}</p>
        </div>
    </div>

    <div class="bg-gray-100 rounded-xl shadow-md p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Payment Details</h2>
        
        @php
        $settings = \App\Models\Setting::pluck('value', 'key')->toArray();
        @endphp
        
        <div class="mb-4 p-3 bg-gray-50 rounded-lg">
            <p class="font-semibold text-gray-700">Bank Transfer</p>
            <p class="text-sm text-gray-600">Bank: {{ $settings['bank_name'] ?? 'Not configured' }}</p>
            <p class="text-sm text-gray-600">Account: {{ $settings['account_number'] ?? 'Not configured' }}</p>
            <p class="text-sm text-gray-600">Name: {{ $settings['account_name'] ?? 'Not configured' }}</p>
        </div>
        
        <form method="POST" action="{{ route('orders.processPayAll') }}" enctype="multipart/form-data" id="payAllForm">
            @csrf
            <input type="hidden" name="order_ids" id="orderIdsInput">
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
                    <select name="payment_method" class="w-full px-4 py-2 border rounded-lg" required>
                        <option value="bank_transfer">Bank Transfer</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Total Amount</label>
                    <input type="number" name="amount" value="{{ $totalAmount }}" step="0.01" class="w-full px-4 py-2 border rounded-lg bg-gray-100" readonly>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Reference Number</label>
                    <input type="text" name="reference_number" class="w-full px-4 py-2 border rounded-lg">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Proof of Payment</label>
                    <div class="border-2 border-dashed border-primary-300 rounded-lg p-6 text-center hover:border-primary transition-colors bg-primary-50">
                        <input type="file" name="proof_image" accept="image/*" class="hidden" id="proof_upload" required>
                        <label for="proof_upload" class="cursor-pointer block">
                            <i class="fas fa-cloud-upload-alt text-3xl text-primary mb-2"></i>
                            <p class="text-sm text-primary font-medium">Click to upload proof of payment</p>
                            <p class="text-xs text-gray-500 mt-1">PNG, JPG up to 2MB</p>
                        </label>
                    </div>
                </div>
                <button type="submit" class="w-full py-3 bg-primary text-white rounded-lg hover:bg-blue-700 font-semibold">
                    Submit Payment Proofs
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('payAllForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const checkboxes = document.querySelectorAll('input[name="order_ids[]"]:checked');
    const orderIds = Array.from(checkboxes).map(cb => cb.value);
    
    if (orderIds.length === 0) {
        alert('Please select at least one order to pay.');
        return;
    }
    
    document.getElementById('orderIdsInput').value = orderIds.join(',');
    this.submit();
});
</script>
@endsection