@extends('layouts.app3')

@section('title', 'Home')

@section('content')

<!-- Subheader with Logo and Title -->
<div class="subheader" style="padding: 20px 0; border-bottom: 2px solid #223584;">
    <div class="container">
        <h2 style="margin: 0; font-weight: bold; padding-top: 20px;">Ph.D. Programme</h2>
        <div style="clear: both;"></div>
    </div>
</div>

<!-- Bootstrap Navigation Menu -->
<style>
/* Hide menu on mobile devices */
@media (max-width: 767px) {
    .navbar {
        display: none !important;
    }
}
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link" href="#visionmission">VISION & MISSION</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#intake">PROGRAMME OFFERED</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#admission">ADMISSION PROCEDURE</a>
                </li>
                
            </ul>
        </div>
    </div>
</nav>

<!-- About Section -->
<section id="about" class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-4 mb-4 mb-lg-0">
                <img src="https://ru.devalupadhyay.com/document/home/02.jpg" alt="About Engineering" class="img-fluid rounded shadow-lg">
            </div>
            <div class="col-lg-8">
                <div class="ps-lg-4">
                    <h2 class="display-5 fw-bold mb-4" style="color: #223584; border-left: 5px solid orange; padding-left: 20px;">
                        About Ph.D. Programme
                    </h2>
                    <p class="lead mb-3" style="color: #555; line-height: 1.8;">
                        Rai University offers doctoral degree- The most advanced and prestigious degree that any University would like to confer. All the norms of UGC regulations are followed in the entire duration of Ph.D. programme. Pass out Ph.D. scholars from Rai University are already working in government and reputed private organizations at senior level. Rai University regularly organizes conferences, seminars and workshops as an academic exposure to enhance and nurture the hands on skills that gives beneficial results to students and staff. Thesis of Rai University's scholars is continuously recognized, appreciated & published by Association of Indian Universities (AIU).
                    </p>
                    <div class="mt-4">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-primary text-white rounded-circle p-3 me-3" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div>
                                <h5 class="mb-0" style="color: #223584;">Quality Education</h5>
                                <p class="mb-0 text-muted">Industry-aligned curriculum</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="bg-warning text-white rounded-circle p-3 me-3" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-lightbulb"></i>
                            </div>
                            <div>
                                <h5 class="mb-0" style="color: #223584;">Innovation Hub</h5>
                                <p class="mb-0 text-muted">Research & Development Focus</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Vision and Mission Section -->
<section id="visionmission" class="py-5" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="display-4 fw-bold" style="color: #223584;">Vision & Mission</h2>
            <div class="mx-auto" style="width: 100px; height: 4px; background: linear-gradient(to right, orange, #223584);"></div>
        </div>
        
        <div class="row g-4">
            <!-- Vision Card -->
            <div class="col-md-6">
                <div class="card h-100 shadow-lg border-0" style="border-top: 5px solid orange; transition: transform 0.3s;">
                    <div class="card-body p-5">
                        <div class="text-center mb-4">
                            <div class="bg-warning bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                <i class="fas fa-eye fa-2x text-white"></i>
                            </div>
                        </div>
                        <h3 class="card-title text-center mb-4 fw-bold" style="color: #223584;">Our Vision</h3>
                        <p class="card-text text-center" style="color: #555; font-size: 1.1rem; line-height: 1.8;">
                            To provide research friendly environment and foster research oriented programmes for sustainable growth and development of academics.
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Mission Card -->
            <div class="col-md-6">
                <div class="card h-100 shadow-lg border-0" style="border-top: 5px solid #223584; transition: transform 0.3s;">
                    <div class="card-body p-5">
                        <div class="text-center mb-4">
                            <div class="rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px; background: linear-gradient(135deg, #223584, #2980B9);">
                                <i class="fas fa-bullseye fa-2x text-white"></i>
                            </div>
                        </div>
                        <h3 class="card-title text-center mb-4 fw-bold" style="color: #223584;">Our Mission</h3>
                        <ul class="list-unstyled" style="color: #555; font-size: 1.05rem;">
                            <li class="mb-3"><i class="fas fa-check-circle text-warning me-2"></i> <strong>M1</strong> – To promote research as a significant activity involving students, staff and academic fraternity.</li>
                            <li class="mb-3"><i class="fas fa-check-circle text-warning me-2"></i> <strong>M2</strong> – To encourage frontiers of research, by organizing Conferences, Seminars, workshops etc.</li>
                            <li class="mb-3"><i class="fas fa-check-circle text-warning me-2"></i> <strong>M3</strong> – To provide academic leadership in the area of research and forge strategic partnership with academic and industry to advance research accomplishments.</li>
                            <li class="mb-3"><i class="fas fa-check-circle text-warning me-2"></i> <strong>M4</strong> – To provide a research oriented platform to research scholars for pursuing novel and innovative research study for achieving doctoral degree.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>




