@extends('layouts.admin')

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

@push('styles')
<style>
.content-wrapper {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
</style>
@endpush

@section('content')
<div class="container-fluid px-4 content-wrapper">
    <!-- Page Header -->
    <div class="mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h2 class="mb-1">Record Manual Payment</h2>
                <p class="text-muted mb-0">Record offline/manual payment for black belt certificate</p>
            </div>
            <a href="{{ route('admin.manual-payments.index') }}" class="btn btn-outline-secondary">
                <i class="uil uil-arrow-left me-2"></i>Back to List
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show">
            <i class="uil uil-exclamation-triangle me-2"></i>
            <strong>Validation Error:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show">
            <i class="uil uil-exclamation-circle me-2"></i>{{ session('warning') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <!-- Form Card -->
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.manual-payments.store') }}" id="paymentForm">
                        @csrf

                        <!-- User Search Section -->
                        <div class="mb-4">
                            <h5 class="card-title mb-3">User Information</h5>
                            
                            <div class="row g-3">
                                <div class="col-md-8">
                                    <label for="reg_uid" class="form-label">Registration UID <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" 
                                               class="form-control @error('reg_uid') is-invalid @enderror" 
                                               id="reg_uid" 
                                               name="reg_uid" 
                                               value="{{ old('reg_uid', $user->reg_uid ?? '') }}" 
                                               placeholder="Enter user's UID"
                                               required>
                                        <button class="btn btn-outline-primary" type="button" id="searchBtn">
                                            <i class="uil uil-search me-1"></i>Search
                                        </button>
                                        @error('reg_uid')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- User Details Display -->
                            <div id="userDetails" class="mt-3 {{ $user ? '' : 'd-none' }}">
                                <div class="alert alert-info">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <strong>Name:</strong> <span id="userName">{{ $user->first_name ?? '' }} {{ $user->last_name ?? '' }}</span>
                                        </div>
                                        <div class="col-md-6">
                                            <strong>Email:</strong> <span id="userEmail">{{ $user->email ?? '' }}</span>
                                        </div>
                                        <div class="col-md-6 mt-2">
                                            <strong>Phone:</strong> <span id="userPhone">{{ $user->phone ?? '' }}</span>
                                        </div>
                                        <div class="col-md-6 mt-2">
                                            <strong>Payment Status:</strong> 
                                            <span id="userPaidStatus">
                                                @if($user && $user->paid)
                                                    <span class="badge bg-success">Paid</span>
                                                @else
                                                    <span class="badge bg-warning text-dark">Unpaid</span>
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Payment Details Section -->
                        <div class="mb-4">
                            <h5 class="card-title mb-3">Payment Details</h5>
                            
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="payment_type" class="form-label">Payment Type <span class="text-danger">*</span></label>
                                    <select class="form-select @error('payment_type') is-invalid @enderror" 
                                            id="payment_type" 
                                            name="payment_type" 
                                            required>
                                        <option value="">Select Payment Type</option>
                                        <option value="cash" {{ old('payment_type') === 'cash' ? 'selected' : '' }}>Cash</option>
                                        <option value="cheque" {{ old('payment_type') === 'cheque' ? 'selected' : '' }}>Cheque</option>
                                        <option value="dd" {{ old('payment_type') === 'dd' ? 'selected' : '' }}>Demand Draft (DD)</option>
                                        <option value="neft" {{ old('payment_type') === 'neft' ? 'selected' : '' }}>NEFT/RTGS</option>
                                        <option value="upi" {{ old('payment_type') === 'upi' ? 'selected' : '' }}>UPI</option>
                                        <option value="other" {{ old('payment_type') === 'other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                    @error('payment_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="amount" class="form-label">Amount (₹) <span class="text-danger">*</span></label>
                                    <input type="number" 
                                           class="form-control @error('amount') is-invalid @enderror" 
                                           id="amount" 
                                           name="amount" 
                                           value="{{ old('amount') }}" 
                                           step="0.01" 
                                           min="0" 
                                           placeholder="Enter amount"
                                           required>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="payment_mode" class="form-label">Payment Mode</label>
                                    <input type="text" 
                                           class="form-control @error('payment_mode') is-invalid @enderror" 
                                           id="payment_mode" 
                                           name="payment_mode" 
                                           value="{{ old('payment_mode') }}" 
                                           placeholder="e.g., Bank Name, UPI ID">
                                    @error('payment_mode')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="reference_number" class="form-label">Reference/Transaction Number</label>
                                    <input type="text" 
                                           class="form-control @error('reference_number') is-invalid @enderror" 
                                           id="reference_number" 
                                           name="reference_number" 
                                           value="{{ old('reference_number') }}" 
                                           placeholder="Cheque no., Transaction ID, etc.">
                                    @error('reference_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="payment_date" class="form-label">Payment Date <span class="text-danger">*</span></label>
                                    <input type="date" 
                                           class="form-control @error('payment_date') is-invalid @enderror" 
                                           id="payment_date" 
                                           name="payment_date" 
                                           value="{{ old('payment_date', date('Y-m-d')) }}" 
                                           max="{{ date('Y-m-d') }}"
                                           required>
                                    @error('payment_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <label for="remarks" class="form-label">Remarks</label>
                                    <textarea class="form-control @error('remarks') is-invalid @enderror" 
                                              id="remarks" 
                                              name="remarks" 
                                              rows="3" 
                                              placeholder="Add any additional notes about this payment...">{{ old('remarks') }}</textarea>
                                    @error('remarks')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.manual-payments.index') }}" class="btn btn-secondary">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="uil uil-save me-2"></i>Record Payment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Info Sidebar -->
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        <i class="uil uil-info-circle me-2"></i>Guidelines
                    </h5>
                    
                    <div class="alert alert-warning">
                        <strong>Important:</strong>
                        <ul class="mb-0 mt-2 ps-3">
                            <li>Payment records require verification by another admin</li>
                            <li>You cannot verify your own payment entries</li>
                            <li>Once verified, records cannot be edited or deleted</li>
                        </ul>
                    </div>

                    <h6 class="mt-4 mb-2">Payment Types:</h6>
                    <ul class="small">
                        <li><strong>Cash:</strong> Physical cash payment</li>
                        <li><strong>Cheque:</strong> Bank cheque payment</li>
                        <li><strong>DD:</strong> Demand Draft</li>
                        <li><strong>NEFT/RTGS:</strong> Bank transfer</li>
                        <li><strong>UPI:</strong> Digital payment via UPI</li>
                        <li><strong>Other:</strong> Any other payment mode</li>
                    </ul>

                    <h6 class="mt-3 mb-2">Required Information:</h6>
                    <ul class="small">
                        <li>Valid user UID</li>
                        <li>Payment type and amount</li>
                        <li>Payment date (not future date)</li>
                        <li>Reference number (recommended)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchBtn = document.getElementById('searchBtn');
    const uidInput = document.getElementById('reg_uid');
    const userDetails = document.getElementById('userDetails');

    searchBtn.addEventListener('click', function() {
        const uid = uidInput.value.trim();
        if (!uid) {
            alert('Please enter a UID');
            return;
        }

        // Show loading state
        searchBtn.disabled = true;
        searchBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Searching...';

        fetch(`{{ route('admin.manual-payments.search-user') }}?uid=${uid}`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.user) {
                    // Populate user details
                    document.getElementById('userName').textContent = data.user.name;
                    document.getElementById('userEmail').textContent = data.user.email;
                    document.getElementById('userPhone').textContent = data.user.phone || 'N/A';
                    
                    const paidBadge = data.user.paid 
                        ? '<span class="badge bg-success">Paid</span>'
                        : '<span class="badge bg-warning text-dark">Unpaid</span>';
                    document.getElementById('userPaidStatus').innerHTML = paidBadge;
                    
                    userDetails.classList.remove('d-none');
                } else {
                    alert('User not found with UID: ' + uid);
                    userDetails.classList.add('d-none');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error searching for user. Please try again.');
            })
            .finally(() => {
                searchBtn.disabled = false;
                searchBtn.innerHTML = '<i class="uil uil-search me-1"></i>Search';
            });
    });

    // Allow Enter key to trigger search
    uidInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchBtn.click();
        }
    });
});
</script>
@endpush
@endsection