@extends('layouts.welcome')

@section('title')
    Online Application
@endsection

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible show" role="alert">
                    <strong>{{ session('success') }}</strong><a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @endif
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card card-box">
                        <div class="card-head">
                            <header style="display: flex;justify-content: center;">Online Application</header>
                        </div>
                        <div class="card-body" id="bar-parent2"><br> <br> <br>
                            <div style="display: flex;justify-content: center;" id="personalDet" class="row">

                                {{-- column1 --}}
                                <div class="col-md-4 col-sm-6">
                                    <!-- text input -->
                                    <div class="blogThumb">
                                        <div class="white-box">
                                            <header style="display: flex;justify-content: center;">Apply Now</header><br>
                                            <form method="get" action="{{ url('personal-details') }}" id="form_sample_1"
                                                class="form-horizontal">
                                                @csrf
                                                {{-- <input type="hidden" name="applicant_type_id" value="1"> --}}
                                                <label style="margin-bottom: 10px">Applicant Type</label>
                                                <select class="form-control" name="applicant_type_id">
                                                    <option value="1">Undergraduate</option>
                                                    <option value="2">Postgraduate</option>
                                                </select>
                                                <button
                                                    class="btn btn-success btn-rounded waves-effect waves-light m-t-20">Apply
                                                    Now</button>
                                            </form>
                                        </div>
                                    </div><br>
                                </div>
                            </div><br>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- end page content -->
    <script>
        var currentTab = 0; // Current tab is set to be the first tab (0)
        showTab(currentTab); // Display the current tab

        function showTab(n) {
            // This function will display the specified tab of the form...
            var x = document.getElementsByClassName("tab");
            x[n].style.display = "block";
            //... and fix the Previous/Next buttons:
            if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
            } else {
                document.getElementById("prevBtn").style.display = "inline";
            }
            if (n == (x.length - 1)) {
                document.getElementById("nextBtn").innerHTML = "Submit";
            } else {
                document.getElementById("nextBtn").innerHTML = "Next";
            }
            //... and run a function that will display the correct step indicator:
            fixStepIndicator(n)
        }

        function nextPrev(n) {
            // This function will figure out which tab to display
            var x = document.getElementsByClassName("tab");
            // Exit the function if any field in the current tab is invalid:
            if (n == 1 && !validateForm()) return false;
            // Hide the current tab:
            x[currentTab].style.display = "none";
            // Increase or decrease the current tab by 1:
            currentTab = currentTab + n;
            // if you have reached the end of the form...
            if (currentTab >= x.length) {
                // ... the form gets submitted:
                document.getElementById("regForm").submit();
                return false;
            }
            // Otherwise, display the correct tab:
            showTab(currentTab);
        }

        function validateForm() {
            // This function deals with validation of the form fields
            var x, y, i, valid = true;
            x = document.getElementsByClassName("tab");
            y = x[currentTab].getElementsByTagName("input");
            // A loop that checks every input field in the current tab:
            for (i = 0; i < y.length; i++) {
                // If a field is empty...
                if (y[i].value == "") {
                    // add an "invalid" class to the field:
                    y[i].className += " invalid";
                    // and set the current valid status to false
                    valid = false;
                }
            }
            // If the valid status is true, mark the step as finished and valid:
            if (valid) {
                document.getElementsByClassName("step")[currentTab].className += " finish";
            }
            return valid; // return the valid status
        }

        function fixStepIndicator(n) {
            // This function removes the "active" class of all steps...
            var i, x = document.getElementsByClassName("step");
            for (i = 0; i < x.length; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            //... and adds the "active" class on the current step:
            x[n].className += " active";
        }
    </script>
@endsection