@extends('dashboard.layout')

@section('content')
<div class="w-full px-3 py-4">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Make Payment</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-1">Complete your payment for project services</p>
    </div>

    <!-- Grid Layout -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- Left Column - Payment Information & Form -->
        <div class="xl:col-span-2 space-y-6">
            <form action="{{ route('dashboard.payment.process', $invoice->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf

                <!-- Basic Payment Information -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Payment Information</h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Payment Method -->
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Payment Method <span class="text-red-500">*</span>
                            </label>
                            <select name="payment_method" required
                                    class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                                <option value="">Select Payment Method</option>
                                <option value="bank_transfer">Bank Transfer</option>
                                <option value="credit_card">Credit Card</option>
                                <option value="debit_card">Debit Card</option>
                                <option value="paypal">PayPal</option>
                                <option value="stripe">Stripe</option>
                                <option value="cash">Cash</option>
                            </select>
                            @error('payment_method')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Payment Date -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Payment Date <span class="text-red-500">*</span>
                            </label>
                            <input type="date" name="payment_date" required
                                   value="{{ old('payment_date', date('Y-m-d')) }}"
                                   class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                            @error('payment_date')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Transaction ID -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Transaction ID <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="transaction_id" required
                                   value="{{ old('transaction_id') }}"
                                   placeholder="Enter transaction ID"
                                   class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                            @error('transaction_id')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Payment Verification Information -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Payment Verification</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                        Please provide the following details for payment verification
                    </p>

                    <div class="space-y-4">
                        <!-- Sender Name -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Sender Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="sender_name" required
                                   value="{{ old('sender_name') }}"
                                   placeholder="Enter sender's full name"
                                   class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                            @error('sender_name')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Sender Account -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Sender Account Number <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="sender_account" required
                                   value="{{ old('sender_account') }}"
                                   placeholder="Enter sender's account number"
                                   class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                            @error('sender_account')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Payment Reference -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Payment Reference <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="payment_reference" required
                                   value="{{ old('payment_reference') }}"
                                   placeholder="Enter payment reference number"
                                   class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
                            @error('payment_reference')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Payment Screenshot -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Payment Screenshot/Receipt <span class="text-red-500">*</span>
                            </label>
                            <input type="file" name="payment_screenshot" required
                                   accept=".jpg,.jpeg,.png,.pdf,.gif"
                                   class="block w-full text-sm text-gray-500 dark:text-gray-400
                                          file:mr-4 file:py-2 file:px-3 
                                          file:rounded-lg file:border-0 
                                          file:text-sm file:font-medium
                                          file:bg-blue-50 dark:file:bg-blue-900/30 
                                          file:text-blue-600 dark:file:text-blue-400
                                          hover:file:bg-blue-100 dark:hover:file:bg-blue-900/50
                                          cursor-pointer
                                          bg-white dark:bg-gray-700
                                          border border-gray-300 dark:border-gray-600
                                          rounded-lg
                                          transition-colors">
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                Upload screenshot or receipt of payment (JPG, PNG, PDF, GIF - Max: 5MB)
                            </p>
                            @error('payment_screenshot')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Notes -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Additional Notes (Optional)
                            </label>
                            <textarea name="notes" rows="3"
                                      placeholder="Any additional payment notes..."
                                      class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">{{ old('notes') }}</textarea>
                            @error('notes')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Amount Summary -->
                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4">
                    <div class="flex justify-between items-center">
                        <div>
                            <h4 class="font-semibold text-blue-900 dark:text-blue-300">Total Amount</h4>
                            <p class="text-blue-700 dark:text-blue-400 text-sm">Payment due for project services</p>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-blue-900 dark:text-blue-300">{{ number_format($invoice->amount, 2) }} SR</p>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex justify-center items-center">
                    

                    <button type="submit" 
                            class="px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors duration-200 font-medium flex items-center">
                        <i class="fas fa-credit-card mr-2"></i>
                        Submit Payment
                    </button>
                </div>
            </form>
        </div>

        <!-- Right Column - Payment Details -->
        <div class="space-y-6">
            <div class="bg-white dark:bg-gray-800 rounded-xl p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Payment Details</h2>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">Invoice #{{ $invoice->id }}</p>
                    </div>
                    <div class="text-right">
                        <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 rounded-full text-sm font-medium">
                            Unpaid
                        </span>
                    </div>
                </div>

                <div class="space-y-4">
                    <div>
                        <h3 class="font-medium text-gray-900 dark:text-white mb-2">Project Information</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">Project:</span>
                                <span class="text-gray-900 dark:text-white font-medium">{{ $invoice->project->name ?? 'N/A' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">Project ID:</span>
                                <span class="text-gray-900 dark:text-white">{{ $invoice->project_id }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">Invoice Date:</span>
                                <span class="text-gray-900 dark:text-white">{{ $invoice->created_at->format('M d, Y') }}</span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="font-medium text-gray-900 dark:text-white mb-2">Payment Summary</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">Amount Due:</span>
                                <span class="text-gray-900 dark:text-white">{{ number_format($invoice->amount, 2) }} SR</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600 dark:text-gray-400">Status:</span>
                                <span class="text-gray-900 dark:text-white capitalize">{{ $invoice->status }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Verification Requirements -->
            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-6">
                <h3 class="text-lg font-semibold text-yellow-900 dark:text-yellow-300 mb-3">Verification Required</h3>
                <div class="space-y-3 text-sm text-yellow-800 dark:text-yellow-400">
                    <div class="flex items-start space-x-2">
                        <i class="fas fa-user-check mt-0.5"></i>
                        <p><strong>Sender Name:</strong> Must match bank account holder name</p>
                    </div>
                    <div class="flex items-start space-x-2">
                        <i class="fas fa-university mt-0.5"></i>
                        <p><strong>Account Number:</strong> Provide complete account number</p>
                    </div>
                    <div class="flex items-start space-x-2">
                        <i class="fas fa-receipt mt-0.5"></i>
                        <p><strong>Payment Reference:</strong> Unique transaction reference</p>
                    </div>
                    <div class="flex items-start space-x-2">
                        <i class="fas fa-camera mt-0.5"></i>
                        <p><strong>Screenshot:</strong> Clear image of payment confirmation</p>
                    </div>
                </div>
            </div>

            <!-- Processing Time -->
            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
                <h3 class="text-lg font-semibold text-blue-900 dark:text-blue-300 mb-2">Processing Time</h3>
                <p class="text-blue-800 dark:text-blue-400 text-sm">
                    Payments are typically verified within 24-48 hours after submission. You will receive a confirmation email once verified.
                </p>
            </div>
        </div>
    </div>
</div>

<style>
    input:focus, select:focus, textarea:focus {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Set minimum date to today
        const paymentDateInput = document.querySelector('input[name="payment_date"]');
        const today = new Date().toISOString().split('T')[0];
        paymentDateInput.min = today;
        
        // Real-time validation
        const form = document.querySelector('form');
        const inputs = form.querySelectorAll('input[required], select[required]');
        
        inputs.forEach(input => {
            input.addEventListener('blur', function() {
                if (!this.value) {
                    this.classList.add('border-red-500');
                } else {
                    this.classList.remove('border-red-500');
                }
            });
        });

        // File validation for payment screenshot
        const fileInput = document.querySelector('input[name="payment_screenshot"]');
        if (fileInput) {
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'];
                    const maxSize = 5 * 1024 * 1024; // 5MB
                    
                    if (!validTypes.includes(file.type)) {
                        alert('Please select a valid file type (JPG, PNG, GIF, PDF)');
                        this.value = '';
                    } else if (file.size > maxSize) {
                        alert('File size must be less than 5MB');
                        this.value = '';
                    }
                }
            });
        }
    });
</script>
@endsection