<!-- Programme Offered Section -->
<section id="intake" class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="display-4 fw-bold" style="color: #223584;">PROGRAMME OFFERED AND INTAKE</h2>
            <div class="mx-auto" style="width: 100px; height: 4px; background: linear-gradient(to right, orange, #223584);"></div>
        </div>
        
        <div class="row g-3" id="programContainer">
            <!-- Ph.D. Computer Science and Engineering -->
            <div class="col-md-4 col-sm-6 program-card">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header text-white" style="background-color: #223584;">
                        <h6 class="mb-0 fw-bold">Ph.D. (Doctor of Philosophy)</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>Programme:</strong> Computer Science and Engineering</p>
                        <p class="mb-0"><strong>Intake:</strong> As per quota under supervisor</p>
                    </div>
                </div>
            </div>
            
            <!-- Ph.D. Computer Science -->
            <div class="col-md-4 col-sm-6 program-card">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header text-white" style="background-color: #223584;">
                        <h6 class="mb-0 fw-bold">Ph.D (Doctor of Philosophy)</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>Programme:</strong> Computer Science</p>
                        <p class="mb-0"><strong>Intake:</strong> As per quota under supervisor</p>
                    </div>
                </div>
            </div>
            
            <!-- Ph.D. Management -->
            <div class="col-md-4 col-sm-6 program-card">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header text-white" style="background-color: #223584;">
                        <h6 class="mb-0 fw-bold">Ph.D (Doctor of Philosophy)</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>Programme:</strong> Management</p>
                        <p class="mb-0"><strong>Intake:</strong> As per quota under supervisor</p>
                    </div>
                </div>
            </div>
            
            <!-- Ph.D. Commerce -->
            <div class="col-md-4 col-sm-6 program-card">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header text-white" style="background-color: #223584;">
                        <h6 class="mb-0 fw-bold">Ph.D(Doctor of Philosophy)</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>Programme:</strong> Commerce</p>
                        <p class="mb-0"><strong>Intake:</strong> As per quota under supervisor</p>
                    </div>
                </div>
            </div>
            
            <!-- Ph.D. Chemistry -->
            <div class="col-md-4 col-sm-6 program-card">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header text-white" style="background-color: #223584;">
                        <h6 class="mb-0 fw-bold">Ph.D (Doctor of Philosophy)</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>Programme:</strong> Chemistry</p>
                        <p class="mb-0"><strong>Intake:</strong> As per quota under supervisor</p>
                    </div>
                </div>
            </div>
            
            <!-- Ph.D. Microbiology -->
            <div class="col-md-4 col-sm-6 program-card">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header text-white" style="background-color: #223584;">
                        <h6 class="mb-0 fw-bold">Ph.D (Doctor of Philosophy)</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>Programme:</strong> Microbiology</p>
                        <p class="mb-0"><strong>Intake:</strong> As per quota under supervisor</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="alert alert-info mt-4" role="alert">
            <strong>Note:</strong> All the norms of Ph.D programme are as per UGC regulations.
        </div>
    </div>
</section>

<!-- Admission Procedure Section -->
<section class="college-section py-5" id="admission" style="background-color: #f8f9fa;">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="display-4 fw-bold" style="color: #223584;">Admission Procedure</h2>
            <div class="mx-auto" style="width: 100px; height: 4px; background: linear-gradient(to right, orange, #223584);"></div>
        </div>
        
        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <p class="lead mb-4" style="color: #555;">Candidate who wish to join Ph.D from Rai University need to follow the process:</p>
                
                <ol class="admission-list">
                    <li class="mb-3">
                        <strong>Number of vacant seats</strong> in the respective area shall be informed in advance and displayed on University website and advertisement.
                    </li>
                    <li class="mb-3">
                        <strong>Eligible candidates</strong> seeking admission need to fill the Application form given in website and available at the University campus.
                    </li>
                    <li class="mb-3">
                        Completed application form has to be submitted with attested testimonials and application fees of <strong>Rs 1500/-</strong> (cash or DD in favor of <strong>"Rai University"</strong> payable at Ahmedabad, India). 
                        <div class="alert alert-light mt-2 mb-0">
                            <i class="fas fa-map-marker-alt me-2" style="color: #223584;"></i>
                            <strong>Address:</strong> Rai University, Village: Saroda, Taluka: Dholka, Dist.: Ahmedabad, Gujarat-382260
                        </div>
                    </li>
                    <li class="mb-3">
                        There shall be <strong>common entrance test</strong> for all the eligible candidates.
                    </li>
                    <li class="mb-3">
                        Candidates have to <strong>personally appear</strong> for Entrance test/interview/viva voce.
                    </li>
                    <li class="mb-3">
                        Candidates shall be informed for further process of admission after successfully clearance in entrance test and interview <strong>(on merit basis)</strong>.
                    </li>
                </ol>
            </div>
        </div>
    </div>
</section>

<style>
.btn-filter {
    background-color: #fff;
    color: #223584;
    border: 2px solid #223584;
    border-radius: 25px;
    padding: 8px 20px;
    margin: 5px;
    transition: all 0.3s ease;
}

.btn-filter:hover {
    background-color: #223584;
    color: #fff;
    transform: translateY(-2px);
}

.btn-filter.active {
    background-color: #ff9900;
    color: #fff;
    border-color: #ff9900;
}

.program-card {
    transition: all 0.3s ease;
    background-color: #fff;
}

.program-card.hidden {
    display: none;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.admission-list {
    counter-reset: item;
    list-style: none;
    padding-left: 0;
}

.admission-list > li {
    counter-increment: item;
    padding-left: 50px;
    position: relative;
    line-height: 1.8;
    color: #555;
}

.admission-list > li::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(135deg, #223584, #1565C0);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}
</style>

<script>
function filterPrograms(category) {
    // Get all program cards
    const cards = document.querySelectorAll('.program-card');
    const buttons = document.querySelectorAll('.btn-filter');
    
    // Remove active class from all buttons
    buttons.forEach(btn => btn.classList.remove('active'));
    
    // Add active class to clicked button
    event.target.classList.add('active');
    
    // Show/hide cards based on category
    cards.forEach(card => {
        if (category === 'all' || card.dataset.category === category) {
            card.classList.remove('hidden');
        } else {
            card.classList.add('hidden');
        }
    });
}
</script>

@endsection