@extends('layouts.app')

@section('title')
    Student Registration
@endsection

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <ol class="breadcrumb page-breadcrumb pull-center">
                        <li class=""><strong>Personal Details</strong><i class="fa fa-angle-right"></i></li>
                        <li class="">Education Background <i class="fa fa-angle-right"></i></li>
                        <li class="">Programme <i class="fa fa-angle-right"></i></li>
                        <li class="">Confirm Details <i class="fa fa-angle-right"></i></li>
                        <li class="">Files</li>
                    </ol>
                </div>
            </div>
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible show" role="alert">
                    {{ session('error') }}<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 style="margin-top: 30px" class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card card-box">
                        <div class="card-head">
                            <header>Student's Personal Details</header>
                        </div>
                        <div class="card-body " id="bar-parent2">
                            <form method="post" action="{{ url('add-student') }}" enctype="multipart/form-data"
                                  id="form_sample_1" class="form-horizontal">
                                @csrf
                                <div id="personalDet" class="row">

                                    {{-- column1 --}}
                                    <div class="col-md-4 col-sm-6">
                                        <!-- text input -->
                                        <div class="form-group">
                                            <label>First name</label>
                                            {{-- <input type="hidden" name="applicant_type_id" value="{{ $applicant_type_id }}"> --}}
                                            <input type="text" name="first_name" class="form-control"
                                                   placeholder="First name"
                                                   style="border-color: @error('first_name') red @enderror"
                                                   value={{ old('first_name') }}>
                                            @error('first_name')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>
                                        <div class="form-group">
                                            <label>Last name</label>
                                            <input type="text" name="last_name" class="form-control"
                                                   placeholder="Last name"
                                                   style="border-color: @error('last_name') red @enderror"
                                                   value={{ old('last_name') }}>
                                            @error('last_name')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>
                                        <div class="form-group">
                                            <label>NRC/Passport Number</label>
                                            <input type="text" name="nrc_passport" class="form-control"
                                                   placeholder="NRC/Passport name"
                                                   style="border-color: @error('nrc_passport') red @enderror"
                                                   value={{ old('nrc_passport') }}>
                                            @error('nrc_passport')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>

                                        <div class="form-group">
                                            <label>Email</label>
                                            <input type="email" name="email" class="form-control" placeholder="Email"
                                                   style="border-color: @error('email') red @enderror"
                                                   value={{ old('email') }}>
                                            @error('email')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>
                                    </div>
                                    {{-- column1 --}}
                                    <div class="col-md-4 col-sm-6">
                                        <!-- text input -->
                                        <div class="form-group">
                                            <label>Date Of Birth</label>
                                            <input name="dob" type="date" class="form-control" placeholder="DOB"
                                                   style="border-color: @error('dob') red @enderror"
                                                   value={{ old('dob') }}>
                                            @error('dob')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>

                                        <div class="form-group">
                                            <label>Next of Kin</label>
                                            <input name="next_of_kin" type="text" class="form-control"
                                                   placeholder="Name"
                                                   style="border-color: @error('next_of_kin') red @enderror"
                                                   value={{ old('next_of_kin') }}>
                                            @error('next_of_kin')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>

                                        <div class="form-group">
                                            <label>Next of Kin Contact</label>
                                            <input name="next_of_kin_phone" type="text" class="form-control"
                                                   placeholder="phone"
                                                   style="border-color: @error('next_of_kin_phone') red @enderror"
                                                   value={{ old('next_of_kin_phone') }}>
                                            @error('next_of_kin_phone')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>

                                        <div class="form-group">
                                            <label>Phone</label>
                                            <input type="text" name="phone" class="form-control" placeholder="Phone"
                                                   style="border-color: @error('phone') red @enderror"
                                                   value={{ old('phone') }}>
                                            @error('phone')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>
                                    </div>
                                    {{-- column3 --}}
                                    <div class="col-md-4 col-sm-6">
                                        <!-- textarea -->
                                        <div class="form-group">
                                            <label>Physical Address</label>
                                            <input name="address" type="text" class="form-control" placeholder="Address"
                                                   style="border-color: @error('address') red @enderror"
                                                   value={{ old('address') }}>
                                            @error('address')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>

                                        <div class="form-group">
                                            <label>City</label>
                                            <input name="city" type="text" class="form-control" placeholder="city"
                                                   style="border-color: @error('city') red @enderror"
                                                   value={{ old('city') }}>
                                            @error('city')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                        <br>

                                        <div class="form-group">
                                            <label>Gender</label>
                                            <select name="gender" class="form-select"
                                                    style="border-color: @error('gender') red @enderror">
                                                {{-- <option selected>-- Select --</option> --}}
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                            </select>
                                            @error('gender')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                            @enderror
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-12 col-sm-6">
                                        <button type="submit" class="btn btn-info m-r-20">Next</button>
                                    </div> --}}
                                </div>

                            {{-- </form> --}}
                        </div>
                        <div class="card-head">
                            <header>Program Details</header>
                        </div>
                        <div class="card-body " id="bar-parent2">
                            {{-- <form method="post" action="{{ url('personal-details') }}" enctype="multipart/form-data" id="form_sample_1" class="form-horizontal"> --}}
                            <div id="personalDet" class="row">

                                <div class="col-md-4 col-sm-6">
                                    <div class="form-group">
                                        <label>Program</label>
                                        <select name="program_id" class="form-select select2"
                                                style="border-color: @error('program_id') red @enderror">
                                            {{-- <option selected>-- Select --</option> --}}
                                            @foreach ($programs as $program)
                                                <option value="{{ $program->id }}">{{ $program->program_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('program_id')
                                        <div class="invalid-feedback">
                                            The program field is required
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>Applicant Type</label>
                                        <select name="applicant_type_id" class="form-select select2"
                                                style="border-color: @error('applicant_type_id') red @enderror">
                                            {{-- <option selected>-- Select --</option> --}}
                                            @foreach ($applicant_types as $applicant_type)
                                                <option
                                                    value="{{ $applicant_type->id }}">{{ $applicant_type->applicant_type_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('applicant_type_id')
                                        <div class="invalid-feedback">
                                            The applicant type field is required
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>Student Number</label>
                                        <input name="student_no" type="text" class="form-control" placeholder="Student Number"
                                               style="border-color: @error('student_no') red @enderror"
                                               value={{ old('student_no') }}>
                                        @error('student_no')
                                        <div class="invalid-feedback">
                                            The student number field is required
                                        </div>
                                        @enderror
                                        <small style="font-size: 10px" class="text-warning">Please make sure you supply the correct Student Number</small>
                                    </div>
                                    <br>
                                </div>
                                {{-- column3 --}}
                                <div class="col-md-4 col-sm-6">
                                    <div class="form-group">
                                        <label>Intake</label>
                                        <select name="year" class="form-select select2"
                                                style="border-color: @error('year') red @enderror">
                                            {{-- <option selected>-- Select --</option> --}}
                                            @foreach ($years as $year)
                                                <option value="{{ $year }}">{{ $year }}</option>
                                            @endforeach
                                        </select>
                                        @error('year')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>Academic Year</label>
                                        <select name="year_id" class="form-select select2"
                                                style="border-color: @error('year') red @enderror">
                                            {{-- <option selected>-- Select --</option> --}}
                                            @foreach ($academic_year as $year)
                                                <option value="{{ $year->id }}">{{ $year->academic_year_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('year_id')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>

                                </div>
                                <div class="col-md-4 col-sm-6">
                                    <div class="form-group">
                                        <label>Gender</label>
                                        <select name="gender" class="form-select select2"
                                                style="border-color: @error('gender') red @enderror">
                                            {{-- <option selected>-- Select --</option> --}}
                                            <option value="male">Male</option>
                                            <option value="female">Female</option>
                                        </select>
                                        @error('gender')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label>Academic Session</label>
                                        <select name="session_id" class="form-select select2"
                                                style="border-color: @error('gender') red @enderror">
                                            @foreach ($academic_session as $session)
                                                <option
                                                    value="{{ $session->id }}">{{ $session->academic_session_name }}</option>
                                            @endforeach
                                        </select>
                                        @error('session_id')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>

                                </div>

                                <div class="col-md-12 mt-5 col-sm-6">
                                    <button type="submit" class="btn btn-info m-r-20">Submit</button>
                                </div>
                            </div>

                            </form>
                        </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