@extends('student-panel.layouts.app')

@section('main')

<div class="payment-box container-fluid">
    <p class="head">Unpaid Applications</p>

    <ul class="list-type">
        <li class="list-item"><img src="{{asset('student-panel')}}/images/green-tick.svg" alt="green-tick" width="100%" height="100%">‘One’
            application, ‘multiple’ courses & universities</li>
        <li class="list-item"><img src="{{asset('student-panel')}}/images/green-tick.svg" alt="green-tick" width="100%" height="100%">700+
            Global University Tie Ups</li>
        <li class="list-item"><img src="{{asset('student-panel')}}/images/green-tick.svg" alt="green-tick" width="100%" height="100%">High
            Values Scholarships & Study Loans</li>
        <li class="list-item"><img src="{{asset('student-panel')}}/images/green-tick.svg" alt="green-tick" width="100%"
                height="100%">Supporting you all the way</li>
    </ul>

    <!--Desktop-->
    <div class="d-payment-list">
        <table class="payment-table">
            <thead>
                <tr>
                    <th class="t-head">Program Name</th>
                    <th class="t-head">University</th>
                    <th class="t-head">Intake</th>
                    <th class="t-head">Application Fees</th>
                    <th class="t-head">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="t-col">
                        <p class="course-name">Pre-sessional English 9 weeks</p>
                    </td>
                    <td class="t-col">Middlesex University</td>
                    <td class="t-col">Jun - 2024</td>
                    <td class="t-col">Rs.1000</td>
                    <td class="t-col"><img src="{{asset('student-panel')}}/images/delete.svg" class="delete-payment" alt="delete" width="100%"
                            height="100%"></td>
                </tr>

                <tr>
                    <td class="t-col">
                        <p class="course-name">Pre-Master’s for Business, Hospitality</p>
                    </td>
                    <td class="t-col">(KAPLAN) University of Brighton</td>
                    <td class="t-col">Jun - 2024</td>
                    <td class="t-col">Rs.1000</td>
                    <td class="t-col"><img src="{{asset('student-panel')}}/images/delete.svg" class="delete-payment" alt="delete" width="100%"
                            height="100%"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--Mobile-->
    <div class="m-payment-list">
        <ul class="payment-detail">
            <li class="p-item"><span class="phead">Program Name:</span><span class="pvalue">Pre-sessional English 9
                    weeks</span></li>
            <li class="p-item"><span class="phead">University:</span><span class="pvalue">Middlesex
                    University</span></li>
            <li class="p-item"><span class="phead">Intake:</span><span class="pvalue">Jun-2024</span></li>
            <li class="p-item">
                <p class="last-row"><span class="phead">Application Fee:</span><span
                        class="pvalue fee-amt">Rs.1000</span></p>
                <img src="{{asset('student-panel')}}/images/delete.svg" class="delete-payment" alt="delete" width="100%" height="100%">
            </li>
        </ul>

        <ul class="payment-detail">
            <li class="p-item"><span class="phead">Program Name:</span><span class="pvalue">Pre-Master’s for
                    Business, Hospitality, Tourism and Social Science (3 Terms)</span></li>
            <li class="p-item"><span class="phead">University:</span><span class="pvalue">(KAPLAN) University of
                    Brighton</span></li>
            <li class="p-item"><span class="phead">Intake:</span><span class="pvalue">Jun-2024</span></li>
            <li class="p-item">
                <p class="last-row"><span class="phead">Application Fee:</span><span
                        class="pvalue fee-amt">Rs.1000</span></p>
                <img src="{{asset('student-panel')}}/images/delete.svg" class="delete-payment" alt="delete" width="100%" height="100%">
            </li>
        </ul>
    </div>

    <div class="fees">
        <p class="f-head">Total Fees: <span class="fee-amt">2000</span></p>

        <a href="javascript:;" class="pay-btn">Pay Now</a>
    </div>
</div>






<div class="delete-popup">
    <p class="head">Confirm the action</p>
    <div class="popup-body">
        <img src="{{asset('student-panel')}}/images/delete.svg" alt="delete" width="100%" height="100%">

        <p class="m-head">Are you sure you want to remove the selected course</p>

        <p class="btns"><a href="javascript:;" class="common-btn close-btn">Cancel</a><a href="javascript:;"
                class="common-btn">Ok</a></p>
    </div>
</div>

@endsection

@section('css')
    <link rel="stylesheet" href="{{asset('student-panel')}}/css/payment.css?v={{env('ASSETS_VERSION')}}">
    <link rel="stylesheet" href="{{asset('student-panel')}}/css/nice-select.css?v={{env('ASSETS_VERSION')}}">
@endsection

@section('script')
    <script src="{{asset('student-panel')}}/js/common.js?v={{env('ASSETS_VERSION')}}"></script>

    <script>

        //delete popup
        $(".delete-payment").click(function () {
            $(".delete-popup").show();
            $(".overlay").show();
            $("body").addClass("no-scroll");
        });

        $(".close-btn").click(function () {
            $(".delete-popup").hide();
            $(".overlay").hide();
            $("body").removeClass("no-scroll");
        });
    </script>
@endsection