@extends('layouts.applicant.applicant')

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

@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</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.step', [$application, 'education-qualification']) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Previous Step
            </a>
        </div>
    </div>

    <!-- Dynamic Progress Indicator -->
    @include('applicant.applications.partials.progress-indicator')

    <!-- Fee Payment Section -->
    <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>Fee Payment
            </h6>
        </div>
        <div class="card-body">
            @if($application->feePayment || $application->isFeeExempted())
                @if($application->isFeeExempted())
                    <!-- Fee Exempted -->
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        You are exempted from paying the application fee based on your category.
                        @if(!$application->isEditable())
                            <br><small class="text-muted"><i class="fas fa-lock me-1"></i>Application is finalized and cannot be edited.</small>
                        @endif
                    </div>
                    
                    <div class="card border-info mb-4">
                        <div class="card-header bg-info text-white">
                            <h6 class="mb-0">
                                <i class="fas fa-gift me-2"></i>Fee Exemption Details
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="fw-bold" style="width: 40%;">Category:</td>
                                            <td><span class="badge badge-info">{{ $application->personalInformation->category ?? 'N/A' }}</span></td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Fee Status:</td>
                                            <td><span class="badge badge-success">Exempted</span></td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Amount:</td>
                                            <td><span class="text-success fw-bold">₹0 (No fee required)</span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <!-- Fee Payment Completed -->
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>
                        Fee payment has been completed successfully.
                        @if(!$application->isEditable())
                            <br><small class="text-muted"><i class="fas fa-lock me-1"></i>Application is finalized and cannot be edited.</small>
                        @endif
                    </div>
                    
                    <div class="card border-success mb-4">
                        <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="fas fa-receipt me-2"></i>Payment Details
                            </h6>
                            @if($application->isEditable())
                                <a href="{{ route('applicant.fee-payment.edit', $application) }}" class="btn btn-sm btn-light">
                                    <i class="fas fa-edit me-1"></i>Edit
                                </a>
                            @endif
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="fw-bold" style="width: 40%;">Amount Paid:</td>
                                            <td class="text-success fw-bold">₹{{ number_format($application->feePayment->amount, 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Payment Mode:</td>
                                            <td>{{ $application->feePayment->payment_mode }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Transaction ID:</td>
                                            <td>{{ $application->feePayment->transaction_id }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Payment Date:</td>
                                            <td>{{ $application->feePayment->payment_date->format('F d, Y') }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-borderless table-sm">
                                        <tr>
                                            <td class="fw-bold" style="width: 40%;">Bank Name:</td>
                                            <td>{{ $application->feePayment->bank_name ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Branch:</td>
                                            <td>{{ $application->feePayment->branch_name ?? 'N/A' }}</td>
                                        </tr>
                                        <tr>
                                            <td class="fw-bold">Status:</td>
                                            <td>
                                                @if($application->feePayment->is_verified)
                                                    <span class="badge badge-success">Verified</span>
                                                @else
                                                    <span class="badge badge-warning">Pending Verification</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @if($application->feePayment->receipt_path)
                                        <tr>
                                            <td class="fw-bold">Receipt:</td>
                                            <td>
                                                <a href="{{ route('applicant.fee-payment.download-receipt', $application) }}" 
                                                   class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-download me-1"></i>Download
                                                </a>
                                            </td>
                                        </tr>
                                        @endif
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                
                <div class="d-flex justify-content-between">
                    @if($application->isEditable() && !$application->isFeeExempted())
                        <a href="{{ route('applicant.fee-payment.edit', $application) }}" class="btn btn-outline-primary">
                            <i class="fas fa-edit me-1"></i>Edit Payment Details
                        </a>
                    @else
                        <span class="text-muted">
                            @if($application->isFeeExempted())
                                <i class="fas fa-gift me-1"></i>Fee exempted - no payment required
                            @else
                                <i class="fas fa-lock me-1"></i>Application finalized - editing disabled
                            @endif
                        </span>
                    @endif
                    
                    @php
                        $nextStep = $currentStep->getNextStep();
                    @endphp
                    @if($nextStep)
                        <a href="{{ route('applicant.applications.step', [$application, $nextStep->slug]) }}" class="btn btn-primary">
                            <i class="fas fa-arrow-right me-2"></i>Next: {{ $nextStep->name }}
                        </a>
                    @else
                        <a href="{{ route('applicant.applications.index') }}" class="btn btn-success">
                            <i class="fas fa-check me-2"></i>Application Complete
                        </a>
                    @endif
                </div>
            @else
                <!-- Fee Payment Required -->
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Please complete your fee payment to continue with the application process.
                </div>
                
                <!-- Fee Information -->
                @php
                    $feeAmount = $application->getApplicableFeeAmount();
                @endphp
                
                <div class="card border-info mb-4">
                    <div class="card-header bg-light">
                        <h6 class="mb-0 text-primary">
                            <i class="fas fa-info-circle me-2"></i>Fee Information
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td class="fw-bold" style="width: 40%;">Category:</td>
                                        <td><span class="badge badge-secondary">{{ $application->personalInformation->category ?? 'General' }}</span></td>
                                    </tr>
                                    <tr>
                                        <td class="fw-bold">Application Fee:</td>
                                        <td class="text-primary fw-bold fs-5">₹{{ number_format($feeAmount, 2) }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center py-5">
                    <i class="fas fa-credit-card fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">Fee Payment Required</h5>
                    <p class="text-muted mb-4">
                        You need to complete the fee payment before proceeding to the next step.
                    </p>
                    @if($application->isEditable())
                        <a href="{{ route('applicant.fee-payment.index', $application) }}" class="btn btn-primary">
                            <i class="fas fa-credit-card me-2"></i>Pay Application Fee
                        </a>
                    @else
                        <span class="text-muted">
                            <i class="fas fa-lock me-1"></i>Application finalized - payment cannot be made
                        </span>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

<style>
.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e3e6f0;
    z-index: 1;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    background: white;
    padding: 0 15px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e3e6f0;
    color: #5a5c69;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
}

.step.active .step-number {
    background: #667eea;
    color: white;
}

.step.completed .step-number {
    background: #1cc88a;
    color: white;
}

.step-title {
    font-size: 0.875rem;
    color: #5a5c69;
    text-align: center;
    font-weight: 500;
}

.step.active .step-title {
    color: #667eea;
    font-weight: 600;
}

.step.completed .step-title {
    color: #1cc88a;
    font-weight: 600;
}

.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;
}

.table td {
    padding: 0.5rem;
    border: none;
    vertical-align: top;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}
</style>
@endsection