{% extends 'base.html.twig' %}

{% block title %}College Detail - {{ collegeInfo.college.collegeName }}{% endblock %}

{% block customStyle %}
    <style>
        .detail-card {
            max-width: 900px;
            margin: 2rem auto;
            border-radius: 10px;
            overflow: hidden;
        }

        .detail-header {
            background-color: #007bff;
            color: #fff;
            padding: 1.2rem 2rem;
        }

        .detail-body {
            padding: 2rem;
        }

        .featured-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 3rem 0 1rem;
            text-align: center;
        }

        .featured-card {
            transition: transform 0.3s, box-shadow 0.3s;
            border-radius: 10px;
            overflow: hidden;
        }

        .featured-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        .featured-card .card-body {
            padding: 1.5rem;
        }

        .badge-stream {
            background-color: #e9ecef;
            color: #6c757d;
            font-size: 0.75rem;
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="container">
        <!-- College Detail Card -->
        <div class="card detail-card shadow">
            <div class="card-header detail-header">
                <h3 class="mb-0">{{ collegeInfo.college.collegeName }}</h3>
            </div>
            <div class="card-body detail-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><strong>College Code:</strong> {{ collegeInfo.college.collegeCode }}</li>
                    <li class="list-group-item"><strong>College Address:</strong> {{ collegeInfo.college.fullAddress }}</li>
                    <li class="list-group-item"><strong>Area:</strong> {{ collegeInfo.area.areaName|default('N/A') }}</li>
                    <li class="list-group-item"><strong>Region:</strong> {{ collegeInfo.region.regionName }}</li>
                    <li class="list-group-item"><strong>Stream:</strong>
                        <span class="badge badge-stream">{{ collegeInfo.stream.streamName|default('N/A') }}</span>
                    </li>
                    <li class="list-group-item"><strong>Medium:</strong> {{ collegeInfo.medium.mediumName|default('N/A') }}</li>
                    <li class="list-group-item"><strong>General Score:</strong> {{ collegeInfo.generalScore|default('N/A') }}</li>
                    <li class="list-group-item"><strong>Cut Off:</strong> {{ collegeInfo.cutOff|default('N/A') }}</li>
                </ul>
                <div class="mt-4 text-center">
                    <a href="{{ backUrl }}" class="btn btn-outline-secondary">← Back to Home</a>
                </div>
            </div>
        </div>

        <!-- Featured Colleges -->
        <h4 class="featured-title">Featured Colleges</h4>
        <div class="mb-4">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
                {% for college in relatedColleges %}
                    <div class="col">
                        <div class="card h-100 featured-card shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title">{{ college.college.collegeName }}</h5>
                                <p class="card-text mb-2">
                                    <small><strong>Region:</strong> {{ college.region.regionName }}</small><br>
                                    <small><strong>Area:</strong> {{ college.area.areaName|default('N/A') }}</small>
                                </p>
                                <a href="{{ path('college_detail', {'id': college.id}) }}" class="btn btn-primary btn-sm w-100">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="col-12 text-center">
                        <p class="text-muted">No related colleges found.</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}