@extends('layouts.app3')

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

@section('content')

<style>
    /* ---------- Payment page ---------- */
    .pay-page {
        --pay-text: #1f2937;
        --pay-navy: #1e1258;
        --pay-border: #e6e0f5;

        --btn-new: #0f385f; /* New Students button color */
        --grad-banner: #0f385f;
        --grad-purple: #0f385f;
        --grad-login:  linear-gradient(90deg, #f9a825 0%, #ff3d6e 100%);
        --grad-apply:  linear-gradient(90deg, #f9a825 0%, #ff3d6e 100%);
        --orange: #f97316;
    }

    /* ---------- Banner ---------- */
    .pay-banner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 32px;
        margin-bottom: 0;
        overflow: hidden;
        color: #fff;
        background: var(--grad-banner);
        border-radius: 18px 18px 0 0;
    }

    .pay-banner::after {
        content: "";
        position: absolute;
        top: -50px;
        right: -40px;
        width: 180px;
        height: 130px;
        background: linear-gradient(135deg, #ff5a7a, #f9a04a);
        border-radius: 50%;
        opacity: .85;
    }

    .pay-banner__left {
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
        z-index: 1;
    }

    .pay-banner__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 42px;
        color: #3b1f96;
        font-size: 22px;
        background: #fff;
        border-radius: 8px;
    }

    .pay-banner__title {
        margin: 0;
        color: #fff;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.1;
    }

    .pay-banner__title em {
        color: #f9a825;
        font-family: "Brush Script MT", "Segoe Script", cursive;
        font-weight: 700;
    }

    .pay-banner__line {
        display: inline-block;
        width: 26px;
        height: 3px;
        margin-left: 6px;
        vertical-align: middle;
        background: #ff5a7a;
        border-radius: 3px;
    }

    .pay-banner__tag {
        position: relative;
        z-index: 1;
        margin-right: 90px;
        color: #fff;
        font-family: "Brush Script MT", "Segoe Script", cursive;
        font-size: 18px;
        font-style: italic;
        white-space: nowrap;
    }

    .pay-banner__tag i {
        margin: 0 8px;
        color: #f9a825;
        font-size: 7px;
        vertical-align: middle;
    }

    /* ---------- Cards ---------- */
    .pay-grid {
        display: grid;
        grid-template-columns: 1fr 1.9fr 1.05fr;
        align-items: stretch;          /* all cards get the same height */
        gap: 18px;
        padding: 18px;
        background: #fff;
        border: 1px solid var(--pay-border);
        border-top: 0;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 10px 28px rgba(59, 31, 150, .10);
    }

    .pay-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;   /* content always starts at the top */
        gap: 14px;
        padding: 22px 20px;
        overflow: hidden;
        border: 1px solid var(--pay-border);
        border-radius: 16px;
    }

    .pay-card > * { position: relative; z-index: 1; }

    .pay-card--existing {
        justify-content: flex-start;   /* FIX: was "center" */
        background: linear-gradient(135deg, #fff5f3, #fdeef4);
    }

    .pay-card--existing::after {
        content: "";
        position: absolute;
        left: -40px;
        bottom: -50px;
        width: 150px;
        height: 110px;
        background: linear-gradient(135deg, #f9a825, #ff3d8b);
        border-radius: 50%;
        opacity: .85;
    }

    .pay-card--new {
        background: linear-gradient(135deg, #faf7ff, #f1ebff);
    }

    .pay-card--emi {
        background: linear-gradient(135deg, #fff6ef, #ffeaf0);
        border-color: #fcd9c8;
    }

    .pay-card__head {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pay-card__icon {
        display: flex;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: #fff;
        font-size: 20px;
        background: var(--grad-purple);
        border-radius: 12px;
    }

    .pay-card--existing .pay-card__icon {
        color: #3b1f96;
        background: none;
        font-size: 34px;
    }

    .pay-card--emi .pay-card__icon {
        background: linear-gradient(135deg, #f9a825, #f97316);
    }

    .pay-card__title {
        margin: 0;
        color: var(--pay-navy);
        font-size: 19px;
        font-weight: 700;
        line-height: 1.3;
    }

    .pay-card--new .pay-card__title::after {
        content: "";
        display: block;
        width: 34px;
        height: 3px;
        margin-top: 4px;
        background: #ff3d6e;
        border-radius: 3px;
    }

    .pay-card__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* ---------- Buttons ---------- */
    .pay-btn {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 52px;
        padding: 10px 20px;
        overflow: hidden;
        color: #fff !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        text-align: left;
        text-decoration: none;
        background: var(--grad-purple);
        border: 0;
        border-radius: 999px;
        box-shadow: 0 6px 14px rgba(59, 31, 150, .25);
        transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }

    .pay-btn::after {
        content: "";
        position: absolute;
        top: -40%;
        right: -10%;
        width: 45%;
        height: 180%;
        background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, transparent 70%);
        pointer-events: none;
    }

    .pay-btn__icon {
        flex: 0 0 28px;
        font-size: 20px;
        text-align: center;
    }

    .pay-btn__text { flex: 1; }

    .pay-btn__arrow {
        margin-left: auto;
        font-size: 14px;
    }

    .pay-btn:hover,
    .pay-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(59, 31, 150, .35);
        filter: brightness(1.08);
    }

    .pay-btn:focus-visible {
        outline: 3px solid rgba(147, 96, 162, .45);
        outline-offset: 2px;
    }

    .pay-btn--login {
        min-height: 56px;
        font-size: 17px;
        background: var(--grad-login);
    }

    .pay-btn--outline {
        color: var(--pay-text) !important;
        background: #fff;
        border: 1.5px solid #fdba9b;
        box-shadow: none;
    }

    .pay-btn--outline::after { display: none; }
    .pay-btn--outline .pay-btn__icon { color: #3b1f96; }
    .pay-btn--outline .pay-btn__arrow { color: var(--orange); }
    .pay-btn--outline:hover { box-shadow: 0 6px 14px rgba(249, 115, 22, .2); }

    .pay-btn--apply {
        min-height: 56px;
        font-size: 15px;
        background: var(--grad-apply);
        box-shadow: 0 6px 14px rgba(255, 61, 110, .3);
    }

    .pay-btn--apply:hover { box-shadow: 0 10px 20px rgba(255, 61, 110, .4); }

    /* ---------- New Students buttons (#0f385f) ---------- */
    .pay-card--new .pay-card__icon {
        background: var(--btn-new);
    }

    .pay-card--new .pay-btn {
        background: var(--btn-new);
        box-shadow: 0 6px 14px rgba(15, 56, 95, .25);
    }

    /* remove the white glow overlay -> plain blue */
    .pay-card--new .pay-btn::after {
        display: none;
    }

    .pay-card--new .pay-btn:hover,
    .pay-card--new .pay-btn:focus-visible {
        background: var(--btn-new);
        box-shadow: 0 10px 20px rgba(15, 56, 95, .35);
        filter: brightness(1.15);
    }

    .pay-card--new .pay-btn:focus-visible {
        outline: 3px solid rgba(15, 56, 95, .4);
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1199px) {
        .pay-grid { grid-template-columns: 1fr 1fr; }
        .pay-card--new { grid-column: 1 / -1; order: 3; }
    }

    @media (max-width: 767px) {
        .pay-banner { padding: 16px 18px; }
        .pay-banner__title { font-size: 24px; }
        .pay-banner__tag { display: none; }
        .pay-grid { grid-template-columns: 1fr; }
        .pay-card--new { order: 0; }
        .pay-card__list { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
        .pay-btn { transition: none; }
    }
</style>

<!-- ==============================
     Breadcrumb
============================== -->
<div class="breadcumb-wrapper" data-bg-src="assets/img/bg/breadcumb-bg.jpg" data-overlay="title" data-opacity="8">
    <div class="breadcumb-shape" data-bg-src="assets/img/bg/breadcumb_shape_1_1.png"></div>
    <div class="shape-mockup breadcumb-shape2 jump d-lg-block d-none" data-right="30px" data-bottom="30px">
        <img src="assets/img/bg/breadcumb_shape_1_2.png" alt="shape">
    </div>
    <div class="shape-mockup breadcumb-shape3 jump-reverse d-lg-block d-none" data-left="50px" data-bottom="80px">
        <img src="assets/img/bg/breadcumb_shape_1_3.png" alt="shape">
    </div>
    <div class="container">
        <div class="breadcumb-content text-center">
            <h1 class="breadcumb-title">Online Payment</h1>
            <ul class="breadcumb-menu"></ul>
        </div>
    </div>
</div>

<!-- ==============================
     Payment Area
============================== -->
<div class="pay-page overflow-hidden space">
    <div class="container">

        <!-- Banner -->
        <div class="pay-banner">
            <div class="pay-banner__left">
                <span class="pay-banner__icon"><i class="fa-solid fa-credit-card"></i></span>
                <h2 class="pay-banner__title">Pay Fee Online<span class=""></span></h2>
            </div>

        </div>

        <!-- Payment options -->
        <div class="pay-grid">

            <!-- Existing students -->
            <section class="pay-card pay-card--existing">
                <div class="pay-card__head">
                    <span class="pay-card__icon"><i class="fa-solid fa-user-group"></i></span>
                   <!-- <h3 class="pay-card__title">For Existing Students</h3>-->
                    <h3 class="pay-card__title">For ERP Students</h3>
                </div>
                <a href="https://rai.gnums.in/Login.aspx" target="_blank" rel="noopener" class="pay-btn pay-btn--login">
                    <span class="pay-btn__icon"><i class="fa-solid fa-right-to-bracket"></i></span>
                    <span class="pay-btn__text">Login</span>
                    <i class="fa-solid fa-chevron-right pay-btn__arrow"></i>
                </a>
            </section>

            <!-- New students -->
            <section class="pay-card pay-card--new">
                <div class="pay-card__head">
                    <span class="pay-card__icon"><i class="fa-solid fa-graduation-cap"></i></span>
                    <!--<h3 class="pay-card__title">For New Students</h3>-->
                    <h3 class="pay-card__title">For Non-ERP Students</h3>
                </div>
                <div class="pay-card__list">
                    <a href="https://rzp.io/rzp/dM7ES3wb" target="_blank" rel="noopener" class="pay-btn">
                        <span class="pay-btn__icon"><i class="fa-solid fa-book-open"></i></span>
                        <span class="pay-btn__text">Rai School of Management Studies</span>
                    </a>
                    <a href="https://rzp.io/rzp/q1sxvwn" target="_blank" rel="noopener" class="pay-btn">
                        <span class="pay-btn__icon"><i class="fa-solid fa-gear"></i></span>
                        <span class="pay-btn__text">Rai School of Engineering</span>
                    </a>
                    <a href="https://rzp.io/rzp/n3rpytIZ" target="_blank" rel="noopener" class="pay-btn">
                        <span class="pay-btn__icon"><i class="fa-solid fa-capsules"></i></span>
                        <span class="pay-btn__text">School of Pharmacy</span>
                    </a>
                    <a href="https://rzp.io/rzp/JI3ihWFA" target="_blank" rel="noopener" class="pay-btn">
                        <span class="pay-btn__icon"><i class="fa-solid fa-scale-balanced"></i></span>
                        <span class="pay-btn__text">School of Law</span>
                    </a>
                    <a href="https://rzp.io/rzp/TFJWT5sK" target="_blank" rel="noopener" class="pay-btn">
                        <span class="pay-btn__icon"><i class="fa-solid fa-seedling"></i></span>
                        <span class="pay-btn__text">Rai School of Agriculture</span>
                    </a>
                    <a href="https://rzp.io/rzp/KaQL7Et" target="_blank" rel="noopener" class="pay-btn">
                        <span class="pay-btn__icon"><i class="fa-solid fa-palette"></i></span>
                        <span class="pay-btn__text">Rai School of Design</span>
                    </a>
                    <a href="https://rzp.io/rzp/0qVVZLvR" target="_blank" rel="noopener" class="pay-btn">
                        <span class="pay-btn__icon"><i class="fa-solid fa-atom"></i></span>
                        <span class="pay-btn__text">Rai School of Sciences</span>
                    </a>
                    <a href="https://rzp.io/rzp/X1IYUAGE" target="_blank" rel="noopener" class="pay-btn">
                        <span class="pay-btn__icon"><i class="fa-solid fa-lightbulb"></i></span>
                        <span class="pay-btn__text">Rai School of Liberal Studies</span>
                    </a>
                </div>
            </section>

            <!-- No-cost EMI -->
            <section class="pay-card pay-card--emi">
                <div class="pay-card__head">
                    <span class="pay-card__icon"><i class="fa-solid fa-indian-rupee-sign"></i></span>
                    <h3 class="pay-card__title">For No-Cost EMI Option</h3>
                </div>
                <a href="https://test.raiuniversity.edu/education-loan-assistance" target="_blank" rel="noopener" class="pay-btn pay-btn--outline">
                    <span class="pay-btn__icon"><i class="fa-solid fa-hand-holding-dollar"></i></span>
                    <span class="pay-btn__text">No-Cost EMI Assistance</span>
                    <i class="fa-solid fa-chevron-right pay-btn__arrow"></i>
                </a>
                <a href="https://customer.grayquest.com" target="_blank" rel="noopener" class="pay-btn pay-btn--apply">
                    <span class="pay-btn__icon"><i class="fa-solid fa-bolt"></i></span>
                    <span class="pay-btn__text">No-Cost EMI Apply Now</span>
                </a>
            </section>

        </div>

    </div>
</div>

@endsection