<x-app-layout>
    <div class="container mx-auto py-8">
        <!-- Header Section -->
        <div class="flex items-center space-x-4 mb-8">
            <!-- Back Button -->
            <a href="{{ route('vendors') }}" class="flex items-center justify-center w-10 h-10 text-blue-600 hover:text-blue-800">
                <i class="fas fa-arrow-left"></i>
            </a>
            <!-- Page Title -->
            <h1 class="text-4xl font-bold text-blue-600">Vendor Payment Histories</h1>
        </div>

        <!-- Success Message -->
        @if(session('success'))
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6" role="alert">
                <p class="font-bold">Success</p>
                <p>{{ session('success') }}</p>
            </div>
        @endif

        <!-- Form Section -->
        <div class="bg-white shadow-md rounded-lg mb-8">
            <div class="bg-blue-500 px-6 py-4">
                <h2 class="text-white text-xl font-semibold">Add Payment History</h2>
            </div>
            <div class="px-6 py-4">
                <form action="{{ route('vendor-payment-histories.store') }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label for="vendor_id" class="block text-gray-700 font-bold mb-2">Vendor</label>
                        <select name="vendor_id" id="vendor_id" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Vendor</option>
                            @foreach($vendors as $vendor)
                                <option value="{{ $vendor->user_id }}">{{ $vendor->store_name }} ({{ $vendor->user_wallet }})</option>
                            @endforeach
                        </select>
                        @error('vendor_id')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="amount_paid" class="block text-gray-700 font-bold mb-2">Amount Paid</label>
                        <input type="number" name="amount_paid" id="amount_paid" step="0.01" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                        @error('amount_paid')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="balance" class="block text-gray-700 font-bold mb-2">Balance</label>
                        <input type="number" name="balance" id="balance" step="0.01" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500" readonly>
                        @error('balance')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="payment_date" class="block text-gray-700 font-bold mb-2">Payment Date</label>
                        <input type="date" name="payment_date" id="payment_date" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                        @error('payment_date')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="payment_method" class="block text-gray-700 font-bold mb-2">Payment Method</label>
                        <input type="text" name="payment_method" id="payment_method" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                        @error('payment_method')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="remarks" class="block text-gray-700 font-bold mb-2">Remarks</label>
                        <textarea name="remarks" id="remarks" rows="3" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"></textarea>
                        @error('remarks')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <button type="submit" class="bg-blue-500 text-white font-bold py-2 px-4 rounded shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        Add Payment
                    </button>
                </form>
            </div>
        </div>

        <!-- Payment Histories Section -->
        <div class="bg-white shadow-md rounded-lg">
            <div class="bg-blue-500 px-6 py-4">
                <h2 class="text-white text-xl font-semibold">Payment Histories</h2>
            </div>
            <div class="px-6 py-4">
                <table class="w-full border-collapse border border-gray-200">
                    <thead class="bg-gray-100 text-left">
                        <tr>
                            <th class="border border-gray-200 px-4 py-2">Vendor</th>
                            <th class="border border-gray-200 px-4 py-2">Amount Paid</th>
                            <th class="border border-gray-200 px-4 py-2">Balance</th>
                            <th class="border border-gray-200 px-4 py-2">Payment Date</th>
                            <th class="border border-gray-200 px-4 py-2">Payment Method</th>
                            <th class="border border-gray-200 px-4 py-2">Remarks</th>
                            <th class="border border-gray-200 px-4 py-2 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($paymentHistories as $history)
                            <tr>
                                <td class="border border-gray-200 px-4 py-2">{{ $history->vendor_id }}</td>
                                <td class="border border-gray-200 px-4 py-2">{{ $history->amount_paid }}</td>
                                <td class="border border-gray-200 px-4 py-2">{{ $history->balance }}</td>
                                <td class="border border-gray-200 px-4 py-2">{{ $history->payment_date }}</td>
                                <td class="border border-gray-200 px-4 py-2">{{ $history->payment_method }}</td>
                                <td class="border border-gray-200 px-4 py-2">{{ $history->remarks }}</td>
                                <td class="border border-gray-200 px-4 py-2 text-center">
                                    <form action="{{ route('vendor-payment-histories.destroy', $history->id) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="bg-red-500 text-white font-bold py-1 px-3 rounded shadow hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-4 text-gray-500">No payment histories found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- JavaScript Section -->
        <script src="https://cdn.tailwindcss.com"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const vendorSelect = document.getElementById('vendor_id');
                const amountPaidInput = document.getElementById('amount_paid');
                const balanceInput = document.getElementById('balance');

                const vendors = @json($vendors);

                function updateBalance() {
                    const selectedVendorId = vendorSelect.value;
                    const selectedVendor = vendors.find(vendor => vendor.user_id == selectedVendorId);

                    if (selectedVendor) {
                        const walletBalance = parseFloat(selectedVendor.user_wallet);
                        const amountPaid = parseFloat(amountPaidInput.value) || 0;
                        balanceInput.value = walletBalance - amountPaid >= 0 ? (walletBalance - amountPaid).toFixed(2) : 0;
                    } else {
                        balanceInput.value = '';
                    }
                }

                vendorSelect.addEventListener('change', updateBalance);
                amountPaidInput.addEventListener('input', updateBalance);
            });
        </script>
    </div>
</x-app-layout>
