@extends('layouts.app')

@section('title', 'Admissions - Thriving Lives Christian Counselling Center')

@section('content')
<header class="page-header text-center text-white d-flex align-items-center justify-content-center">
    <div class="container">
        <h1 class="display-4 fw-bold">Admissions</h1>
        <p class="lead">Begin your journey with us</p>
    </div>
</header>

<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <h3>Admission Process</h3>
                <p>Follow these steps to apply for our programs:</p>
                <ol>
                    <li>Review the admission requirements for your chosen program.</li>
                    <li>Download and complete the application form.</li>
                    <li>Gather all required documents.</li>
                    <li>Submit your application and documents by the deadline.</li>
                    <li>Attend an interview with the program director.</li>
                </ol>

                <h3 class="mt-5">Required Documents</h3>
                <ul>
                    @foreach($admissionInfo['documents'] as $document)
                    <li>{{ $document }}</li>
                    @endforeach
                </ul>
            </div>
            <div class="col-lg-4">
                <div class="card shadow-sm mb-4">
                    <div class="card-body">
                        <h4>Application Deadlines</h4>
                        @foreach($admissionInfo['important_dates'] as $semester => $date)
                        <p><strong>{{ $semester }}:</strong> {{ $date }}</p>
                        @endforeach
                    </div>
                </div>

                <div class="card shadow-sm">
                    <div class="card-body">
                        <h4 class="card-title">Tuition & Banking</h4>
                        <p>Detailed fee structures and banking information are available on our tuition page.</p>
                        <a href="{{ route('admissions.tuition') }}" class="btn btn-outline-primary w-100 mb-2">View Tuition Details</a>
                        <a href="{{ route('admissions.application') }}" class="btn btn-primary w-100">Apply Now</a>
                    </div>
                </div>
            </div>
        </div>

        <hr class="my-5">

        <div class="row">
            <div class="col">
                <h3 class="text-center mb-4">Payment & Banking Details</h3>
                <div class="row justify-content-center">
                    @foreach($admissionInfo['banking_details'] as $detail)
                    <div class="col-lg-5 mb-4">
                        <div class="card h-100 shadow-sm">
                            <div class="card-header">
                                <h5 class="mb-0">{{ $detail['header'] }}</h5>
                            </div>
                            <div class="card-body">
                                <p class="mb-1"><strong>Account Name:</strong> {{ $detail['acc_name'] }}</p>
                                <p class="mb-1"><strong>Bank:</strong> {{ $detail['bank_name'] }}</p>
                                <p class="mb-1"><strong>Account Number:</strong> {{ $detail['acc_num'] }}</p>
                                @if(isset($detail['branch_code']))
                                    <p class="mb-1"><strong>Branch Code:</strong> {{ $detail['branch_code'] }}</p>
                                @endif
                                @if(isset($detail['branch_name']))
                                    <p class="mb-1"><strong>Branch Name:</strong> {{ $detail['branch_name'] }}</p>
                                @endif
                                @if(isset($detail['swift_code']))
                                    <p class="mb-1"><strong>Swift Code:</strong> {{ $detail['swift_code'] }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .page-header {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/3184338/pexels-photo-3184338.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center;
        background-size: cover;
        min-height: 40vh;
    }
</style>
@endpush