@extends('layouts.app')

@section('content')

    <style type="text/css">
        /* Latest compiled and minified CSS included as External Resource*/

        /* Optional theme */

        /*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/
        body {
            margin-top: 30px;
        }

        .stepwizard-step p {
            margin-top: 0px;
            color: #666;
        }

        .stepwizard-row {
            display: table-row;
        }

        .stepwizard {
            display: table;
            width: 100%;
            position: relative;
        }

        .stepwizard-step button[disabled] {
            /*opacity: 1 !important;
            filter: alpha(opacity=100) !important;*/
        }

        .stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
            opacity: 1 !important;
            color: #bbb;
        }

        .stepwizard-row:before {
            top: 14px;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 100%;
            height: 1px;
            background-color: #ccc;
            z-index: 0;
        }

        .stepwizard-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }

        .btn-circle {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 6px 0;
            font-size: 12px;
            line-height: 1.428571429;
            border-radius: 15px;
        }
    </style>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <img src="{{url('public/images/soty.png')}}" alt="image not fopund"
                             style="width:100%; height:15%;"/>
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal" enctype="multipart/form-data" method="POST"
                              action="{{ route('register') }}">
                            {{ csrf_field() }}
                            <div style="text-align:center"> ( রেজিস্ট্রেশন এর জন্য সকল তথ্য বাংলায় লিখুন )</div>

                            <div class="stepwizard">
                                <div class="stepwizard-row setup-panel">
                                    <div class="stepwizard-step col-xs-3">
                                        <a href="#step-1" type="button" class="btn btn-success btn-circle">1</a>
                                        <p><small>শিক্ষার্থীর তথ্য</small></p>
                                    </div>
                                    <div class="stepwizard-step col-xs-3">
                                        <a href="#step-2" type="button" class="btn btn-default btn-circle"
                                           disabled="disabled">2</a>
                                        <p><small>পিতামাতার তথ্য</small></p>
                                    </div>
                                    <div class="stepwizard-step col-xs-3">
                                        <a href="#step-3" type="button" class="btn btn-default btn-circle"
                                           disabled="disabled">3</a>
                                        <p><small>অন্যান্য তথ্য</small></p>
                                    </div>
                                    <div class="stepwizard-step col-xs-3">
                                        <a href="#step-4" type="button" class="btn btn-default btn-circle"
                                           disabled="disabled">4</a>
                                        <p><small>আবার পরীক্ষা করুন</small></p>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-primary setup-content" id="step-1">
                                <div class="panel-heading">
                                    <h3 class="panel-title">শিক্ষার্থীর তথ্য</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label for="category" class="col-md-4 control-label"> আয়োজনে</label>
                                        <div class="col-md-6">
                                            <select name="category" id="category" class="form-control">
                                                <option value="রাজ টেক্সটাইল মাধ্যমিক বিদ্যালয়" selected> রাজ টেক্সটাইল মাধ্যমিক বিদ্যালয়</option>
                                                <option value="বর্ণমালা ই-স্কুল"> বর্ণমালা ই-স্কুল</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                                        <label for="name" class="col-md-4 control-label">শিক্ষার্থীর নাম</label>
                                        <div class="col-md-6">
                                            <input id="name" type="text" class="form-control" name="name"
                                                   value="{{ old('name') }}"
                                                   required autofocus>
                                            @if ($errors->has('name'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('name') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                                        <label for="email" class="col-md-4 control-label">শিক্ষার্থীর ই-মেইল</label>

                                        <div class="col-md-6">
                                            <input id="email" type="email" class="form-control" name="email"
                                                   value="{{ old('email') }}" required>

                                            @if ($errors->has('email'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('email') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                                        <label for="password" class="col-md-4 control-label">প্রত্যাশিত পাসওয়ার্ড
                                            লেখ</label>

                                        <div class="col-md-6">
                                            <input id="password" type="password" class="form-control"
                                                   name="password" required>

                                            @if ($errors->has('password'))
                                                <span class="help-block">
                                                    <strong>{{ $errors->first('password') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="password-confirm" class="col-md-4 control-label">পুনরায়
                                            পাসওয়ার্ড লেখ</label>

                                        <div class="col-md-6">
                                            <input id="password-confirm" type="password" class="form-control"
                                                   name="password_confirmation" required>
                                        </div>
                                    </div>
                                    <input id="class2" type="hidden" class="form-control" name="role" value="1">
                                    <div class="form-group">
                                        <label for="class" class="col-md-4 control-label">শ্রেণি</label>

                                        <div class="col-md-6">
                                            <select name="class" id="class" class="form-control">
                                                <option value="৬ষ্ঠ" selected> ৬ষ্ঠ</option>
                                                <option value="৭ম"> ৭ম</option>
                                                <option value="৮ম"> ৮ম</option>
                                                <option value="৯ম"> ৯ম</option>
                                                <option value="১০ম"> ১০ম</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="roll" class="col-md-4 control-label">রোল নন্মর</label>

                                        <div class="col-md-6">
                                            <input id="roll" type="text" class="form-control" name="roll">
                                        </div>
                                    </div>
                                    <button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
                                </div>
                            </div>

                            <div class="panel panel-primary setup-content" id="step-2">
                                <div class="panel-heading">
                                    <h3 class="panel-title">পিতামাতার তথ্য</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label for="group_name" class="col-md-4 control-label">বিভাগ</label>
                                        <div class="col-md-6">
                                            <select name="group_name" id="group" class="form-control">
                                                <option value="প্রযোজ্য নয়" selected> প্রযোজ্য নয়</option>
                                                <option value="বিজ্ঞান"> বিজ্ঞান</option>
                                                <option value="ব্যবসায় শিক্ষা"> ব্যবসায় শিক্ষা</option>
                                                <option value="মানবিক"> মানবিক</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="group_name" class="col-md-4 control-label">শাথা</label>
                                        <div class="col-md-6">
                                            <select name="section" id="section" class="form-control">
                                                <option value="প্রযোজ্য নয়" selected> প্রযোজ্য নয়</option>
                                                <option value="ক"> ক</option>
                                                <option value="খ"> খ</option>
                                                <option value="গ"> গ</option>
                                                <option value="ঘ "> ঘ</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="group_name" class="col-md-4 control-label">সেশন</label>
                                        <div class="col-md-6">
                                            <input id="session" type="text" class="form-control"
                                                   name="session">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="group_name" class="col-md-4 control-label">দক্ষতা</label>
                                        <div class="col-md-6">
                                            <input id="skill" type="text" class="form-control"
                                                   name="skill">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="fathername" class="col-md-4 control-label">বাবার নাম</label>

                                        <div class="col-md-6">
                                            <input id="fathername" type="text" class="form-control"
                                                   name="fathername">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="f_occupation" class="col-md-4 control-label">বাবার পেশা</label>

                                        <div class="col-md-6">
                                            <select name="f_occupation" id="f_occupation" class="form-control">
                                                <option value="শিক্ষক"> শিক্ষক</option>
                                                <option value="ব্যবসা"> ব্যবসা</option>
                                                <option value="দিন মজুর"> দিন মজুর</option>
                                                <option value="সরকারী চাকরী"> সরকারী চাকরী</option>
                                                <option value="চাকরী"> চাকরী</option>
                                                <option value="কৃষক"> কৃষক</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="mothername" class="col-md-4 control-label">মার নাম</label>

                                        <div class="col-md-6">
                                            <input id="mothername" type="text" class="form-control"
                                                   name="mothername">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="m_occupation" class="col-md-4 control-label">মায়ের পেশা</label>

                                        <div class="col-md-6">
                                            <select name="m_occupation" id="m_occupation" class="form-control">
                                                <option value="শিক্ষক"> শিক্ষক</option>
                                                <option value="ব্যবসা"> ব্যবসা</option>
                                                <option value="দিন মজুর"> দিন মজুর</option>
                                                <option value="কৃষক"> কৃষক</option>
                                                <option value="সরকারী চাকরী"> সরকারী চাকরী</option>
                                                <option value="বেসরকারী চাকরী"> চাকরী</option>
                                                <option value="গৃহিনী"> গৃহিনী</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="present_address" class="col-md-4 control-label">বর্তমান
                                            ঠিকানা</label>

                                        <div class="col-md-6">
                                            <input id="present_address" type="text" class="form-control"
                                                   name="present_address">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="parmanent_address" class="col-md-4 control-label">স্থায়ী
                                            ঠিকানা</label>

                                        <div class="col-md-6">
                                            <input id="parmanent_address" type="text" class="form-control"
                                                   name="parmanent_address">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="dob" class="col-md-4 control-label">জন্মতারিখ</label>

                                        <div class="col-md-6">
                                            <input id="dob" type="text" class="form-control" name="dob">
                                        </div>
                                    </div>
                                    <button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
                                </div>
                            </div>

                            <div class="panel panel-primary setup-content" id="step-3">
                                <div class="panel-heading">
                                    <h3 class="panel-title">অন্যান্য তথ্য</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label for="age" class="col-md-4 control-label">বয়স (বছর ও মাস)</label>

                                        <div class="col-md-6">
                                            <input id="age" type="text" class="form-control" name="age">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="religion" class="col-md-4 control-label">ধর্ম</label>

                                        <div class="col-md-6">
                                            <select name="religion" id="religion" class="form-control">
                                                <option value="ইসলাম" selected> ইসলাম</option>
                                                <option value="সনাতন"> সনাতন</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="bloodgroup " class="col-md-4 control-label">রক্ত</label>

                                        <div class="col-md-6">
                                            <select name="bloodgroup" id="bloodgroup" class="form-control">
                                                <option value="জানা নেই"> জানা নেই</option>
                                                <option value="এ পজেটিভ" selected> এ পজেটিভ</option>
                                                <option value="এ নেগেটিভ"> এ নেগেটিভ</option>
                                                <option value="এবি পজেটিভ"> এবি পজেটিভ</option>
                                                <option value="এবি নেগেটিভ"> এবি নেগেটিভ</option>
                                                <option value="বি পজেটিভ"> বি পজেটিভ</option>
                                                <option value="বি নেগেটিভ"> বি নেগেটিভ</option>
                                                <option value="ও পজেটিভ"> ও পজেটিভ</option>
                                                <option value="ও নেগেটিভ"> ও নেগেটিভ</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="hobby " class="col-md-4 control-label">শিক্ষার্থীর শখ</label>

                                        <div class="col-md-6">
                                            <input id="hobby" type="text" class="form-control" name="hobby">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="institute " class="col-md-4 control-label"> স্কুল/প্রতিষ্ঠানের
                                            নাম </label>

                                        <div class="col-md-6">
                                            <select name="institute" id="sibling" class="form-control">
                                                <option value="রাজ টেক্সটাইল মাধ্যমিক বিদ্যালয়" selected> রাজ
                                                    টেক্সটাইল মাধ্যমিক
                                                    বিদ্যালয়
                                                </option>
                                                <option value="বর্ণমালা ই-স্কুল"> বর্ণমালা ই-স্কুল</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="year " class="col-md-4 control-label">বছর</label>

                                        <div class="col-md-6">
                                            <select name="year" id="session" class="form-control">
                                                <option value="2019" selected> ২০১৯</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="mobile " class="col-md-4 control-label">মুঠোফোন</label>

                                        <div class="col-md-6">
                                            <input id="mobile" type="text" class="form-control" name="mobile">
                                        </div>
                                    </div>
                                    <input id="permission" type="hidden" class="form-control" name="permission"
                                           value="0">
                                    <div class="form-group">
                                        <label for="picture" class="col-md-4 control-label">ছবি</label>

                                        <div class="col-md-6">
                                            <input id="picture" onchange="showMyImage(this)" type="file" class="form-control" name="picture">
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <div class="col-md-6 col-md-offset-4">
                                            <button type="submit" class="btn btn-primary">
                                                রেজিট্রেশন...
                                            </button>
                                        </div>
                                    </div>
                                    <button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
                                </div>
                            </div>

                            <div class="panel panel-primary setup-content" id="step-4">
                                <div class="panel-heading">
                                    <h3 class="panel-title">আবার পরীক্ষা করুন</h3>
                                </div>
                                <div class="panel-body">
                                    <div id="printableArea">
                                        <div class="print-preview-box">
                                            <style type="text/css">
                                                .print-preview-box {
                                                    padding: 20px;
                                                    background: #f5f5f5;
                                                    border: 7px double #0c8040;
                                                }

                                                .top-banar {
                                                    text-align: center;
                                                    background: #fff;
                                                    padding: 10px;
                                                }

                                                .top-banar h2 {
                                                    font-size: 20px;
                                                    margin-top: 10px;
                                                    margin-bottom: 0px;
                                                }

                                                .top-banar h3 {
                                                    font-size: 17px;
                                                    margin-top: 10px;
                                                    color: #222;
                                                    margin-bottom: 0px;
                                                }

                                                .personal-info-box {
                                                    padding: 10px;
                                                    background: #fff;
                                                }

                                                .main-content-box {
                                                    padding: 10px;
                                                    background: #fff;
                                                }

                                                .main-content-box h2 {
                                                    font-size: 16px;
                                                    padding-bottom: 8px;
                                                    border-bottom: 1px solid #f5f5f5;
                                                }

                                               .info-text-box p {
    border-bottom: 2px dotted #222;
    margin-bottom: 20px;
}

                                                .info-text-box p b {
    position: relative;
    font-size: 15px;
    font-weight: bold;
    margin-right: 6px;
}
.info-text-box p span{
	font-size: 15px;
}

                                                .info-text-box p b:after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    height: 5px;
    background: #fff;
    bottom: -8px;
}
                                                h2.mar-top-10 {
                                                    margin-top: 10px;
                                                }

                                                .authorised-box {
                                                    margin-top: 30px;
                                                    background: #fff;
                                                }

                                                @media print and (color) {
                                                    * {
                                                        -webkit-print-color-adjust: exact;
                                                        print-color-adjust: exact;
                                                    }
                                                }
                                            </style>
                                            <div class="top-banar">
                                                <img src="{{url('public/images/soty.png')}}" alt="image not fopund" style="height: 50px;" />
                                                <h2>আয়োজনে: <span id="category_show"></span></h2>
                                                <h3>রেজিস্ট্রেশন ফরম</h3>
                                            </div>
                                            <div class="main-content-box">
                                                <h2>শিক্ষার্থীর তথ্য</h2>
                                                <div class="row">
                                                    <div class="col-md-9" style="width: 70%;float: left;">
                                                        <div class="info-text-box">
                                                            <p><b>শিক্ষার্থীর নাম : </b> <span id="name_show"></span></p>
                                                            <p><b>স্কুল/প্রতিষ্ঠানের নাম : </b><span id="sibling_show"></span></p>
                                                        </div>
                                                        <div class="row">
                                                        	<div class="col-md-4 info-text-box">
                                                        		 <p><b>শ্রেণি : </b> <span id="class_show"></span></p>
                                                        	</div>
                                                        	<div class="col-md-4 info-text-box">
                                                        		<p><b>রোল নন্মর : </b> <span id="roll_show"></span></p>
                                                        	</div>
                                                        	<div class="col-md-4 info-text-box">
                                                        		<p><b>শাথা: </b> <span id="section_show"></span></p>
                                                        	</div>
                                                        </div>
                                                        <div class="row">
                                                        	<div class="col-md-4 info-text-box">
                                                        		 <p><b>বিভাগ  : </b> <span id="group_show"></span></p>
                                                        	</div>
                                                        	<div class="col-md-4 info-text-box">
                                                        		<p><b>রক্ত : </b> <span id="bloodgroup_show"></span></p>
                                                        	</div>
                                                        	<div class="col-md-4 info-text-box">
                                                        		<p><b>সেশন : </b> <span id="session_show"></span></p>
                                                        	</div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 text-right" style="width: 30%;float: left;">
                                                         <img id="picture_show" style="height: 180px;"/>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                	<div class="col-md-6 info-text-box">
                                                		<p><b>জন্মতারিখ : </b> <span id="dob_show"></span></p>
                                                	</div>
                                                	<div class="col-md-6 info-text-box">
                                                		<p><b>বয়স (বছর ও মাস): </b> <span id="age_show"></span></p>
                                                	</div>
                                                	<div class="col-md-12 info-text-box">
                                                		<p><b>শিক্ষার্থীর শখ : </b> <span id="hobby_show"></span></p>
                                                	</div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6" style="width: 50%;float: left;">
                                                        <div class="info-text-box">
                                                            <p><b>শিক্ষার্থীর ই-মেইল : </b> <span id="email_show"></span></p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6" style="width: 50%;float: left;">
                                                        <div class="info-text-box">
                                                           
                                                            <p><b>মুঠোফোন: </b> <span id="mobile_show"></span></p>
                                                            
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="info-text-box">
                                                            <p><b>দক্ষতা : </b> <span id="skill_show"></span></p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="clearfix"></div>
                                               <h3 class="text-center" style="margin-top: 30px;">পিতামাতার তথ্য </h3>
                                                <div class="row">
                                                    <div class="col-md-8" style="width: 60%;float: left;">
                                                        <div class="info-text-box">
                                                            <p><b>বাবার নাম : </b> <span id="fathername_show"></span></p>
                                                            <p><b>মার নাম : </b> <span id="mothername_show"></span></p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4" style="width: 40%;float: left;">
                                                        <div class="info-text-box">
                                                            <p><b>বাবার পেশা : </b> <span id="f_occupation_show"></span></p>
                                                            <p><b>মায়ের পেশা : </b> <span id="m_occupation_show"></span></p>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12">
                                                        <div class="info-text-box">
                                                            <p><b>বর্তমান ঠিকানা : </b> <span id="present_address_show"></span></p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="info-text-box">
                                                            <p><b>স্থায়ী ঠিকানা : </b> <span id="parmanent_address_show"></span></p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="authorised-box">
                                                    <div class="conditaion">
                                                        <b>Can someone please clear this doubt so that I don't make the mistake again</b>
                                                    </div>
                                                    <hr>
                                                    <br>
                                                    <br>
                                                    <div class="clearfix"></div>
                                                    <div class="row">
                                                    	<div class="col-md-4 text-center">
                                                    		<b style="
    border-top: 2px dotted #000;
    padding-top: 6px;
    ">শিক্ষার্থীর স্বাক্ষর </b>
                                                    	</div>
                                                    	<div class="col-md-4 text-center">
                                                    		<b style="
    border-top: 2px dotted #000;
    padding-top: 6px;
    ">প্রতিষ্ঠান প্রতিষ্ঠাতার সীল ও স্বাক্ষর </b>
                                                    	</div>
                                                    	<div class="col-md-4 text-center">
                                                    		<b style="
    border-top: 2px dotted #000;
    padding-top: 6px;
    " >পিরচালক ,ষ্টুডেন্ট অব দা ইয়ার</b>
                                                    	</div>
                                                    </div>
                                                    
                                                    
                                                    
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <button style="margin-top: 10px;cursor: pointer;
                                                 border: 0px;
                                                 padding: 5px 15px;
                                                font-weight: bold;" class="btn btn-success pull-right" type="submit">Finish!</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        function showMyImage(fileInput) {
            var files = fileInput.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = /image.*/;
                if (!file.type.match(imageType)) {
                    continue;
                }
                var img=document.getElementById("picture_show");
                img.file = file;
                var reader = new FileReader();
                reader.onload = (function(aImg) {
                    return function(e) {
                        aImg.src = e.target.result;
                    };
                })(img);
                reader.readAsDataURL(file);
            }
        }
        $(document).ready(function () {
            $(".nextBtn").click(function () {
                $('span#category_show').html($('#category').val());
                $('span#name_show').html($('#name').val());
                $('span#email_show').html($('#email').val());
                $('span#class_show').html($('#class').val());
                $('span#roll_show').html($('#roll').val());
                $('span#group_show').html($('#group').val());
                $('span#section_show').html($('#section').val());
                $('span#session_show').html($('#session').val());
                $('span#skill_show').html($('#skill').val());
                $('span#fathername_show').html($('#fathername').val());
                $('span#f_occupation_show').html($('#f_occupation').val());
                $('span#mothername_show').html($('#mothername').val());
                $('span#m_occupation_show').html($('#m_occupation').val());
                $('span#present_address_show').html($('#present_address').val());
                $('span#parmanent_address_show').html($('#parmanent_address').val());
                $('span#dob_show').html($('#dob').val());
                $('span#age_show').html($('#age').val());
                $('span#religion_show').html($('#religion').val());
                $('span#bloodgroup_show').html($('#bloodgroup').val());
                $('span#hobby_show').html($('#hobby').val());
                $('span#sibling_show').html($('#sibling').val());
                $('span#session_show').html($('#session').val());
                $('span#mobile_show').html($('#mobile').val());
                $('span#picture_show').html($('#picture').val());
            });
            var navListItems = $('div.setup-panel div a'),
                allWells = $('.setup-content'),
                allNextBtn = $('.nextBtn');

            allWells.hide();

            navListItems.click(function (e) {
                e.preventDefault();
                var $target = $($(this).attr('href')),
                    $item = $(this);

                if (!$item.hasClass('disabled')) {
                    navListItems.removeClass('btn-success').addClass('btn-default');
                    $item.addClass('btn-success');
                    allWells.hide();
                    $target.show();
                    $target.find('input:eq(0)').focus();
                }
            });

            allNextBtn.click(function () {
                var curStep = $(this).closest(".setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                for (var i = 0; i < curInputs.length; i++) {
                    if (!curInputs[i].validity.valid) {
                        isValid = false;
                        $(curInputs[i]).closest(".form-group").addClass("has-error");
                    }
                }

                if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
            });

            $('div.setup-panel div a.btn-success').trigger('click');
        });
    </script>

@endsection