@extends('layouts.app')

@section('content')
    <link rel="stylesheet" type="text/css"
          href="https://eduguard360.com/frontend/default/assets/frontend/dist/css/smart_wizard.css">
    <link rel="stylesheet" type="text/css"
          href="https://eduguard360.com/frontend/default/assets/frontend/dist/css/smart_wizard_theme_arrows.css">
    <style type="text/css">
        .sw-theme-arrows {
            border-radius: 5px;
            border: 0px;
        }

        .sw-theme-arrows .step-content {
            padding: 15px 10px;
            border: 0px solid #D4D4D4;
            background-color: #FFF;
            text-align: left;
        }

        .sw-theme-arrows > .sw-toolbar-bottom {
            background: #fff;
            border-top: 1px solid #0c8040;
        }

        .box:before {
            display: none;
        }

        .btn-group.mr-2.sw-btn-group-extra {
            display: none;
        }

        .btn-group.mr-2.sw-btn-group {
            float: right;
        }

        button.btn.btn-secondary.sw-btn-next {
            background: #0c8040;
            box-shadow: none;
            color: #fff;
        }
    </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 id="smartwizard">
                                <ul>
                                    <li><a href="#step-1">Step 1<br/><small>This is step description</small></a></li>
                                    <li><a href="#step-2">Step 2<br/><small>This is step description</small></a></li>
                                    <li><a href="#step-3">Step 3<br/><small>This is step description</small></a></li>
                                    <li><a href="#step-4">Preview<br/><small>Preview Your Data</small></a></li>
                                </ul>

                                <div>
                                    <div id="step-1" class="">
                                        <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="raj" selected> রাজ টেক্সটাইল মাধ্যমিক বিদ্যালয়
                                                    </option>
                                                    <option value="bes"> বর্ণমালা ই-স্কুল</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="class" 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>
                                    </div>
                                    <div id="step-2" class="">
                                        <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="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>
                                    </div>
                                    <div id="step-3" class="">
                                        <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" 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>
                                    </div>
                                    <div id="step-4" class="">
                                        <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 {
                                                        margin-bottom: 20px;
                                                        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: red;
                                                        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: 1px solid #ddd;
                                                    }

                                                    .info-text-box p b {
                                                        position: relative;
                                                        font-weight: normal;
                                                    }

                                                    .info-text-box p b:after {
                                                        content: "";
                                                        width: 100%;
                                                        position: absolute;
                                                        left: 0;
                                                        height: 1px;
                                                        background: #fff;
                                                        bottom: -4px;
                                                    }

                                                    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>Student Details</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>
                                                                <p><b>শ্রেণি : </b> <span id="class_show"></span></p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 text-right" style="width: 30%;float: left;">
                                                            <img src="https://lotus-school.eduguard360.com/uploads/webmessage/r1a.jpg" style="height: 110px;">
                                                        </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="group_show"></span></p>
                                                                <p><b>রোল নন্মর : </b> <span id="roll_show"></span></p>
                                                                <p><b>রক্ত : </b> <span id="bloodgroup_show"></span></p>
                                                                <p><b>শিক্ষার্থীর ই-মেইল : </b> <span id="email_show"></span></p>
                                                                <p><b>শিক্ষার্থীর শখ : </b> <span id="hobby_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="dob_show"></span></p>
                                                                <p><b>বছর: </b> <span id="session_show"></span></p>
                                                                <p><b>মুঠোফোন: </b> <span id="mobile_show"></span></p>
                                                                <p><b>বয়স (বছর ও মাস): </b> <span id="age_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="clearfix"></div>
                                                    <h2 class="mar-top-10">Father Details</h2>
                                                    <div class="row">
                                                        <div class="col-md-6" style="width: 50%;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-6" style="width: 50%;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>
                                                    <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>
                                                        <b style="margin-left: 30px; border-top: 1px solid #ddd;float: left">Signarure</b>
                                                        <b style="margin-left: 30px; border-top: 1px solid #ddd;float: right;" >Principal Signarure</b>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <input style="margin-top: 10px;cursor: pointer;
                                                background: #ed1e26;
                                                border: 0px;
                                                color: #fff;
                                                padding: 5px 15px;
                                                font-weight: bold;" type="button" onclick="printDiv('printableArea')"
                                               value="print This Form"/>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript"
            src="https://eduguard360.com/frontend/default/assets/frontend/dist/js/jquery.smartWizard.min.js"></script>
    <script type="text/javascript">
        function printDiv(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;

            window.print();

            document.body.innerHTML = originalContents;
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Step show event
            $("#smartwizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) {
                //alert("You are on step "+stepNumber+" now");
                if (stepPosition === 'first') {
                    $("#prev-btn").addClass('disabled');
                } else if (stepPosition === 'final') {
                    $("#next-btn").addClass('disabled');
                } else {
                    $("#prev-btn").removeClass('disabled');
                    $("#next-btn").removeClass('disabled');
                }
            });
            // Toolbar extra buttons
            var btnFinish = $('<button></button>').text('Finish')
                .addClass('btn btn-info')
                .on('click', function () {
                });
            var btnCancel = $('<button></button>').text('Cancel')
                .addClass('btn btn-danger')
                .on('click', function () {
                    $('#smartwizard').smartWizard("reset");
                });
            // Please note enabling option "showStepURLhash" will make navigation conflict for multiple wizard in a page.
            // so that option is disabling => showStepURLhash: false

            // Smart Wizard 1
            $('#smartwizard').smartWizard({
                selected: 0,
                theme: 'arrows',
                transitionEffect: 'fade',
                showStepURLhash: false,
                toolbarSettings: {
                    toolbarPosition: '',
                    toolbarExtraButtons: [btnFinish, btnCancel]
                }
            });
        });
    </script>

@endsection