@extends('admin.layout')

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

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

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="bg-white shadow-xl rounded-xl overflow-hidden border border-gray-100">
        <!-- Header -->
        <div class="bg-gradient-to-r from-green-600 to-green-700 px-8 py-6 shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-2xl font-bold text-white flex items-center">
                        <i class="fas fa-rupee-sign mr-3"></i>
                        Record Payment
                    </h2>
                    <p class="text-green-100 text-sm mt-2 flex items-center">
                        <i class="fas fa-tasks mr-2"></i>
                        Task ID: #{{ $task->id }}
                    </p>
                </div>
                <div class="text-right">
                    <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-800 shadow-md">
                        <i class="fas fa-plus-circle mr-2"></i>
                        New Payment
                    </span>
                </div>
            </div>
        </div>

        <!-- Task Information -->
        <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-8 py-6 border-b border-gray-200">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
                    <div class="flex items-center space-x-4">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center shadow-sm">
                                <i class="fas fa-tasks text-blue-600 text-lg"></i>
                            </div>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Task Title</p>
                            <p class="text-sm font-medium text-gray-900 mt-1">{{ $task->title }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
                    <div class="flex items-center space-x-4">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center shadow-sm">
                                <i class="fas fa-user text-purple-600 text-lg"></i>
                            </div>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Customer</p>
                            <p class="text-sm font-medium text-gray-900 mt-1">{{ $task->ticket ? $task->ticket->first_name . ' ' . $task->ticket->last_name : 'Walk-in Customer' }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
                    <div class="flex items-center space-x-4">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center shadow-sm">
                                <i class="fas fa-user-tie text-green-600 text-lg"></i>
                            </div>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Technician</p>
                            <p class="text-sm font-medium text-gray-900 mt-1">{{ $task->technician->name ?? 'Not Assigned' }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
                    <div class="flex items-center space-x-4">
                        <div class="flex-shrink-0">
                            <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center shadow-sm">
                                <i class="fas fa-calendar-check text-orange-600 text-lg"></i>
                            </div>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Completed Date</p>
                            <p class="text-sm font-medium text-gray-900 mt-1">{{ $task->completed_at->format('M d, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form -->
        <div class="px-8 py-8 bg-gradient-to-br from-gray-50 to-white">
            <form action="{{ route('admin.payments.store') }}" method="POST" class="space-y-8">
                @csrf
                <input type="hidden" name="task_id" value="{{ $task->id }}">
                
                <!-- Basic Information -->
                <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
                    <h3 class="text-xl font-bold text-gray-900 mb-8 flex items-center pb-4 border-b-2 border-gray-200">
                        <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-info-circle text-white text-lg"></i>
                        </div>
                        Payment Information
                    </h3>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                        <!-- Left Column -->
                        <div class="space-y-8">
                            <!-- Payment Amount -->
                            <div>
                                <label for="amount" class="block text-sm font-bold text-gray-700 mb-4 flex items-center">
                                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-rupee-sign text-green-600 text-sm"></i>
                                    </div>
                                    Payment Amount <span class="text-red-500 ml-2 font-bold">*</span>
                                </label>
                                <div class="relative rounded-xl shadow-lg border-2 border-gray-300 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 transition-all">
                                    <div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
                                        <span class="text-gray-600 font-bold text-lg">₹</span>
                                    </div>
                                    <input type="number" name="amount" id="amount" step="0.01" min="0.01" required
                                           value="{{ old('amount') }}"
                                           class="block w-full pl-12 pr-20 border-0 rounded-xl focus:ring-0 focus:outline-none text-lg font-semibold py-4">
                                    <div class="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
                                        <span class="text-gray-600 font-bold bg-gray-100 px-3 py-2 rounded-lg text-sm">INR</span>
                                    </div>
                                </div>
                                @error('amount')
                                    <p class="mt-3 text-sm text-red-600 flex items-center bg-red-50 p-3 rounded-lg border border-red-200">
                                        <i class="fas fa-exclamation-triangle mr-2"></i>
                                        {{ $message }}
                                    </p>
                                @enderror

                            <!-- Payment Date -->
                            <div>
                                <label for="payment_date" class="block text-sm font-bold text-gray-700 mb-4 flex items-center">
                                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-calendar text-blue-600 text-sm"></i>
                                    </div>
                                    Payment Date <span class="text-red-500 ml-2 font-bold">*</span>
                                </label>
                                <div class="relative rounded-xl shadow-lg border-2 border-gray-300 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 transition-all">
                                    <input type="date" name="payment_date" id="payment_date" required
                                           value="{{ old('payment_date', now()->format('Y-m-d')) }}"
                                           class="block w-full border-0 rounded-xl focus:ring-0 focus:outline-none px-5 py-4 text-lg font-semibold">
                                </div>
                                @error('payment_date')
                                    <p class="mt-3 text-sm text-red-600 flex items-center bg-red-50 p-3 rounded-lg border border-red-200">
                                        <i class="fas fa-exclamation-triangle mr-2"></i>
                                        {{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        <!-- Right Column -->
                        <div class="space-y-8">
                            <!-- Customer Name -->
                            <div>
                                <label for="customer_name" class="block text-sm font-bold text-gray-700 mb-4 flex items-center">
                                    <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-user text-purple-600 text-sm"></i>
                                    </div>
                                    Customer Name
                                </label>
                                <div class="relative rounded-xl shadow-lg border-2 border-gray-300 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 transition-all">
                                    <input type="text" name="customer_name" id="customer_name"
                                           value="{{ old('customer_name', $task->ticket ? $task->ticket->first_name . ' ' . $task->ticket->last_name : '') }}"
                                           placeholder="{{ $task->ticket ? $task->ticket->first_name . ' ' . $task->ticket->last_name : 'Enter customer name' }}"
                                           class="block w-full border-0 rounded-xl focus:ring-0 focus:outline-none px-5 py-4 text-lg font-semibold">
                                </div>
                                @error('customer_name')
                                    <p class="mt-3 text-sm text-red-600 flex items-center bg-red-50 p-3 rounded-lg border border-red-200">
                                        <i class="fas fa-exclamation-triangle mr-2"></i>
                                        {{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <!-- Payment Method -->
                            <div>
                                <label for="payment_method" class="block text-sm font-bold text-gray-700 mb-4 flex items-center">
                                    <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                                        <i class="fas fa-credit-card text-indigo-600 text-sm"></i>
                                    </div>
                                    Payment Method <span class="text-red-500 ml-2 font-bold">*</span>
                                </label>
                                <div class="relative rounded-xl shadow-lg border-2 border-gray-300 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 transition-all">
                                    <select name="payment_method" id="payment_method" required
                                            class="block w-full border-0 rounded-xl focus:ring-0 focus:outline-none px-5 py-4 text-lg font-semibold appearance-none bg-white"
                                            onchange="togglePaymentFields()">
                                        <option value="">Select Payment Method</option>
                                        <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>💵 Cash</option>
                                        <option value="online" {{ old('payment_method') == 'online' ? 'selected' : '' }}>💳 Online Payment</option>
                                        <option value="upi" {{ old('payment_method') == 'upi' ? 'selected' : '' }}>📱 UPI</option>
                                        <option value="bank_transfer" {{ old('payment_method') == 'bank_transfer' ? 'selected' : '' }}>🏦 Bank Transfer</option>
                                        <option value="check" {{ old('payment_method') == 'check' ? 'selected' : '' }}>✅ Check</option>
                                        <option value="debt" {{ old('payment_method') == 'debt' ? 'selected' : '' }}>📋 Debt/Credit</option>
                                    </select>
                                    <div class="absolute inset-y-0 right-0 pr-5 flex items-center pointer-events-none">
                                        <i class="fas fa-chevron-down text-gray-400 text-xl"></i>
                                    </div>
                                </div>
                                @error('payment_method')
                                    <p class="mt-3 text-sm text-red-600 flex items-center bg-red-50 p-3 rounded-lg border border-red-200">
                                        <i class="fas fa-exclamation-triangle mr-2"></i>
                                        {{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </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 hidden shadow-sm">
                            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-100 pb-3">
                                <i class="fas fa-university text-blue-500 mr-3"></i>
                                Bank Transfer Details
                            </h3>
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                                <div>
                                    <label for="transaction_id" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <i class="fas fa-receipt text-blue-500 mr-2 text-xs"></i>
                                        Transaction ID <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                        <input type="text" name="transaction_id" id="transaction_id"
                                               value="{{ old('transaction_id') }}"
                                               placeholder="Enter transaction ID..."
                                               class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3">
                                    </div>
                                    @error('transaction_id')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="bank_name" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <i class="fas fa-building text-blue-500 mr-2 text-xs"></i>
                                        Bank Name
                                    </label>
                                    <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                        <select name="bank_name" id="bank_name"
                                                class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3 appearance-none bg-white">
                                            <option value="">Select Bank</option>
                                            <option value="State Bank of India" {{ old('bank_name') == 'State Bank of India' ? 'selected' : '' }}>State Bank of India (SBI)</option>
                                            <option value="HDFC Bank" {{ old('bank_name') == 'HDFC Bank' ? 'selected' : '' }}>HDFC Bank</option>
                                            <option value="ICICI Bank" {{ old('bank_name') == 'ICICI Bank' ? 'selected' : '' }}>ICICI Bank</option>
                                            <option value="Punjab National Bank" {{ old('bank_name') == 'Punjab National Bank' ? 'selected' : '' }}>Punjab National Bank (PNB)</option>
                                            <option value="Bank of Baroda" {{ old('bank_name') == 'Bank of Baroda' ? 'selected' : '' }}>Bank of Baroda (BoB)</option>
                                            <option value="Canara Bank" {{ old('bank_name') == 'Canara Bank' ? 'selected' : '' }}>Canara Bank</option>
                                            <option value="Union Bank of India" {{ old('bank_name') == 'Union Bank of India' ? 'selected' : '' }}>Union Bank of India</option>
                                            <option value="Bank of India" {{ old('bank_name') == 'Bank of India' ? 'selected' : '' }}>Bank of India (BoI)</option>
                                            <option value="Indian Bank" {{ old('bank_name') == 'Indian Bank' ? 'selected' : '' }}>Indian Bank</option>
                                            <option value="Axis Bank" {{ old('bank_name') == 'Axis Bank' ? 'selected' : '' }}>Axis Bank</option>
                                            <option value="Kotak Mahindra Bank" {{ old('bank_name') == 'Kotak Mahindra Bank' ? 'selected' : '' }}>Kotak Mahindra Bank</option>
                                            <option value="IndusInd Bank" {{ old('bank_name') == 'IndusInd Bank' ? 'selected' : '' }}>IndusInd Bank</option>
                                            <option value="Yes Bank" {{ old('bank_name') == 'Yes Bank' ? 'selected' : '' }}>Yes Bank</option>
                                            <option value="Federal Bank" {{ old('bank_name') == 'Federal Bank' ? 'selected' : '' }}>Federal Bank</option>
                                            <option value="IDFC First Bank" {{ old('bank_name') == 'IDFC First Bank' ? 'selected' : '' }}>IDFC First Bank</option>
                                            <option value="Bandhan Bank" {{ old('bank_name') == 'Bandhan Bank' ? 'selected' : '' }}>Bandhan Bank</option>
                                            <option value="Central Bank of India" {{ old('bank_name') == 'Central Bank of India' ? 'selected' : '' }}>Central Bank of India</option>
                                            <option value="Indian Overseas Bank" {{ old('bank_name') == 'Indian Overseas Bank' ? 'selected' : '' }}>Indian Overseas Bank</option>
                                            <option value="UCO Bank" {{ old('bank_name') == 'UCO Bank' ? 'selected' : '' }}>UCO Bank</option>
                                            <option value="Bank of Maharashtra" {{ old('bank_name') == 'Bank of Maharashtra' ? 'selected' : '' }}>Bank of Maharashtra</option>
                                            <option value="Punjab & Sind Bank" {{ old('bank_name') == 'Punjab & Sind Bank' ? 'selected' : '' }}>Punjab & Sind Bank</option>
                                            <option value="Jammu & Kashmir Bank" {{ old('bank_name') == 'Jammu & Kashmir Bank' ? 'selected' : '' }}>Jammu & Kashmir Bank</option>
                                            <option value="Dhanlaxmi Bank" {{ old('bank_name') == 'Dhanlaxmi Bank' ? 'selected' : '' }}>Dhanlaxmi Bank</option>
                                            <option value="Karur Vysya Bank" {{ old('bank_name') == 'Karur Vysya Bank' ? 'selected' : '' }}>Karur Vysya Bank</option>
                                            <option value="Lakshmi Vilas Bank" {{ old('bank_name') == 'Lakshmi Vilas Bank' ? 'selected' : '' }}>Lakshmi Vilas Bank</option>
                                            <option value="South Indian Bank" {{ old('bank_name') == 'South Indian Bank' ? 'selected' : '' }}>South Indian Bank</option>
                                            <option value="Other" {{ old('bank_name') == 'Other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                            <i class="fas fa-chevron-down text-gray-400"></i>
                                        </div>
                                    </div>
                                    @error('bank_name')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Check Fields -->
                        <div id="check_fields" class="bg-white border border-gray-200 rounded-lg p-6 hidden shadow-sm">
                            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-100 pb-3">
                                <i class="fas fa-check text-green-500 mr-3"></i>
                                Check Details
                            </h3>
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                                <div>
                                    <label for="check_number" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <i class="fas fa-hashtag text-green-500 mr-2 text-xs"></i>
                                        Check Number <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                        <input type="text" name="check_number" id="check_number"
                                               value="{{ old('check_number') }}"
                                               placeholder="Enter check number..."
                                               class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3">
                                    </div>
                                    @error('check_number')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="bank_name_check" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <i class="fas fa-building text-green-500 mr-2 text-xs"></i>
                                        Bank Name
                                    </label>
                                    <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                        <select name="bank_name" id="bank_name_check"
                                                class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3 appearance-none bg-white">
                                            <option value="">Select Bank</option>
                                            <option value="State Bank of India" {{ old('bank_name') == 'State Bank of India' ? 'selected' : '' }}>State Bank of India (SBI)</option>
                                            <option value="HDFC Bank" {{ old('bank_name') == 'HDFC Bank' ? 'selected' : '' }}>HDFC Bank</option>
                                            <option value="ICICI Bank" {{ old('bank_name') == 'ICICI Bank' ? 'selected' : '' }}>ICICI Bank</option>
                                            <option value="Punjab National Bank" {{ old('bank_name') == 'Punjab National Bank' ? 'selected' : '' }}>Punjab National Bank (PNB)</option>
                                            <option value="Bank of Baroda" {{ old('bank_name') == 'Bank of Baroda' ? 'selected' : '' }}>Bank of Baroda (BoB)</option>
                                            <option value="Canara Bank" {{ old('bank_name') == 'Canara Bank' ? 'selected' : '' }}>Canara Bank</option>
                                            <option value="Union Bank of India" {{ old('bank_name') == 'Union Bank of India' ? 'selected' : '' }}>Union Bank of India</option>
                                            <option value="Bank of India" {{ old('bank_name') == 'Bank of India' ? 'selected' : '' }}>Bank of India (BoI)</option>
                                            <option value="Indian Bank" {{ old('bank_name') == 'Indian Bank' ? 'selected' : '' }}>Indian Bank</option>
                                            <option value="Axis Bank" {{ old('bank_name') == 'Axis Bank' ? 'selected' : '' }}>Axis Bank</option>
                                            <option value="Kotak Mahindra Bank" {{ old('bank_name') == 'Kotak Mahindra Bank' ? 'selected' : '' }}>Kotak Mahindra Bank</option>
                                            <option value="IndusInd Bank" {{ old('bank_name') == 'IndusInd Bank' ? 'selected' : '' }}>IndusInd Bank</option>
                                            <option value="Yes Bank" {{ old('bank_name') == 'Yes Bank' ? 'selected' : '' }}>Yes Bank</option>
                                            <option value="Federal Bank" {{ old('bank_name') == 'Federal Bank' ? 'selected' : '' }}>Federal Bank</option>
                                            <option value="IDFC First Bank" {{ old('bank_name') == 'IDFC First Bank' ? 'selected' : '' }}>IDFC First Bank</option>
                                            <option value="Bandhan Bank" {{ old('bank_name') == 'Bandhan Bank' ? 'selected' : '' }}>Bandhan Bank</option>
                                            <option value="Central Bank of India" {{ old('bank_name') == 'Central Bank of India' ? 'selected' : '' }}>Central Bank of India</option>
                                            <option value="Indian Overseas Bank" {{ old('bank_name') == 'Indian Overseas Bank' ? 'selected' : '' }}>Indian Overseas Bank</option>
                                            <option value="UCO Bank" {{ old('bank_name') == 'UCO Bank' ? 'selected' : '' }}>UCO Bank</option>
                                            <option value="Bank of Maharashtra" {{ old('bank_name') == 'Bank of Maharashtra' ? 'selected' : '' }}>Bank of Maharashtra</option>
                                            <option value="Punjab & Sind Bank" {{ old('bank_name') == 'Punjab & Sind Bank' ? 'selected' : '' }}>Punjab & Sind Bank</option>
                                            <option value="Jammu & Kashmir Bank" {{ old('bank_name') == 'Jammu & Kashmir Bank' ? 'selected' : '' }}>Jammu & Kashmir Bank</option>
                                            <option value="Dhanlaxmi Bank" {{ old('bank_name') == 'Dhanlaxmi Bank' ? 'selected' : '' }}>Dhanlaxmi Bank</option>
                                            <option value="Karur Vysya Bank" {{ old('bank_name') == 'Karur Vysya Bank' ? 'selected' : '' }}>Karur Vysya Bank</option>
                                            <option value="Lakshmi Vilas Bank" {{ old('bank_name') == 'Lakshmi Vilas Bank' ? 'selected' : '' }}>Lakshmi Vilas Bank</option>
                                            <option value="South Indian Bank" {{ old('bank_name') == 'South Indian Bank' ? 'selected' : '' }}>South Indian Bank</option>
                                            <option value="Other" {{ old('bank_name') == 'Other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                            <i class="fas fa-chevron-down text-gray-400"></i>
                                        </div>
                                    </div>
                                    @error('bank_name')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Online Payment Fields -->
                        <div id="online_fields" class="bg-white border border-gray-200 rounded-lg p-6 hidden shadow-sm">
                            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-100 pb-3">
                                <i class="fas fa-credit-card text-purple-500 mr-3"></i>
                                Online Payment Details
                            </h3>
                            <div>
                                <label for="transaction_id_online" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <i class="fas fa-receipt text-purple-500 mr-2 text-xs"></i>
                                    Transaction ID
                                </label>
                                <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                    <input type="text" name="transaction_id" id="transaction_id_online"
                                           value="{{ old('transaction_id') }}"
                                           placeholder="Enter online transaction ID..."
                                           class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3">
                                </div>
                                @error('transaction_id')
                                    <p class="mt-2 text-sm text-red-600 flex items-center">
                                        <i class="fas fa-exclamation-circle mr-1"></i>
                                        {{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        <!-- UPI Fields -->
                        <div id="upi_fields" class="bg-white border border-gray-200 rounded-lg p-6 hidden shadow-sm">
                            <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-100 pb-3">
                                <i class="fas fa-mobile-alt text-indigo-500 mr-3"></i>
                                UPI Payment Details
                            </h3>
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                                <div>
                                    <label for="upi_id" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <i class="fas fa-at text-indigo-500 mr-2 text-xs"></i>
                                        UPI ID <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                        <input type="text" name="upi_id" id="upi_id"
                                               value="{{ old('upi_id') }}"
                                               placeholder="example@upi"
                                               class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3">
                                    </div>
                                    @error('upi_id')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="upi_transaction_id" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <i class="fas fa-exchange-alt text-indigo-500 mr-2 text-xs"></i>
                                        UPI Transaction ID
                                    </label>
                                    <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                        <input type="text" name="upi_transaction_id" id="upi_transaction_id"
                                               value="{{ old('upi_transaction_id') }}"
                                               placeholder="UTR123456789"
                                               class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3">
                                    </div>
                                    @error('upi_transaction_id')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Debt Fields -->
                        <div id="debt_fields" class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 hidden shadow-sm">
                            <h3 class="text-lg font-semibold text-yellow-800 mb-6 flex items-center border-b border-yellow-100 pb-3">
                                <i class="fas fa-exclamation-triangle text-yellow-600 mr-3"></i>
                                Debt/Credit Payment Details
                            </h3>
                            <div class="bg-white border border-yellow-200 rounded-lg p-4 mb-6">
                                <p class="text-sm text-yellow-700 flex items-center">
                                    <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 class="space-y-4">
                                <div>
                                    <label for="debt_notes" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                        <i class="fas fa-sticky-note text-yellow-600 mr-2 text-xs"></i>
                                        Debt Notes <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                        <textarea name="debt_notes" id="debt_notes" rows="5"
                                                  placeholder="Enter details about debt arrangement, due date, payment terms..."
                                                  class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3 resize-none">{{ old('debt_notes') }}</textarea>
                                        <div class="absolute bottom-3 right-3 text-xs text-gray-400">
                                            <span id="debtCharCount">0</span> / 500
                                        </div>
                                    </div>
                                    @error('debt_notes')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                                
                                <!-- Additional debt fields -->
                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-4">
                                    <div>
                                        <label for="due_date" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                            <i class="fas fa-calendar-alt text-yellow-600 mr-2 text-xs"></i>
                                            Due Date
                                        </label>
                                        <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                            <input type="date" name="due_date" id="due_date"
                                                   value="{{ old('due_date') }}"
                                                   class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3">
                                        </div>
                                        @error('due_date')
                                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                                <i class="fas fa-exclamation-circle mr-1"></i>
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label for="debt_amount" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                            <i class="fas fa-rupee-sign text-yellow-600 mr-2 text-xs"></i>
                                            Total Debt Amount
                                        </label>
                                        <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                                <span class="text-gray-500 font-semibold">₹</span>
                                            </div>
                                            <input type="number" name="debt_amount" id="debt_amount" step="0.01" min="0"
                                                   value="{{ old('debt_amount') }}"
                                                   placeholder="0.00"
                                                   class="block w-full pl-10 pr-4 border-0 rounded-lg focus:ring-0 focus:outline-none">
                                        </div>
                                        @error('debt_amount')
                                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                                <i class="fas fa-exclamation-circle mr-1"></i>
                                                {{ $message }}
                                            </p>
                                        @enderror
                                    </div>
                                </div>
                                
                                <!-- Quick action buttons -->
                                <div class="flex flex-wrap gap-2 mt-4">
                                    <button type="button" onclick="addDebtNoteTemplate('Payment due in 30 days')" 
                                            class="px-3 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full hover:bg-yellow-200 transition-colors">
                                        <i class="fas fa-clock mr-1"></i> Due in 30 days
                                    </button>
                                    <button type="button" onclick="addDebtNoteTemplate('Payment due in 60 days')" 
                                            class="px-3 py-1 text-xs bg-orange-100 text-orange-700 rounded-full hover:bg-orange-200 transition-colors">
                                        <i class="fas fa-calendar mr-1"></i> Due in 60 days
                                    </button>
                                    <button type="button" onclick="addDebtNoteTemplate('Customer credit limit')" 
                                            class="px-3 py-1 text-xs bg-red-100 text-red-700 rounded-full hover:bg-red-200 transition-colors">
                                        <i class="fas fa-exclamation-triangle mr-1"></i> Credit limit
                                    </button>
                                    <button type="button" onclick="clearDebtNotes()" 
                                            class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">
                                        <i class="fas fa-eraser mr-1"></i> Clear
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6 flex items-center border-b border-gray-100 pb-3">
                            <i class="fas fa-sticky-note text-yellow-500 mr-3"></i>
                            Additional Notes
                        </h3>
                        <div class="space-y-4">
                            <div>
                                <label for="notes" class="block text-sm font-semibold text-gray-700 mb-3 flex items-center">
                                    <i class="fas fa-pen text-yellow-500 mr-2 text-xs"></i>
                                    Payment Notes
                                </label>
                                <div class="relative rounded-lg shadow-sm border border-gray-300 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
                                    <textarea name="notes" id="notes" rows="5"
                                              placeholder="Enter any additional notes about this payment..."
                                              class="block w-full border-0 rounded-lg focus:ring-0 focus:outline-none px-4 py-3 resize-none">{{ old('notes') }}</textarea>
                                    <div class="absolute bottom-3 right-3 text-xs text-gray-400">
                                        <span id="charCount">0</span> / 500
                                    </div>
                                </div>
                                @error('notes')
                                    <p class="mt-2 text-sm text-red-600 flex items-center">
                                        <i class="fas fa-exclamation-circle mr-1"></i>
                                        {{ $message }}
                                    </p>
                                @enderror
                            </div>
                            
                            <!-- Quick Actions -->
                            <div class="flex flex-wrap gap-2 mt-4">
                                <button type="button" onclick="addNoteTemplate('Paid in full')" 
                                        class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors">
                                    <i class="fas fa-check-circle mr-1"></i> Paid in full
                                </button>
                                <button type="button" onclick="addNoteTemplate('Partial payment')" 
                                        class="px-3 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full hover:bg-yellow-200 transition-colors">
                                    <i class="fas fa-coins mr-1"></i> Partial payment
                                </button>
                                <button type="button" onclick="addNoteTemplate('Payment received via cash')" 
                                        class="px-3 py-1 text-xs bg-green-100 text-green-700 rounded-full hover:bg-green-200 transition-colors">
                                    <i class="fas fa-money-bill mr-1"></i> Cash payment
                                </button>
                                <button type="button" onclick="clearNotes()" 
                                        class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors">
                                    <i class="fas fa-eraser mr-1"></i> Clear
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-8 py-6 border-t-2 border-gray-200">
                    <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
                        <div class="flex items-center text-sm text-gray-600 bg-white px-4 py-3 rounded-lg border border-gray-200 shadow-sm">
                            <i class="fas fa-info-circle mr-3 text-blue-500"></i>
                            <span class="font-medium">Recording payment for task completed on {{ $task->completed_at->format('M d, Y') }}</span>
                        </div>
                        <div class="flex flex-col sm:flex-row gap-3">
                            <a href="{{ route('admin.tasks.show', $task) }}" 
                               class="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-300 shadow-sm text-sm font-semibold rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
                                <i class="fas fa-times mr-2"></i>
                                Cancel
                            </a>
                            <button type="submit" 
                                    class="inline-flex items-center justify-center px-8 py-3 border-2 border-transparent shadow-lg text-sm font-bold rounded-lg text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 transform hover:scale-105">
                                <i class="fas fa-rupee-sign mr-2"></i>
                                Record Payment
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function togglePaymentFields() {
    const method = document.getElementById('payment_method').value;
    
    console.log('Payment method selected:', method); // Debug line
    
    // 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');
            console.log('Hiding field:', fieldId); // Debug line
        }
    });
    
    // Show relevant fields
    if (method) {
        const targetField = method + '_fields';
        const targetElement = document.getElementById(targetField);
        console.log('Looking for field:', targetField); // Debug line
        if (targetElement) {
            targetElement.classList.remove('hidden');
            console.log('Showing field:', targetField); // Debug line
        } else {
            console.error('Field not found:', targetField); // Debug line
        }
    }
}

// Note template functions
function addNoteTemplate(template) {
    const notesField = document.getElementById('notes');
    const currentText = notesField.value;
    
    if (currentText && !currentText.endsWith(' ')) {
        notesField.value = currentText + ' ' + template;
    } else {
        notesField.value = currentText + template;
    }
    
    updateCharCount();
}

function clearNotes() {
    document.getElementById('notes').value = '';
    updateCharCount();
}

function addDebtNoteTemplate(template) {
    const debtNotesField = document.getElementById('debt_notes');
    const currentText = debtNotesField.value;
    
    if (currentText && !currentText.endsWith(' ')) {
        debtNotesField.value = currentText + ' ' + template;
    } else {
        debtNotesField.value = currentText + template;
    }
    
    updateDebtCharCount();
}

function clearDebtNotes() {
    document.getElementById('debt_notes').value = '';
    updateDebtCharCount();
}

function updateCharCount() {
    const notesField = document.getElementById('notes');
    const charCount = document.getElementById('charCount');
    const count = notesField.value.length;
    
    charCount.textContent = count;
    
    if (count > 500) {
        charCount.classList.add('text-red-500');
        charCount.classList.remove('text-gray-400');
    } else {
        charCount.classList.remove('text-red-500');
        charCount.classList.add('text-gray-400');
    }
}

function updateDebtCharCount() {
    const debtNotesField = document.getElementById('debt_notes');
    const debtCharCount = document.getElementById('debtCharCount');
    const count = debtNotesField.value.length;
    
    debtCharCount.textContent = count;
    
    if (count > 500) {
        debtCharCount.classList.add('text-red-500');
        debtCharCount.classList.remove('text-gray-400');
    } else {
        debtCharCount.classList.remove('text-red-500');
        debtCharCount.classList.add('text-gray-400');
    }
}

// Auto-fill customer name from ticket if available
document.addEventListener('DOMContentLoaded', function() {
    const customerNameField = document.getElementById('customer_name');
    const paymentMethodSelect = document.getElementById('payment_method');
    const notesField = document.getElementById('notes');
    const debtNotesField = document.getElementById('debt_notes');
    
    // Set customer name if not already filled
    if (!customerNameField.value && customerNameField.placeholder) {
        customerNameField.value = customerNameField.placeholder;
    }
    
    // Trigger field toggle on page load if method is pre-selected
    if (paymentMethodSelect.value) {
        togglePaymentFields();
    }
    
    // Setup character counters
    if (notesField) {
        notesField.addEventListener('input', updateCharCount);
        updateCharCount(); // Initialize count
    }
    
    if (debtNotesField) {
        debtNotesField.addEventListener('input', updateDebtCharCount);
        updateDebtCharCount(); // Initialize count
    }
    
    // Add smooth transitions to payment method fields
    const paymentFields = document.querySelectorAll('#payment_method_fields > div');
    paymentFields.forEach(field => {
        field.style.transition = 'all 0.3s ease-in-out';
    });
});

// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
    // Ctrl/Cmd + S to save
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        document.querySelector('button[type="submit"]').click();
    }
    
    // Escape to cancel
    if (e.key === 'Escape') {
        const cancelButton = document.querySelector('a[href*="admin.tasks"]');
        if (cancelButton) {
            cancelButton.click();
        }
    }
});
</script>
@endsection