<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<div class="row align-items-center">
    <div class="col-sm-6">
        <div class="page-title-box">
          <!--   <h4 class="font-size-18">Pages</h4> -->

        </div>
    </div>

    <div class="col-sm-6">
        <div class="float-right d-none d-md-block">

            <!-- <a class="btn btn-primary waves-effect waves-light" href="<?php echo base_url(); ?>Pages/get_pages">
                <i class="mdi mdi-plus mr-2"></i> 
            </a> -->
        </div>
    </div>
</div>
<br>
<?php
if (validation_errors()) {
?>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <?php echo validation_errors(); ?>
    </div>
<?php
}
?>
<?php if ($this->session->flashdata('check_email_alert_danger')) { ?>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <strong>Success!</strong> <?php echo $this->session->flashdata('check_email_alert_danger'); ?>
    </div>
<?php } ?>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Faculty create</h4><bR>
                <form action="<?php echo base_url(); ?>ApplicationController/store" method="post" enctype="multipart/form-data" id="registration_form">
                    
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label class="required">Name</label>
                            <input type="text" class="form-control" name="facultyname" placeholder="name" required>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="required">Mobile</label>
                            <input name="mobile" id="mobile" type="number" class="form-control" placeholder="Mobile_number" value="<?php echo (isset($_POST[''])) ? $_POST[''] : ''; ?>" required>
                            <?php if ($this->session->flashdata('mobile')) : ?>
                                <span style="color: red;"><?= $this->session->flashdata('mobile') ?></span>
                                <?php unset($_SESSION['mobile']); ?>
                            <?php endif;  ?>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="required">Email</label>
                            <input name="email" id="email" type="email" class="form-control" placeholder="Email" value="<?php echo (isset($_POST[''])) ? $_POST[''] : ''; ?>" required>
                            <?php if (form_error('email')) { ?>
                                <div id="summernote" class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <?php echo form_error('email'); ?>
                                </div>
                            <?php } ?>
                        </div>

                        <div class="form-group col-md-4">
                                        <label for="login_pass" class="form_label">Password</label>
                                        <div class="control">
                                            <input type="password" name="password" id="login_pass" class="form-control password" autocomplete="off" placeholder="Password" />

                                            <span class="input-group-text">
                                                <i class="eye showPwd1"></i>
                                            </span>

                                            <?php if (form_error('password')) {?>
                                            <div class="alert alert-danger alert-dismissible fade show pb-0 mt-1" role="alert">
                                                <?php echo form_error('password'); ?>
                                            </div>
                                        <?php }?>
                                            

                                        </div>
                                    </div>


                                    <div class="form-group col-md-4">
                                        <label for="login_pass" class="form_label">confirm Password</label>
                                        <div class="control">
                                            <!-- <input type="password" name="Password" id="login_pass" class="form-control password" autocomplete="off" placeholder="Enter password" /> -->
                                            <input type="password" name="c_password" id="login_pass2" class="form-control password2" autocomplete="off" placeholder="Confirm password" />
                                            
                                            <span class="input-group-text">
                                                <i class="eye showPwd2"></i>
                                            </span> 

                                            <?php if (form_error('c_password')) {?>
                                            <div class="alert alert-danger alert-dismissible fade show pb-0 mt-1" role="alert">
                                                <?php echo form_error('c_password'); ?>
                                            </div>
                                        <?php }?>

                                        </div>
                                    </div>


                        <!-- <div class="form-group col-md-4">
                            <label class="required">Password</label>
                            <input name="Password" id="Password" type="psw" class="form-control" placeholder="Password" value="<?php echo (isset($_POST[''])) ? $_POST[''] : ''; ?>" required>
                            <?php if (form_error('Password')) { ?>
                                <div id="summernote" class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <?php echo form_error('Password'); ?>
                                </div>
                            <?php } ?>
                        </div>
                        <div class="form-group col-md-4">
                            <label class="required">Confirm Password</label>
                            <input name="confirm_password" id="confirm_password" type="psw" class="form-control" placeholder="confirm_password" value="<?php echo (isset($_POST[''])) ? $_POST[''] : ''; ?>" required>
                            <?php if (form_error('confirm_password')) { ?>
                                <div id="summernote" class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <?php echo form_error('confirm_password'); ?>
                                </div>
                            <?php } ?>
                        </div> -->

                        <div class="form-group mt-3 col-md-4">
                            <div class="">
                                <button name="submit" type="submit" class="btn btn-primary waves-effect waves-light mr-1">
                                    Submit
                                </button>
                                <a href="<?php echo base_url('ApplicationController/faculty'); ?>" class="btn btn-secondary waves-effect">Cancel </a>
                            </div>
                        </div>
                    </div>
                    
                </form>

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

<body>
    <script>
        $(document).ready(function() {
            $('#summernote').summernote();

            
    });
    $(document).ready(function() {
        $('#registration_form').validate({
            rules: {
                facultyname: {
                    required: true
                },
                mobile: {
                    required: true,
                    number: true
                },
                email: {
                    required: true,
                    email: true
                },
                Password: {
                    required: true
                },
                confirm_password: {
                    required: true,
                    equalTo: "#Password" // Ensure it matches the password field
                }
            },
            messages: {
                facultyname: {
                    required: "Please enter your name"
                },
                mobile: {
                    required: "Please enter your mobile number",
                    number: "Please enter a valid mobile number"
                },
                email: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                Password: {
                    required: "Please enter a password"
                },
                confirm_password: {
                    required: "Please confirm your password",
                    equalTo: "Passwords do not match"
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
        });


    let pwd1 = document.getElementById('login_pass'),
            eye1 = document.querySelector('.showPwd1');

            eye1.addEventListener('click', function() {
            toggleType1();
        })

      
        function toggleType1() {
            
            if (eye1.classList.contains('closed')) {
                pwd1.type = 'password';
            } else {
                pwd1.type = 'text';
            }
            eye1.classList.toggle('closed');
            }
            //end of password toggle


            //start of confirm password toggle
            let pwd2 = document.getElementById('login_pass2');
            eye2 = document.querySelector('.showPwd2');

            eye2.addEventListener('click', function() {
            toggleType2();
            })


            function toggleType2() {

            if (eye2.classList.contains('closed')) {
                pwd2.type = 'password';
            } else {
                pwd2.type = 'text';
            }
            eye2.classList.toggle('closed');
            }
    </script>
</body>
<style type="text/css">
    .required:after {
        content: " *" !important;
        color: red !important;
    }
</style>