@extends('Public_site.layouts.app')
@extends('Public_site.layouts.header')
@extends('Public_site.layouts.banner')

@section('titleh2','Courses')
@section('titleh3','List')
@section('content')
<div id="content">


            <div class="content-kud request-interest">
                <form class="card">

                    <!--card header-->
                    <div class="card-header">
                        <nav class="nav nav-pills nav-fill">
                            <a class="nav-link tab-pills" href="#">Personal Details</a>
                            <a class="nav-link tab-pills" href="#">Address</a>
                            <a class="nav-link tab-pills" href="#">Other Informations</a>
                            <a class="nav-link tab-pills" href="#">Courses</a>
                            <a class="nav-link tab-pills" href="#">Finish</a>
                        </nav>
                    </div>
                    <!--card header-->

                    <!--card body-->
                    <div class="card-body">

                        <!--personal info-->
                        <div class="tab d-none">

                            <h3><span>Personal Details</span></h3>
                            <div class="row">
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Name</label>
                                    <input type="text" class="form-control" id="" placeholder="" name="">
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Gender</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" id="gender1"
                                            value="a" checked>
                                        <label class="form-check-label" for="gender1">Male</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" id="gender2"
                                            value="b">
                                        <label class="form-check-label" for="gender2">Female</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" id="gender3"
                                            value="c">
                                        <label class="form-check-label" for="gender3">Transgender</label>
                                    </div>
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Date of Birth</label>
                                    <input type="text" class="form-control" id="" placeholder="" name="">
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Religion</label>
                                    <select class="form-select">
                                        <option>select</option>
                                    </select>
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Category</label>
                                    <select class="form-select">
                                        <option>select</option>
                                        <option>General</option>
                                        <option>SC</option>
                                        <option>ST</option>
                                        <option>Minority</option>
                                    </select>
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Email Id</label>
                                    <input type="email" class="form-control" id="" placeholder="" name="">
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Mobile Number</label>
                                    <input type="tel" class="form-control" id="" placeholder="" name="">
                                </div>
                            </div>

                            <h3><span>Qualifications</span></h3>
                            <div class="row">
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Highest Qualification</label>
                                    <input type="text" class="form-control" id="" placeholder="" name="">
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Additional Certificates, if any</label>
                                    <input type="text" class="form-control" id="" placeholder="" name="">
                                </div>
                            </div>

                        </div>
                        <!--personal info-->

                        <!--address info-->
                        <div class="tab d-none">

                            <h3><span>Address</span></h3>
                            <div class="row">
                                <div class="col-md-6 col-6 my-1">
                                    <label for="" class="form-label">Address</label>
                                    <textarea class="form-control" rows="7" id="" name=""></textarea>
                                </div>
                                <div class="col-md-6 col-6">
                                    <div class="my-2">
                                        <label for="" class="form-label">Block</label>
                                        <select class="form-select">
                                            <option>select</option>
                                        </select>
                                    </div>
                                    <div class="my-2">
                                        <label for="" class="form-label">District</label>
                                        <select class="form-select">
                                            <option>select</option>
                                        </select>
                                    </div>
                                    <div class="my-2">
                                        <label for="" class="form-label">Local Body</label>
                                        <select class="form-select">
                                            <option>select</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!--address info-->

                        <!--other info-->
                        <div class="tab d-none">

                            <h3><span>Other Informations</span></h3>
                            <div class="row">
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">PWD</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="pwd" id="pwd1" value="a"
                                            checked>
                                        <label class="form-check-label" for="pwd1">Yes</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="pwd" id="pwd2" value="b">
                                        <label class="form-check-label" for="pwd2">No</label>
                                    </div>
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Ration card Type</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="rationCard" id="rationCard1"
                                            value="a" checked>
                                        <label class="form-check-label" for="rationCard1">APL</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="rationCard" id="rationCard2"
                                            value="b">
                                        <label class="form-check-label" for="rationCard2">BPL</label>
                                    </div>
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">MGNREGA</label>
                                    <input type="text" class="form-control" id="" placeholder="" name="">
                                </div>
                                <div class="col-md-4 col-6 my-1">
                                    <label for="" class="form-label">Kudumbashree Member</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="kudMember" id="kudMember1"
                                            value="a" checked>
                                        <label class="form-check-label" for="kudMember1">Yes</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="kudMember" id="kudMember2"
                                            value="b">
                                        <label class="form-check-label" for="kudMember2">No</label>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!--other info-->

                        <!--course info-->
                        <div class="tab d-none posi-relative">

                            <div class="add-more">
                                <a href="#"><i class="fa fa-add btn btn-primary"></i></a>
                            </div>

                            <div class="row">
                                <div class="col-md-11 col-11 my-1">
                                    <label for="" class="form-label">Select the course you prefer</label>
                                    <select class="form-select">
                                        <option>select</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mt-4">
                                <div class="col-12">
                                    <p class="purple">Maximum 3 courses are allowed to select.</p>
                                </div>
                            </div>

                        </div>
                        <!--course info-->

                        <!--finish-->
                        <div class="tab d-none text-center">
                            <img src="img/training.svg" width="100" />
                            <p class="pt-3">
                                All Set! Please submit to continue to the next level.<br>
                                Programme Implementing Agencies will contact you once they approve.<br>
                                <span class="purple">Thank you.</span>
                            </p>
                        </div>
                        <!--finish-->

                    </div>
                    <!--card body-->

                    <!---card footer-->
                    <div class="card-footer text-end">
                        <div class="d-flex">
                            <button type="button" id="back_button" class="btn btn-link" onclick="back()">Back</button>
                            <button type="button" id="next_button" class="btn btn-primary ms-auto"
                                onclick="next()">Next</button>
                        </div>
                    </div>
                    <!---card footer-->

                </form>
            </div>
        </div>

@endsection