@extends('layouts.khtcblank')

@section('seo_meta')
    <meta name="description" content="">
    <meta name="keywords" content="">
@endsection

@section('style')
    <style>
        :root {
            --primary-color: #2e3093;
            --secondary-color: #4c290c;
        }

        *
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        h1,h2,h3,h4,h5,h6
        {
            font-family: 'Montserrat', sans-serif;
        }
        ul, li, ol, span, a
        {
            font-family: 'Montserrat', sans-serif;
        }
        button
        {
            outline: 0;
            border: 0;
            background: none;
            cursor: pointer;
            font-family: 'Montserrat', sans-serif;
        }
        /* ------------------*/
        .registration-form-wrapper
        {
            overflow: hidden;
        }
        .brand-logo
        {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        .brand-logo img
        {
            height: auto;
            width: 8%;
        }
        .registration-image img:nth-child(1)
        {
            position: absolute;
            opacity: 0.05;
            top: 0;
            right: 0;
            left: 0;
            height: 30%;
        }
        .registration-image img:nth-child(2)
        {
            position: absolute;
            opacity: 0.05;
            top: 0;
            right: 0;
            height: 20%;
            animation-delay: 2s;
        }
        .registration-image img
        {
            animation: registration-animation 5s linear infinite;
        }
        @keyframes registration-animation
        {
            0%
            {
                transform: translateY(0px);
            }
            50%
            {
                transform: translateY(-15px);
            }
            100%
            {
                transform: translateY(0px);
            }
        }
        #symbol-id
        {
            color: #000 !important;
            font-size: 16px;
            font-weight: 500;
        }
        #symbol-id-input
        {
            height: auto;
            width: 200px;
            outline: none;
            border: none;
            border-bottom: 2px solid rgb(151, 144, 144);
            font-size: 14px;
            color: #000 !important;
            background: none;
            font-family: 'Montserrat', sans-serif;
        }
        .form-intro-wrapper h1
        {
            text-align: center;
            font-size: 42px;
            font-weight: 600;
            text-transform: uppercase;
            text-shadow: 1px 2px 2px #000000bf;
            color: var(--primary-color);
        }
        .form-intro-wrapper h2
        {
            text-align: center;
            font-size: 28px;
            font-weight: 500;
            text-transform: uppercase;
            text-shadow: 1px 2px 2px #000000bf;
            color: rgb(61, 58, 58);
        }
        .form-intro-wrapper h3
        {
            text-align: center;
            font-size: 24px;
            font-weight: 500;
            color: #000;
        }
        .form-intro-wrapper p
        {
            text-align: center;
            font-weight: 600;
            line-height: 9px;
            color: #000;
        }
        .registration-line
        {
            height: 3px;
            width: 100%;
            background: #d3d6d8;
            margin-top: 50px;
        }
        .application-container
        {
            margin-bottom: 10px;
        }
        .application
        {
            background: var(--primary-color);
            height: 40px;
            width: 480px;
            box-shadow: 0 0 5px 0 #000;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 25px;
            padding-top: 15px;
            margin: auto;
            margin-top: -23px;
        }
        .application p
        {
            text-align: center;
            font-weight: 750;
            line-height: 9px;
            font-size: 18px;
            color: #fff !important;
        }
        #my-container
        {
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 15px 1px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.08);
        }
        .form-container
        {
            position: relative;
            border-radius: 10px;
            padding: 20px 10px;
            border:2px solid var(--secondary-color);
        }
        .my-header
        {
            height: 40px;
            width: 230px;
            text-align: center;
            position: absolute;
            left: 30px;
            background: #fff !important;
            box-shadow: 0 4px 20px 1px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.08);
            margin-top: -42px;
            border-radius: 5px;
        }
        .my-header #heading
        {
            font-size: 20px;
            color: #000 !important;
            font-weight: 600;
            padding: 0px 10px;
            font-family: 'Montserrat', sans-serif;
            text-transform: capitalize;
            padding-top: 8px;
        }
        #form-alignment
        {
            margin-top: 30px;
        }
        #form-alignment-bottom
        {
            margin-bottom: 20px;
        }
        .form-padding
        {
            padding-left: 60px;
        }
        #my-form .custom-file
        {
            height: 30px;
            width: 275px;
            outline: none;
            border: 1px solid rgb(141, 137, 137);
            border-radius: 5px;
            padding: 0 10px;
            font-size: 14px;
            color: #000 !important;
            background: #f8f8f8;
            font-family: 'Montserrat', sans-serif;
        }
        #my-form .custom-file-label
        {
            padding: 7px 8px;
            top: -4px;
            height: 30px;
            width: 275px;
            border: none;
            border-radius: 5px;
            color: rgb(158, 153, 153);
            font-size: 14px;
            background: transparent;
            outline: none;
            font-family: 'Montserrat', sans-serif;
        }
        #my-form .custom-file-label::after
        {
            position: absolute;
            top: 2px;
            right: 0;
            bottom: 0;
            z-index: 3;
            display: block;
            padding: .375rem .75rem;
            line-height: 1.5;
            color: #495057;
            content: "Browse";
            background-color: #e9ecef;
            border-left: inherit;
            outline: none;
            border: transparent;
            border-radius: 0 .25rem .25rem 0;
        }
        .student-img
        {
            height: 120px;
            width: 120px;
            background: #f8f8f8;
            border: 2px solid #858080;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
        #stu-img-inline
        {
            display: inline-grid;
            justify-content: end;
        }
        .student-img p
        {
            font-size: 16px;
            font-weight: 400;
            color: #b1b3b4;
        }
        .upload-btn
        {
            text-align: center;
            margin-top: 5px;
        }
        .my-brand-logo img
        {
            height: auto;
            width: 20%;
        }
        #stu-image-container
        {
            margin-top: -130px;
        }
        .upload-btn button
        {
            background: transparent;
            font-size: 12px;
            font-weight: 600;
            color: var(--primary-color);
            outline: none;
            border-radius: 8px;
            transition: 0.6s;
        }
        .upload-btn button:hover
        {
            color: #000 !important;
        }
        #my-form  label
        {
            color: #000 !important;
            font-size: 16px;
            font-weight: 500;
            display: flex;
        }
        #my-form  input, #my-form  select
        {
            height: 30px;
            width: 100%;
            outline: none;
            border: 1px solid rgb(141, 137, 137);
            border-radius: 5px;
            padding: 0 10px;
            font-size: 14px;
            color: #000 !important;
            background: #f8f8f8;
            font-family: 'Montserrat', sans-serif;
        }
        #required
        {
            color: rgb(250, 33, 33);
        }
        #my-form input:focus
        {
            box-shadow: 0 0 3px 0 var(--primary-color);
            border: 1px solid var(--primary-color);
        }
        ::placeholder
        {
            color: rgb(158, 153, 153);
            font-size: 14px;
            font-family: 'Montserrat', sans-serif;
        }
        #academic-qualification
        {
            width: 325px;
        }
        #radio input
        {
            height: auto;
            width: 40px;
            outline: none;
            border-radius: 5px;
            padding: 0 10px;
            font-size: 14px;
            color: #000 !important;
            font-family: 'Montserrat', sans-serif;
        }
        #radio input:focus
        {
            box-shadow: none;
            border: none;
        }
        #d-inline-info
        {
            display: table-cell;
        }
        #d-inline-info p
        {
            font-weight: 600;
            color: rgb(119, 106, 106);
            font-family: 'Montserrat', sans-serif;
            word-spacing: 2.5px;
            font-size: 14px;
        }
        .my-span-num
        {
            font-size: 14px;
        }
        .submit-btn button
        {
            background: var(--primary-color);
            height: 38px;
            width: 150px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            border-radius: 8px;
        }
        .cancel-btn button
        {
            background: rgb(218, 15, 15);
            height: 38px;
            width: 150px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            border-radius: 8px;
        }
        .submit-btn, .cancel-btn
        {
            display: inline-flex;
            margin: 10px;
            transition: 0.5s;
            margin-bottom: 50px;
        }
        .submit-btn:hover, .cancel-btn:hover
        {
            transform: translateY(-5px);
        }

        .is-invalid {
            border: 1px solid red !important;
        }

        .field-validation-error {
            color: red;
            font-size: 0.70rem;
            display: inline-block;
            padding: 5px;
        }

        #my-form-cgpa-id,#my-form-id
        {
            display: inline-flex;
        }
        #my-form #my-form-id
        {
            width: 190px;
        }
        #my-form #my-form-cgpa-id
        {
            width: 80px;
        }
        .copy-right-section .copy .developed
        {
            width: 224px;
            margin: auto;
            background: #fff
        }
        .copy-right-section .copy .developed p
        {
            opacity: 0.7;
            text-align: center;
            font-size: 14px;
            margin-top: -14px;
        }
        .copy-right-section .copy .developed p a
        {
            text-decoration: none;
            color: var(--primary-color);
            transition: 0.4s;
        }
        .copy-right-section .copy .developed p a:hover
        {
            color: #000 !important;
        }
        .copy-right-section .copy .copy-line
        {
            height: 1px;
            width: 100%;
            background-color: #b1b3b4;
        }
        #mar
        {
            margin-top: 30px;
        }
        /* responsiveness */
        @media only screen and (max-width: 1600px)
        {
            .brand-logo img
            {
                display: none;
            }
        }
        @media only screen and (max-width: 1200px)
        {
            #stu-image-container
            {
                margin-top: -125px;
            }
            .form-padding
            {
                padding-left: 20px;
            }
            #my-form #my-form-id
            {
                width: 170px;
            }
        }
        @media only screen and (max-width: 995px)
        {
            #my-form #my-form-id
            {
                width: 170px;
            }
        }
        @media only screen and (max-width: 992px)
        {
            #student-photo-align
            {
                margin-top: 45px;
            }
            #brand-image-align
            {
                margin-top: 54px;
            }
            #brand-image-align img
            {
                width: 32%;
            }
            #my-form input, #my-form select
            {
                width: 200px;
            }
            #my-form .custom-file
            {
                width: 200px;
            }
            #my-form label
            {
                font-size: 12px;
            }
            #my-form .custom-file-label
            {
                width: 200px;
            }
            #my-form #my-form-id
            {
                width: 90px;
            }
            #mar
            {
                margin-top: 25px
            }
        }
        @media only screen and (max-width: 800px)
        {
            .form-intro-wrapper h1
            {
                font-size: 38px;
            }
        }
        @media only screen and (max-width: 770px)
        {
            #my-form input, #my-form select
            {
                width: 207px;
            }
            #my-form .custom-file
            {
                width: 207px;
            }
            #my-form .custom-file-label
            {
                width: 207px;
            }
            #Symbol-alignment
            {
                text-align: center;
            }
        }
        @media only screen and (max-width: 767px)
        {
            .brand-logo img
            {
                display: block;
                width: 12%;
            }
            .my-brand-logo img
            {
                display: none;
            }
            .form-intro-wrapper h1
            {
                font-size: 34px;
            }
            .form-intro-wrapper h2
            {
                font-size: 25px;
            }
            #brand-image-align img
            {
                display: none;
            }
            #stu-image-container
            {
                margin-top: -85px;
            }
            #my-form label
            {
                font-size: 14px
            }
            #stu-img-inline
            {
                justify-content: space-around;
            }
            #my-form input, #my-form select
            {
                width: 455px;
            }
            #my-form .custom-file
            {
                width: 455px;
            }
            #my-form .custom-file-label
            {
                width: 455px;
            }
            #my-form #my-form-id
            {
                width: 350px;
            }
            .application p
            {
                font-size: 14px;
            }
            #mar
            {
                margin-top: 10px;
            }
            .my-span-num
            {
                font-size: 12px;
            }
        }
        @media only screen and (max-width: 662px)
        {
            .form-intro-wrapper h1
            {
                font-size: 30px;
            }
            .form-intro-wrapper h2
            {
                font-size: 20px;
            }
            .submit-btn button
            {
                width: 108px;
                font-size: 12px;
            }
            .cancel-btn button
            {
                width: 108px;
                font-size: 12px;
            }
        }
        @media only screen and (max-width: 579px)
        {
            .form-intro-wrapper h1
            {
                font-size: 28px;
            }
            .form-intro-wrapper h2
            {
                font-size: 18px;
            }
            #my-form #my-form-id
            {
                width: 354px;
            }
        }
        @media only screen and (max-width: 553px)
        {
            #my-form #my-form-id
            {
                width: 340px;
            }
        }
        @media only screen and (max-width: 550px)
        {
            #my-form #my-form-id
            {
                width: 350px;
            }
        }
        @media only screen and (max-width: 548px)
        {
            #my-form #my-form-id
            {
                width: 340px;
            }
        }
        @media only screen and (max-width: 542px)
        {
            .form-intro-wrapper h1
            {
                font-size: 25px;
            }
            .form-intro-wrapper h2
            {
                font-size: 18px;
            }
            .form-padding
            {
                padding-left: 12px;
            }
        }
        @media only screen and (max-width: 534px)
        {
            #my-form #my-form-id
            {
                width: 338px;
            }
        }
        @media only screen and (max-width: 528px)
        {
            #my-form input, #my-form select
            {
                width: 430px;
            }
            #my-form .custom-file
            {
                width: 430px;
            }
            #my-form .custom-file-label
            {
                width: 430px;
            }
            #my-form #my-form-id
            {
                width: 322px;
            }
        }
        @media only screen and (max-width: 513px)
        {
            #my-form #my-form-id
            {
                width: 314px;
            }
        }
        @media only screen and (max-width: 505px)
        {
            #my-form input, #my-form select
            {
                width: 400px;
            }
            #my-form .custom-file
            {
                width: 400px;
            }
            #my-form .custom-file-label
            {
                width: 400px;
            }
            #my-form #my-form-id
            {
                width: 300px;
            }
        }
        @media only screen and (max-width: 491px)
        {
            #my-form #my-form-id
            {
                width: 294px;
            }
        }
        @media only screen and (max-width: 485px)
        {
            #my-form #my-form-id
            {
                width: 285px;
            }
        }
        @media only screen and (max-width: 476px)
        {
            #my-form input, #my-form select
            {
                width: 375px;
            }
            #my-form .custom-file
            {
                width: 375px;
            }
            #my-form .custom-file-label
            {
                width: 375px;
            }
            #my-form #my-form-id
            {
                width: 270px;
            }
        }
        @media only screen and (max-width: 461px)
        {
            #my-form #my-form-id
            {
                width: 264px;
            }
        }
        @media only screen and (max-width: 457px)
        {
            #my-form #my-form-id
            {
                width: 250px;
            }
        }
        @media only screen and (max-width: 450px)
        {
            .application
            {
                width: 350px;
            }
            .application p
            {
                font-size: 13px;
            }
            .my-header #heading
            {
                font-size: 16px;
                padding-top: 12px;
            }
            .my-header
            {
                left: 8px;
            }
        }
        @media only screen and (max-width: 446px)
        {
            #my-form input, #my-form select
            {
                width: 350px;
            }
            #my-form .custom-file
            {
                width: 350px;
            }
            #my-form .custom-file-label
            {
                width: 350px;
            }
            #my-form #my-form-id
            {
                width: 240px;
            }
        }
        @media only screen and (max-width: 430px)
        {
            #my-form #my-form-id
            {
                width: 230px;
            }
        }
        @media only screen and (max-width: 427px)
        {
            #my-form #my-form-id
            {
                width: 220px;
            }
        }
        @media only screen and (max-width: 426px)
        {
            #my-form input, #my-form select
            {
                width: 300px;
            }
            #my-form .custom-file
            {
                width: 300px;
            }
            #my-form .custom-file-label
            {
                width: 300px;
            }
            #my-form #my-form-id
            {
                width: 215px;
            }
        }
        @media only screen and (max-width: 406px)
        {
            #my-form #my-form-id
            {
                width: 190px;
            }
        }
        @media only screen and (max-width: 394px)
        {
            #my-form input, #my-form select
            {
                width: 300px;
            }
            #my-form .custom-file
            {
                width: 300px;
            }
            #my-form .custom-file-label
            {
                width: 300px;
            }
            .application
            {
                width: 330px;
            }
            .application p
            {
                font-size: 13px;
            }
            #academic-qualification
            {
                width: 270px;
            }
        }
        @media only screen and (max-width: 387px)
        {
            #my-form #my-form-id
            {
                width: 180px;
            }
        }
        @media only screen and (max-width: 377px)
        {
            #my-form #my-form-id
            {
                width: 180px;
            }
        }
        @media only screen and (max-width: 372px)
        {
            #my-form #my-form-id
            {
                width: 144px;
            }
        }
        @media only screen and (max-width: 370px)
        {
            #my-form input, #my-form select
            {
                width: 250px;
            }
            #my-form .custom-file
            {
                width: 250px;
            }
            #my-form .custom-file-label
            {
                width: 250px;
            }
        }
        @media only screen and (max-width: 366px)
        {
            #my-form #my-form-id
            {
                width: 160px;
            }
            .application
            {
                width: 290px;
            }
            .application p
            {
                font-size: 11px;
            }
        }
        @media only screen and (max-width: 351px)
        {
            #my-form #my-form-id
            {
                width: 154px;
            }
        }
        @media only screen and (max-width: 345px)
        {
            #my-form #my-form-id
            {
                width: 140px;
            }
        }
        @media only screen and (max-width: 340px)
        {
            .application
            {
                width: 290px;
            }
            .application p
            {
                font-size: 11px;
            }
            #academic-qualification
            {
                width: 250px;
            }
            #my-form #my-form-id
            {
                width: 130px;
            }
        }
        /* responsiveness */

        .photo-preview {
            max-width: 100%;
            max-height: 100%;
        }

        /* Khalti Button */
        .btn-khalti {
            background-color: #5c2d91;
            cursor: pointer;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 2px;
        }

        .payment-btn-container {
            display: flex;
            align-content: center;
            justify-content: center;
        }

        .payment-user-detail div{
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .payment-user-detail span.title{
            font-weight: bold;
            margin-bottom: 10px;
        }

    </style>
@endsection


@section('main')

    <section class="instructor-details-area pt-100 pb-70">
        <div class="container">
            <form action="{{url('/admission')}}" method="POST" enctype="multipart/form-data" id="entrance-form">

                {{csrf_field()}}
                <section class="registration-form-wrapper">
                    <div class="registration-image">
{{--                        <img src="images/registration.png" alt="">--}}
{{--                        <img src="images/registration.png" alt="">--}}
                    </div>

                    <!-- form intro -->

                    <div class="brand-logo"><img width="165px" height="72px" src="{{asset('uploads/'.Voyager::setting('site.logo'))}}" alt="logo"></div>
                    <div class="form-intro-wrapper">
                        <h1>Kantipur Hotel Training Center</h1>
                        <h3>Pokhara</h3>
                        <br>
                        <p>Interested Students, please fill-up the form below for admission.
                        </p>

                        <div class="container" id="stu-image-container">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="my-brand-logo" id="brand-image-align">
                                        <img src="{{asset('uploads/'.Voyager::setting('site.logo'))}}" alt="" >
                                    </div>
                                </div>
                                <div class="col-md-6" id="stu-img-inline">
                                    <div class="student-img" id="student-photo-align">
                                        <img src="#" id="photo-preview" class="photo-preview"/>
                                    </div>
                                    <div class="upload-btn">
                                        <input type="file" name="photo" id="photo" style="display: none;">
                                        <button type="button" id="img_upload">UPLOAD PHOTO  <i class="fa fa-upload"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container application-container">
                            <div class="registration-line"></div>
                            <div class="application">
                                <p>ONLINE ADMISSION FORM</p>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- sagarmatha-form-intro -->

                <!-- basic-information-section -->
                <div class="container mt-2 mb-4">
                    <div class="row">
                        <div class="col-md-6" id="Symbol-alignment" hidden="hidden">
                            <label for="" id="symbol-id">Form Number<span id="required">*</span></label>
                            <input type="number" placeholder="" required id="symbol-id-input" disabled>
                        </div>
                        <div class="col-md-6"></div>
                    </div>
                </div>
                <section class="form-information-section mt-4">
                    <div class="container" id="my-container">
                        <div class="form-container">
                            <div class="my-header">
                                <h1 id="heading">Basic-Information</h1>
                            </div>
                            <div class="row" id="form-alignment">
                                <div class="col-md-12">
                                    <div class="container form-padding" id="my-form">
                                        <div class="row">
                                            <div class="col-md-4 form-info">
                                                <label for="">Student's Name<span id="required">*</span></label>
                                                <input type="text" placeholder="Enter Full Name" name="name" class="form-control " value="" required>
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">Date Of Birth<span id="required">*</span></label>
                                                <input type="date" placeholder="Enter Date Of Birth" name="dob" class="form-control " value="" required>
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">Gender<span id="required">*</span></label>
                                                <select name="gender" class="form-control " required>
                                                    <option value="">--Select Gender--</option>
                                                    <option value="Male" >Male</option>
                                                    <option value="Female" >Female</option>
                                                    <option value="Other" >Other</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-md-4 form-info">
                                                <label for="">Program<span id="required">*</span></label>
                                                <select name="program" id="course" class="form-control " required>
                                                    @isset($program)
                                                        <option value="{{$program->id}}" selected>{{$program->name}}</option>
                                                        @else
                                                    <option value="" selected>--Select Program--</option>
                                                    @foreach($programs as $p)
                                                        <option value="{{$p->id}}" >{{$p->name}}</option>
                                                    @endforeach
                                                        @endif
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="">Course </label>
                                                <select id="interested" name="course" class="form-control ">
                                                    @isset($course)
                                                        <option value="{{$course->id}}" selected>{{$course->name}}</option>
                                                    @else
                                                    <option value="" selected>--Select Course--</option>
                                                    @foreach($courses as $p)
                                                        <option value="{{$p->id}}" >{{$p->name}}</option>
                                                    @endforeach
                                                    @endif

                                                </select>
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">Email Address<span id="required">*</span></label>
                                                <input type="email" placeholder="Enter Email Address" name="email" class="" value="" required>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-md-4 form-info">
                                                <label for="">Phone Number<span id="required">*</span></label>
                                                <input type="contact" placeholder="Enter Mobile Number" name="contact" class="" value="" required>
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">Parent's Name<span id="required">*</span></label>
                                                <input type="text" placeholder="Enter Father's Name" name="father_name" class="" value="" required>
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">Parents's Contact Number<span id="required">*</span></label>
                                                <input type="number" placeholder="Enter Father's Contact Number" name="father_contact_no" class="" value="" required>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
{{--                                            <div class="col-md-4 form-info">--}}
{{--                                                <label for="">Mother's Name<span id="required">*</span></label>--}}
{{--                                                <input type="text" placeholder="Enter Mother's Name" name="mother_name" class="" value="" required>--}}
{{--                                            </div>--}}
{{--                                            <div class="col-md-4 form-info">--}}
{{--                                                <label for="">Mother's Contact Number<span id="required">*</span></label>--}}
{{--                                                <input type="number" placeholder="Enter Mother's Contact Number" name="mother_contact_no" class="" value="" required>--}}
{{--                                            </div>--}}
                                            <div class="col-md-4 form-info">
                                                <label for="">Address(Province)<span id="required">*</span></label>
                                                <select id="" name="province" class="">
                                                    <option value="">--Select Province--</option>
                                                    <option value="1" >Province No.1 </option>
                                                    <option value="2" >Province No.2 </option>
                                                    <option value="3" >Bagmati Pradesh</option>
                                                    <option value="4" >Gandaki Pradesh</option>
                                                    <option value="5" >Province No.5 </option>
                                                    <option value="6" >Karnali Pradesh</option>
                                                    <option value="7" >Sudurpashchim Pradesh</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row mt-3" id="form-alignment-bottom">
                                            <div class="col-md-4 form-info">
                                                <label for="">Zone<span id="required">*</span></label>
                                                <select name="zone" id="" class="">
                                                    <option value="">--Select Zone--</option>
                                                    <option value="Mechi" >Mechi</option>
                                                    <option value="Koshi" >Koshi</option>
                                                    <option value="Sagarmatha" >Sagarmatha</option>
                                                    <option value="Janakpur" >Janakpur</option>
                                                    <option value="Bagmati" >Bagmati</option>
                                                    <option value="Narayani" >Narayani</option>
                                                    <option value="Gandaki" >Gandaki</option>
                                                    <option value="Lumbini" >Lumbini</option>
                                                    <option value="Dhawalagiri" >Dhawalagiri</option>
                                                    <option value="Rapti" >Rapti</option>
                                                    <option value="Karnali" >Karnali</option>
                                                    <option value="Bheri" >Bheri</option>
                                                    <option value="Seti" >Seti</option>
                                                    <option value="Mahakali" >Mahakali</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">District<span id="required">*</span></label>
                                                <select name="district" id="" class="">
                                                    <option value="">--Select District--</option>
                                                    <option value="Achham" >Achham</option>
                                                    <option value="Arghakhanchi" >Arghakhanchi</option>
                                                    <option value="Baglung" >Baglung</option>
                                                    <option value="Baitadi" >Baitadi</option>
                                                    <option value="Bajhang" >Bajhang</option>
                                                    <option value="Bajura" >Bajura</option>
                                                    <option value="Banke" >Banke</option>
                                                    <option value="Bara" >Bara</option>
                                                    <option value="Bardiya" >Bardiya</option>
                                                    <option value="Bhaktapur" >Bhaktapur</option>
                                                    <option value="Bhojpur" >Bhojpur</option>
                                                    <option value="Chitwan" >Chitwan</option>
                                                    <option value="Dadeldhura" >Dadeldhura</option>
                                                    <option value="Dailekh" >Dailekh</option>
                                                    <option value="Dang" >Dang</option>
                                                    <option value="Darchula" >Darchula</option>
                                                    <option value="Dhading" >Dhading</option>
                                                    <option value="Dhankuta" >Dhankuta</option>
                                                    <option value="Dhanusa" >Dhanusa</option>
                                                    <option value="Dolakha" >Dolakha</option>
                                                    <option value="Dolpa" >Dolpa</option>
                                                    <option value="Doti" >Doti</option>
                                                    <option value="EasternRukum" >Eastern Rukum</option>
                                                    <option value="Gorkha" >Gorkha</option>
                                                    <option value="Gulmi" >Gulmi</option>
                                                    <option value="Humla" >Humla</option>
                                                    <option value="Ilam" >Ilam</option>
                                                    <option value="Jajarkot" >Jajarkot</option>
                                                    <option value="Jhapa" >Jhapa</option>
                                                    <option value="Jumla" >Jumla</option>
                                                    <option value="Kailali" >Kailali</option>
                                                    <option value="Kalikot" >Kalikot</option>
                                                    <option value="Kanchanpur" >Kanchanpur</option>
                                                    <option value="Kapilvastu" >Kapilvastu</option>
                                                    <option value="Kaski" >Kaski</option>
                                                    <option value="Kathmandu" >Kathmandu</option>
                                                    <option value="Kavrepalanchok" >Kavrepalanchok</option>
                                                    <option value="Khotang" >Khotang</option>
                                                    <option value="Lalitpur" >Lalitpur</option>
                                                    <option value="Lamjung" >Lamjung</option>
                                                    <option value="Mahottari" >Mahottari</option>
                                                    <option value="Makawanpur" >Makawanpur</option>
                                                    <option value="Manang" >Manang</option>
                                                    <option value="Morang" >Morang</option>
                                                    <option value="Mugu" >Mugu</option>
                                                    <option value="Mustang" >Mustang</option>
                                                    <option value="Myagdi" >Myagdi</option>
                                                    <option value="Nawalpur" >Nawalpur</option>
                                                    <option value="Nuwakot" >Nuwakot</option>
                                                    <option value="Okhaldhunga" >Okhaldhunga</option>
                                                    <option value="Palpa" >Palpa</option>
                                                    <option value="Panchthar" >Panchthar</option>
                                                    <option value="Parasi" >Parasi</option>
                                                    <option value="Parbat" >Parbat</option>
                                                    <option value="Parsa" >Parsa</option>
                                                    <option value="Pyuthan" >Pyuthan</option>
                                                    <option value="Ramechhap" >Ramechhap</option>
                                                    <option value="Rasuwa" >Rasuwa</option>
                                                    <option value="Rautahat" >Rautahat</option>
                                                    <option value="Rolpa" >Rolpa</option>
                                                    <option value="Rupandehi" >Rupandehi</option>
                                                    <option value="Salyan" >Salyan</option>
                                                    <option value="Sankhuwasabha" >Sankhuwasabha</option>
                                                    <option value="Saptari" >Saptari</option>
                                                    <option value="Sarlahi" >Sarlahi</option>
                                                    <option value="Sindhuli" >Sindhuli</option>
                                                    <option value="Sindhupalchowk" >Sindhupalchowk</option>
                                                    <option value="Siraha" >Siraha</option>
                                                    <option value="Solukhumbu" >Solukhumbu</option>
                                                    <option value="Sunsari" >Sunsari</option>
                                                    <option value="Surkhet" >Surkhet</option>
                                                    <option value="Syangja" >Syangja</option>
                                                    <option value="Tanahun" >Tanahun</option>
                                                    <option value="Taplejung" >Taplejung</option>
                                                    <option value="WesternRukum" >Western Rukum</option>
                                                    <option value="Terhathum" >Terhathum</option>
                                                    <option value="Udayapur" >Udayapur</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">Municipality<span id="required"></span></label>
                                                <input type="text" placeholder="Enter Municipality" name="municipality" class="" value="">
                                            </div>
                                            <div class="col-md-4 form-info">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- basic-information-section -->


                <!-- Academic Details (Grade X) -->
                <section class="form-information-section mt-5">
                    <div class="container" id="my-container">
                        <div class="form-container">
                            <div class="my-header" id="academic-qualification">
                                <h1 id="heading">Academic Details</h1>
                            </div>
                            <div class="row" id="form-alignment">
                                <div class="col-md-12">
                                    <div class="container form-padding" id="my-form">
                                        @if(isset($result))
                                            <div class="alert alert-success" role="alert">
                                                {{$result}}
                                            </div>
                                        @endif
                                        <div class="row">
                                            <div class="col-md-4 form-info">
                                                <label for="">Completed Level<span id="required"></span></label>
                                                <select name="completed_level" id="course" class="form-control " >
                                                    <option value="" selected>--Select level--</option>
                                                    <option value="School level" >--School level--</option>
                                                    <option value="High School 10+2 level">--High school 10+2 level--</option>
                                                    <option value="Bachelor level">--Bachelor level--</option>
                                                    <option value="Master level">--Master level--</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">Former School / College Name<span id="required"></span></label>
                                                <input type="text" placeholder="Enter Former School's Name" name="school_name" value="" class="" >
                                            </div>
                                            <div class="col-md-4 form-info">
                                                <label for="">Completed year<span id="required"></span></label>
                                                <input type="number" min="1" max="4" step="0.01" placeholder="Completed Year" name="completed_year" value="" class="">
                                            </div>
                                        </div>
                                        {{--                                        <div class="row mt-3">--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <label for="">Rank in Send-Up<span id="required">*</span></label>--}}
                                        {{--                                                <input type="text" placeholder="Enter Your Rank" name="rank" value="" class="">--}}
                                        {{--                                            </div>--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <label for="">Total Number of Students in Class<span id="required">*</span></label>--}}
                                        {{--                                                <input type="number" placeholder="Enter Total Number of Students" name="student_count" value="" class="">--}}
                                        {{--                                            </div>--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <label for="">SEE CGPA<span id="required">*</span></label>--}}
                                        {{--                                                <input type="number" min="1" max="4" step="0.01" placeholder="Enter CGPA in SEE" name="see_gpa" value="" class="">--}}
                                        {{--                                            </div>--}}
                                        {{--                                        </div>--}}
                                        {{--                                        <div class="row mt-3">--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <label for="">SEE Grade Point in Science<span id="required">*</span></label>--}}
                                        {{--                                                <input type="number" placeholder="Enter Science's Grade Point" min="1" max="4" step="0.01" name="subject[science]" value="" class="">--}}
                                        {{--                                            </div>--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <label for="">SEE Grade Point in Comp.Maths<span id="required">*</span></label>--}}
                                        {{--                                                <input type="number" placeholder="Enter Comp.Math's Grade Point" min="1" max="4" step="0.01" name="subject[c-math]" value="" class="">--}}
                                        {{--                                            </div>--}}
                                        {{--                                            <div class="col-md-4" id="opt-maths">--}}
                                        {{--                                                <label for="">SEE Grade Point in Opt.Math<span id="required">*</span></label>--}}
                                        {{--                                                <input type="number" placeholder="Enter Opt.Math's Grade Point" min="1" max="4" step="0.01" name="subject[o-math]" value="" class="">--}}
                                        {{--                                            </div>--}}
                                        {{--                                        </div>--}}
                                        {{--                                        <div class="row mt-3">--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <label for="">SEE Grade Point in English<span id="required">*</span></label>--}}
                                        {{--                                                <input type="number" placeholder="Enter English's Grade Point" min="1" max="4" step="0.01" name="subject[english]" value="" class="">--}}
                                        {{--                                            </div>--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <div>--}}
                                        {{--                                                    <label for="">Other Subjects<span id="required">*</span></label>--}}
                                        {{--                                                    <span class="mr-1 my-span-num">1.</span>--}}
                                        {{--                                                    <input type="text" placeholder="Enter Name of Subject" id="my-form-id" name="subject[add-1][name]" value="" class="">--}}
                                        {{--                                                    <input type="number" placeholder="GPA" id="my-form-cgpa-id" min="1" max="4" step="0.01" name="subject[add-1][gpa]" value="" class="">--}}
                                        {{--                                                </div>--}}
                                        {{--                                                <div class="mt-2">--}}
                                        {{--                                                    <span class="my-span-num">2.</span>--}}
                                        {{--                                                    <input type="text" placeholder="Enter Name of Subject" id="my-form-id" name="subject[add-2][name]" value="" class="">--}}
                                        {{--                                                    <input type="number" placeholder="GPA" id="my-form-cgpa-id" min="1" max="4" step="0.01" name="subject[add-2][gpa]" value="" class="">--}}
                                        {{--                                                </div>--}}
                                        {{--                                                <div class="mt-2" id="extra-subject">--}}
                                        {{--                                                    <span class="my-span-num">*.</span>--}}
                                        {{--                                                    <input type="text" placeholder="Enter Name of Subject" id="my-form-id" name="subject[add-5][name]" value="" class="">--}}
                                        {{--                                                    <input type="number" placeholder="GPA" id="my-form-cgpa-id" min="1" max="4" step="0.01" name="subject[add-5][gpa]" value="" class="">--}}
                                        {{--                                                </div>--}}
                                        {{--                                            </div>--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <div class="" id="mar">--}}
                                        {{--                                                    <span class="my-span-num">3.</span>--}}
                                        {{--                                                    <input type="text" placeholder="Enter Name of Subject" id="my-form-id" name="subject[add-3][name]" value="" class="">--}}
                                        {{--                                                    <input type="number" placeholder="GPA" id="my-form-cgpa-id" min="1" max="4" step="0.01" name="subject[add-3][gpa]" value="" class="">--}}
                                        {{--                                                </div>--}}
                                        {{--                                                <div class="mt-2">--}}
                                        {{--                                                    <span class="my-span-num">4.</span>--}}
                                        {{--                                                    <input type="text" placeholder="Enter Name of Subject" id="my-form-id" name="subject[add-4][name]" value="" class="">--}}
                                        {{--                                                    <input type="number" placeholder="GPA" id="my-form-cgpa-id" min="1" max="4" step="0.01" name="subject[add-4][gpa]" value="" class="">--}}
                                        {{--                                                </div>--}}
                                        {{--                                            </div>--}}
                                        {{--                                        </div>--}}
                                        {{--                                        <div class="row mt-3" id="form-alignment-bottom">--}}
                                        {{--                                            <div class="col-md-4">--}}
                                        {{--                                                <label for="">Upload SEE Grade Sheet<span id="required">*</span></label>--}}
                                        {{--                                                <div class="custom-file" id="custom-file">--}}
                                        {{--                                                    <input type="file" class="custom-file-input" id="customFile" name="gradesheet">--}}
                                        {{--                                                    <label class="custom-file-label" for="customFile">Choose File</label>--}}
                                        {{--                                                </div>--}}
                                        {{--                                            </div>--}}
                                        {{--                                            <div class="col-md-4">--}}

                                        {{--                                            </div>--}}
                                        {{--                                            <div class="col-md-4">--}}

                                        {{--                                            </div>--}}
                                        {{--                                        </div>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Academic Details (Grade X) -->


                <!-- form-conformation -->
                <section class="form-conformation-section">
                    <div class="form-agree">
                        <div class="container"><hr>
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="d-inline-info">
                                        <label class="radio" id="radio">
                                            <input type="checkbox" name="check" required>
                                        </label>
                                    </div>
                                    <div id="d-inline-info">
                                        <p>I confirm that details given above are true and correct.</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="submit-section d-flex justify-content-center">
                        <div class="submit-btn">
                            <button type="submit" id="entrance_submit">Submit Form <i class="fa fa-send"></i>
                                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true" id="submit_spin" hidden></span>
                            </button>
                        </div>
                        <div class="cancel-btn">
                            <button type="reset">Cancel Form <i class="fa fa-close"></i></button>
                        </div>
                    </div>
                </section>
                <!-- form-conformation -->

            </form>

        </div>
    </section>
    <!-- End Courses Details Area -->

@endsection

@section('javascript')
    <script>
        $(".custom-file-input").on("change", function() {
            var fileName = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
        });
        // --------------
        $(function() {
            $('#extra-subject').hide();
            $('#extra-subject input').removeAttr('required');

            $("#course").change(function() {
                if ($(this).val() !== "1") {
                    $('#interested').prop('selectedIndex', 0)
                    // $("#interested").prop("disabled", true);

                    $('#extra-subject').show();
                    $('#extra-subject input').attr('required', '');
                    $('#opt-maths').hide();
                    $('#opt-maths input').val('');
                    $('#opt-maths input').removeAttr('required');
                }
                else{
                    $('#interested').prop('selectedIndex', 0)
                    $("#interested").prop("disabled", false);

                    $('#extra-subject').hide();
                    $('#extra-subject input').val('');
                    $('#extra-subject input').removeAttr('required');
                    $('#opt-maths').show();
                    $('#opt-maths input').attr('required', '');

                }
            });

            $('#img_upload').click(function () {
                $('#photo').trigger('click');
            });

            // $('#photo-preview').hide();

            $('#photo').change(function () {
                console.log(this.input);
                showImage(this);
            });

            function showImage(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        console.log(e);
                        $('#photo-preview')
                            .attr('src', e.target.result);
                    }

                    reader.readAsDataURL(input.files[0]);
                }
            }

            $('#entrance_submit').click(function (e) {
                e.preventDefault();
                $(this).attr('disabled', true);
                $('#submit_spin').attr('hidden', false);
                $('#entrance-form').submit();
            });
        });



    </script>
@endsection