@extends('layouts.applicant.applicant')

@section('title', 'Fee Payment Details')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.index') }}">My Applications</a></li>
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.show', $application) }}">{{ $application->application_number }}</a></li>
    <li class="breadcrumb-item active">Fee Payment</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Fee Payment Details</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.show', $application) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Application
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Fee Payment Form -->
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-credit-card me-2"></i>
                        @if($isExempted)
                            Fee Exemption Details
                        @else
                            Payment Information
                        @endif
                    </h6>
                </div>
                <div class="card-body">
                    <!-- Fee Exemption Checkbox -->
                    <div class="mb-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="fee_exempted" name="fee_exempted" value="1" 
                                   {{ ($isExempted || old('fee_exempted')) ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold" for="fee_exempted">
                                <i class="fas fa-gift me-1 text-success"></i>
                                Fee is Exempted For Me
                            </label>
                        </div>
                        <div class="form-text">
                            <i class="fas fa-info-circle me-1"></i>
                            Check this box if you are eligible for fee exemption (SC/ST/PwD/Women categories or other valid reasons).
                        </div>
                    </div>

                    <div id="exemption-form" style="{{ ($isExempted || old('fee_exempted')) ? 'display: block;' : 'display: none;' }}">
                        <!-- Fee Exemption Form -->
                        <div class="alert alert-success">
                            <i class="fas fa-gift me-2"></i>
                            <strong>Fee Exemption Claimed!</strong> Please provide the reason for your fee exemption below.
                        </div>

                        <form action="{{ route('applicant.fee-payment.store', $application) }}" method="POST" id="exemption-payment-form">
                            @csrf
                            <input type="hidden" name="is_exempted" value="1">
                            
                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <label for="exemption_reason" class="form-label">
                                        <i class="fas fa-comment me-1"></i>Exemption Reason <span class="text-danger">*</span>
                                    </label>
                                    <textarea name="exemption_reason" id="exemption_reason" 
                                              class="form-control @error('exemption_reason') is-invalid @enderror" 
                                              rows="4" required 
                                              placeholder="Please provide the reason for fee exemption (e.g., SC/ST/PwD/Women category as per government guidelines)">{{ old('exemption_reason', 'I belong to ' . $application->personalInformation->category . ' category and am eligible for fee exemption as per government guidelines.') }}</textarea>
                                    @error('exemption_reason')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Explain why you are claiming fee exemption based on your category.
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <a href="{{ route('applicant.applications.show', $application) }}" class="btn btn-secondary me-2">
                                    <i class="fas fa-times me-1"></i>Cancel
                                </a>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-gift me-1"></i>Claim Fee Exemption
                                </button>
                            </div>
                        </form>
                    </div>

                    <div id="payment-form" style="{{ ($isExempted || old('fee_exempted')) ? 'display: none;' : 'display: block;' }}">
                        <!-- Regular Payment Form -->
                        <form action="{{ route('applicant.fee-payment.store', $application) }}" method="POST" enctype="multipart/form-data" id="regular-payment-form">
                            @csrf
                            
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="amount" class="form-label">
                                        <i class="fas fa-rupee-sign me-1"></i>Fee Amount <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">₹</span>
                                        <input type="number" name="amount" id="amount" 
                                               class="form-control @error('amount') is-invalid @enderror" 
                                               value="{{ old('amount', $feeAmount) }}" 
                                               min="0" step="0.01" required readonly>
                                    </div>
                                    @error('amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Fee amount is automatically calculated based on your category ({{ $application->personalInformation->category }}).
                                    </div>
                                </div>
                                
                                <div class="col-md-6 mb-4">
                                    <label for="payment_date" class="form-label">
                                        <i class="fas fa-calendar me-1"></i>Payment Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" name="payment_date" id="payment_date" 
                                           class="form-control @error('payment_date') is-invalid @enderror" 
                                           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 class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Date when you made the payment (cannot be future date).
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <label for="sbi_collect_reference_number" class="form-label">
                                        <i class="fas fa-receipt me-1"></i>SBI Collect Reference Number <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="sbi_collect_reference_number" id="sbi_collect_reference_number" 
                                           class="form-control @error('sbi_collect_reference_number') is-invalid @enderror" 
                                           value="{{ old('sbi_collect_reference_number') }}" 
                                           placeholder="Enter SBI Collect reference number" required>
                                    @error('sbi_collect_reference_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        This is the unique reference number provided by SBI Collect after successful payment.
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <label for="fee_receipt" class="form-label">
                                        <i class="fas fa-file-upload me-1"></i>Fee Receipt <span class="text-danger">*</span>
                                    </label>
                                    <input type="file" name="fee_receipt" id="fee_receipt" 
                                           class="form-control @error('fee_receipt') is-invalid @enderror" 
                                           accept=".pdf,.jpg,.jpeg,.png" required>
                                    @error('fee_receipt')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Upload your payment receipt (PDF, JPG, JPEG, PNG). Maximum file size: 5MB.
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <a href="{{ route('applicant.applications.show', $application) }}" class="btn btn-secondary me-2">
                                    <i class="fas fa-times me-1"></i>Cancel
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>Submit Payment Details
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Information Panel -->
        <div class="col-lg-4">
            <!-- Application Info -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">
                        <i class="fas fa-info-circle me-2"></i>Application Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label text-muted">Application Number</label>
                        <div class="fw-bold">{{ $application->application_number }}</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted">Position</label>
                        <div class="fw-bold">{{ $application->advertisement->title }}</div>
                        <small class="text-muted">{{ $application->advertisement->position }}</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted">Department</label>
                        <div class="fw-bold">
                            {{ $application->advertisement->department ? $application->advertisement->department->name : 'N/A' }}
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted">Applicant Category</label>
                        <div>
                            <span class="badge badge-{{ $application->personalInformation->category == 'General' ? 'primary' : 'secondary' }}">
                                {{ $application->personalInformation->category }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted">Application Status</label>
                        <div>
                            <span class="badge badge-{{ $application->status_color }}">
                                {{ ucfirst($application->status) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fee Information -->
            <div class="card shadow mt-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-success">
                        <i class="fas fa-money-bill-wave me-2"></i>Fee Information
                    </h6>
                </div>
                <div class="card-body">
                    @if($isExempted)
                        <div class="text-center">
                            <i class="fas fa-gift fa-3x text-success mb-3"></i>
                            <h5 class="text-success">Fee Exempted</h5>
                            <p class="text-muted">
                                You are eligible for fee exemption based on your category 
                                (<strong>{{ $application->personalInformation->category }}</strong>).
                            </p>
                        </div>
                    @else
                        <div class="text-center">
                            <div class="display-6 fw-bold text-primary mb-2">₹{{ number_format($feeAmount, 2) }}</div>
                            <p class="text-muted mb-3">Application Fee</p>
                            
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>Payment Method:</strong> SBI Collect<br>
                                <strong>Category:</strong> {{ $application->personalInformation->category }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Payment Instructions -->
            @if(!$isExempted)
            <div class="card shadow mt-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>Payment Instructions
                    </h6>
                </div>
                <div class="card-body">
                    <ol class="mb-0">
                        <li class="mb-2">Visit SBI Collect website or use SBI banking services</li>
                        <li class="mb-2">Make payment of ₹{{ number_format($feeAmount, 2) }}</li>
                        <li class="mb-2">Note down the reference number provided</li>
                        <li class="mb-2">Enter the reference number in the form</li>
                        <li>Submit the form for verification</li>
                    </ol>
                    
                    <div class="alert alert-warning mt-3 mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Important:</strong> Keep the payment receipt safe for future reference.
                    </div>
                </div>
            </div>
            @endif

            <!-- Exempted Categories Info -->
            @if($isExempted)
            <div class="card shadow mt-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-success">
                        <i class="fas fa-users me-2"></i>Exempted Categories
                    </h6>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">The following categories are exempted from application fees:</p>
                    <ul class="list-unstyled">
                        <li class="mb-1"><i class="fas fa-check text-success me-2"></i>SC (Scheduled Caste)</li>
                        <li class="mb-1"><i class="fas fa-check text-success me-2"></i>ST (Scheduled Tribe)</li>
                        <li class="mb-1"><i class="fas fa-check text-success me-2"></i>PwD (Persons with Disabilities)</li>
                        <li class="mb-1"><i class="fas fa-check text-success me-2"></i>Women</li>
                    </ul>
                    
                    <div class="alert alert-success mt-3 mb-0">
                        <i class="fas fa-gift me-2"></i>
                        <strong>Your category ({{ $application->personalInformation->category }}) is exempted!</strong>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<style>
.form-label {
    font-weight: 600;
    color: #5a5c69;
}

.form-control:focus, .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.display-6 {
    font-size: 2.5rem;
}
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle fee exemption checkbox toggle
    const feeExemptedCheckbox = document.getElementById('fee_exempted');
    const exemptionForm = document.getElementById('exemption-form');
    const paymentForm = document.getElementById('payment-form');
    
    if (feeExemptedCheckbox && exemptionForm && paymentForm) {
        feeExemptedCheckbox.addEventListener('change', function() {
            if (this.checked) {
                exemptionForm.style.display = 'block';
                paymentForm.style.display = 'none';
            } else {
                exemptionForm.style.display = 'none';
                paymentForm.style.display = 'block';
            }
        });
    }
    
    // Auto-format SBI Collect reference number
    const referenceInput = document.getElementById('sbi_collect_reference_number');
    if (referenceInput) {
        referenceInput.addEventListener('input', function() {
            // Remove any non-alphanumeric characters and convert to uppercase
            this.value = this.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
        });
    }
    
    // Validate payment date
    const paymentDateInput = document.getElementById('payment_date');
    if (paymentDateInput) {
        paymentDateInput.addEventListener('change', function() {
            const selectedDate = new Date(this.value);
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            
            if (selectedDate > today) {
                alert('Payment date cannot be in the future.');
                this.value = '';
            }
        });
    }
});
</script>
@endpush