@extends('admin.layout')

@section('title', 'Edit Payment')

@section('header', 'Edit Payment')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-semibold text-white">Edit Payment</h2>
                    <p class="text-blue-100 text-sm mt-1">Payment ID: #PAY-{{ str_pad($payment->id, 4, '0', STR_PAD_LEFT) }}</p>
                </div>
                <div class="text-right">
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-{{ $payment->getStatusColor() }}-100 text-{{ $payment->getStatusColor() }}-800">
                        {{ ucfirst($payment->status) }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Payment Information -->
        <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="flex items-center space-x-3">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-tasks text-blue-600 text-sm"></i>
                        </div>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Task</p>
                        <p class="text-sm font-medium text-gray-900">{{ $payment->task ? $payment->task->title : 'N/A' }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-user text-green-600 text-sm"></i>
                        </div>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Technician</p>
                        <p class="text-sm font-medium text-gray-900">{{ $payment->technician ? $payment->technician->name : 'N/A' }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-rupee-sign text-purple-600 text-sm"></i>
                        </div>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Amount</p>
                        <p class="text-sm font-medium text-gray-900">{{ $payment->getFormattedAmount() }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                            <i class="{{ $payment->getPaymentMethodIcon() }} text-orange-600 text-sm"></i>
                        </div>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Method</p>
                        <p class="text-sm font-medium text-gray-900">{{ ucfirst(str_replace('_', ' ', $payment->payment_method)) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form -->
        <div class="px-6 py-6">
            <form action="{{ route('admin.payments.update', $payment) }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="space-y-6">
                    <!-- Basic Information -->
                    <div class="bg-white border border-gray-200 rounded-lg p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                            Basic Information
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="amount" class="block text-sm font-medium text-gray-700 mb-2">
                                    Payment Amount (₹) <span class="text-red-500">*</span>
                                </label>
                                <div class="relative rounded-md shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">₹</span>
                                    </div>
                                    <input type="number" name="amount" id="amount" step="0.01" min="0.01" required
                                           value="{{ old('amount', $payment->amount) }}"
                                           class="block w-full pl-7 pr-12 border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm">INR</span>
                                    </div>
                                </div>
                                @error('amount')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="payment_date" class="block text-sm font-medium text-gray-700 mb-2">
                                    Payment Date <span class="text-red-500">*</span>
                                </label>
                                <input type="date" name="payment_date" id="payment_date" required
                                       value="{{ old('payment_date', $payment->payment_date->format('Y-m-d')) }}"
                                       class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                @error('payment_date')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="customer_name" class="block text-sm font-medium text-gray-700 mb-2">
                                    Customer Name
                                </label>
                                <input type="text" name="customer_name" id="customer_name"
                                       value="{{ old('customer_name', $payment->customer_name) }}"
                                       placeholder="Enter customer name"
                                       class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                @error('customer_name')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="payment_method" class="block text-sm font-medium text-gray-700 mb-2">
                                    Payment Method <span class="text-red-500">*</span>
                                </label>
                                <select name="payment_method" id="payment_method" required
                                        class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                        onchange="togglePaymentFields()">
                                    <option value="">Select Payment Method</option>
                                    <option value="cash" {{ old('payment_method', $payment->payment_method) == 'cash' ? 'selected' : '' }}>💵 Cash</option>
                                    <option value="online" {{ old('payment_method', $payment->payment_method) == 'online' ? 'selected' : '' }}>💳 Online Payment</option>
                                    <option value="upi" {{ old('payment_method', $payment->payment_method) == 'upi' ? 'selected' : '' }}>📱 UPI</option>
                                    <option value="bank_transfer" {{ old('payment_method', $payment->payment_method) == 'bank_transfer' ? 'selected' : '' }}>🏦 Bank Transfer</option>
                                    <option value="check" {{ old('payment_method', $payment->payment_method) == 'check' ? 'selected' : '' }}>✅ Check</option>
                                    <option value="debt" {{ old('payment_method', $payment->payment_method) == 'debt' ? 'selected' : '' }}>📋 Debt/Credit</option>
                                </select>
                                @error('payment_method')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Payment Method Specific Fields -->
                    <div id="payment_method_fields" class="space-y-6">
                        <!-- Bank Transfer Fields -->
                        <div id="bank_transfer_fields" class="bg-white border border-gray-200 rounded-lg p-6 {{ old('payment_method', $payment->payment_method) != 'bank_transfer' ? 'hidden' : '' }}">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-university text-blue-500 mr-2"></i>
                                Bank Transfer Details
                            </h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="transaction_id" class="block text-sm font-medium text-gray-700 mb-2">
                                        Transaction ID <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="transaction_id" id="transaction_id"
                                           value="{{ old('transaction_id', $payment->transaction_id) }}"
                                           class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    @error('transaction_id')
                                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="bank_name" class="block text-sm font-medium text-gray-700 mb-2">
                                        Bank Name
                                    </label>
                                    <input type="text" name="bank_name" id="bank_name"
                                           value="{{ old('bank_name', $payment->bank_name) }}"
                                           class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    @error('bank_name')
                                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Check Fields -->
                        <div id="check_fields" class="bg-white border border-gray-200 rounded-lg p-6 {{ old('payment_method', $payment->payment_method) != 'check' ? 'hidden' : '' }}">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-check text-green-500 mr-2"></i>
                                Check Details
                            </h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="check_number" class="block text-sm font-medium text-gray-700 mb-2">
                                        Check Number <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="check_number" id="check_number"
                                           value="{{ old('check_number', $payment->check_number) }}"
                                           class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    @error('check_number')
                                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="bank_name_check" class="block text-sm font-medium text-gray-700 mb-2">
                                        Bank Name
                                    </label>
                                    <input type="text" name="bank_name" id="bank_name_check"
                                           value="{{ old('bank_name', $payment->bank_name) }}"
                                           class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    @error('bank_name')
                                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Online Payment Fields -->
                        <div id="online_fields" class="bg-white border border-gray-200 rounded-lg p-6 {{ old('payment_method', $payment->payment_method) != 'online' ? 'hidden' : '' }}">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-credit-card text-purple-500 mr-2"></i>
                                Online Payment Details
                            </h3>
                            <div>
                                <label for="transaction_id_online" class="block text-sm font-medium text-gray-700 mb-2">
                                    Transaction ID
                                </label>
                                <input type="text" name="transaction_id" id="transaction_id_online"
                                       value="{{ old('transaction_id', $payment->transaction_id) }}"
                                       class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                @error('transaction_id')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <!-- UPI Fields -->
                        <div id="upi_fields" class="bg-white border border-gray-200 rounded-lg p-6 {{ old('payment_method', $payment->payment_method) != 'upi' ? 'hidden' : '' }}">
                            <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                                <i class="fas fa-mobile-alt text-indigo-500 mr-2"></i>
                                UPI Payment Details
                            </h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="upi_id" class="block text-sm font-medium text-gray-700 mb-2">
                                        UPI ID <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="upi_id" id="upi_id"
                                           value="{{ old('upi_id', $payment->upi_id) }}"
                                           placeholder="example@upi"
                                           class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    @error('upi_id')
                                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="upi_transaction_id" class="block text-sm font-medium text-gray-700 mb-2">
                                        UPI Transaction ID
                                    </label>
                                    <input type="text" name="upi_transaction_id" id="upi_transaction_id"
                                           value="{{ old('upi_transaction_id', $payment->upi_transaction_id) }}"
                                           placeholder="UTR123456789"
                                           class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    @error('upi_transaction_id')
                                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Debt Fields -->
                        <div id="debt_fields" class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 {{ old('payment_method', $payment->payment_method) != 'debt' ? 'hidden' : '' }}">
                            <h3 class="text-lg font-medium text-yellow-800 mb-4 flex items-center">
                                <i class="fas fa-exclamation-triangle text-yellow-600 mr-2"></i>
                                Debt/Credit Payment Details
                            </h3>
                            <div class="bg-white border border-yellow-200 rounded-lg p-4 mb-4">
                                <p class="text-sm text-yellow-700">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    This payment is recorded as debt/credit. The customer will be billed later.
                                </p>
                            </div>
                            <div>
                                <label for="debt_notes" class="block text-sm font-medium text-gray-700 mb-2">
                                    Debt Notes <span class="text-red-500">*</span>
                                </label>
                                <textarea name="debt_notes" id="debt_notes" rows="4"
                                          placeholder="Enter details about the debt arrangement..."
                                          class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">{{ old('debt_notes', $payment->debt_notes) }}</textarea>
                                @error('debt_notes')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div class="bg-white border border-gray-200 rounded-lg p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-sticky-note text-yellow-500 mr-2"></i>
                            Additional Notes
                        </h3>
                        <div>
                            <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
                                Payment Notes
                            </label>
                            <textarea name="notes" id="notes" rows="4"
                                      class="block w-full border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 sm:text-sm">{{ old('notes', $payment->notes) }}</textarea>
                            @error('notes')
                                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex items-center justify-between">
                    <div class="text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Last updated: {{ $payment->updated_at->format('M d, Y H:i') }}
                    </div>
                    <div class="flex space-x-3">
                        <a href="{{ route('admin.payments.show', $payment) }}" 
                           class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            <i class="fas fa-times mr-2"></i>
                            Cancel
                        </a>
                        <button type="submit" 
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            <i class="fas fa-save mr-2"></i>
                            Update Payment
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function togglePaymentFields() {
    const method = document.getElementById('payment_method').value;
    
    // Hide all payment method fields
    const allFields = ['bank_transfer_fields', 'check_fields', 'online_fields', 'upi_fields', 'debt_fields'];
    allFields.forEach(fieldId => {
        const element = document.getElementById(fieldId);
        if (element) {
            element.classList.add('hidden');
        }
    });
    
    // Show relevant fields
    if (method) {
        const targetField = method + '_fields';
        const targetElement = document.getElementById(targetField);
        if (targetElement) {
            targetElement.classList.remove('hidden');
        }
    }
}

// Initialize field visibility on page load
document.addEventListener('DOMContentLoaded', function() {
    togglePaymentFields();
});
</script>
@endsection