<?php
session_start();
if(isset($_SESSION['username'])){

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta charset="utf-8" />
    <?php include('includes/styles.php'); ?>
    <title>Add Member | <?php echo $church_name; ?></title>

</head>

<?php

?>
<style>
    ul.parsley-errors-list.filled {
        padding: 0;
        list-style: none;
        color: red;
        padding-right: 20px;
        position: relative;
        float: right;
    }


    span.select2.select2-container.select2-container--default {
        width: 100% !important;
    }


    ul#parsley-id-11, ul#parsley-id-9, ul#parsley-id-13, ul#parsley-id-25{
        animation:signup-response 0.5s 1;
        -webkit-animation:signup-response 0.5s 1;
        animation-fill-mode: forwards;

        animation-delay:5s;
        -webkit-animation-delay:5s; /* Safari and Chrome */
        -webkit-animation-fill-mode: forwards;

    }

    @keyframes signup-response{
        from {opacity :1;}
        to {opacity :0;  height: 0px;}
    }

    @-webkit-keyframes signup-response{
        from {opacity :1;}
        to {opacity :0;  height: 0px;}
    }
</style>
<body class="fixed-header dashboard">
<?php include('includes/sidebar.php'); ?>


<div class="page-container ">
    <?php include('includes/header.php'); ?>
    <!-- END HEADER -->
    <!-- START PAGE CONTENT WRAPPER -->
    <div class="page-content-wrapper ">
        <!-- START PAGE CONTENT -->
        <div class="content ">
            <!-- START CONTAINER FLUID -->
            <div class=" container-fluid   container-fixed-lg">
                <!-- START BREADCRUMB -->
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="member.php">All Members</a></li>
                    <li class="breadcrumb-item active">Add Member</li>
                </ol>
                <!-- END BREADCRUMB -->
                <div class="row m-t-10">
                    <div class="col-xl-8 col-lg-8">
                        <!-- START card -->
                        <div class="card">
                            <div class="card-header ">
                                <div class="card-title">Form A
                                </div>
                            </div>
                            <div class="card-body">
                                <form action="" class="" method="post" id="member-add">
                                    <h3 style="margin-bottom: 0" class="mw-80">Enter Member's Data Below</h3>
                                    <p class="mw-80 m-b-50">All fields marked <span style="color: red">*</span> must be filled

                                        <!-- <div class="form-group form-group-default required disabled">
                                            <label>Serial Number</label>
                                            <input readonly type="text" class="form-control" id="serial" required name="serial" value="<?php echo $conn->generate_serial(); ?>">
                                        </div> -->

                                        <div class="form-group form-group-default required">
                                            <label>First Name, Other Names</label>
                                            <input type="text" class="form-control" id="firstname" required name="firstname">
                                        </div>

                                        <div class="form-group form-group-default required">
                                            <label>Surname</label>
                                            <input type="text" class="form-control" id="surname" required name="surname">
                                        </div>

                                        
                                        <div class="form-group form-group-default required">
                                        <label>Amount</label>
                                        <input type="text" oninput="myFunction()" id="postcontent" class="autonumeric form-control" name="null" required>
                                        </div>
                                        
                                        <textarea hidden id="demo" name="amount" rows="5"></textarea>

                                        <div class="form-group form-group-default form-group-default-select2 required">
                                            <label class="">Sex</label>
                                            <select name="sex" id="sex" data-parsley-trigger="keyup" class="full-width select2-hidden-accessible" required data-placeholder="Select Sex" data-init-plugin="select2" aria-hidden="true">
                                                <option value="">Select Sex</option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                            </select>
                                        </div>



                                        <div class="form-group form-group-default form-group-default-select2 required">
                                            <label class="">District</label>
                                            <?php
                                            //fetch all classes
                                            $sql = "SELECT * FROM districts";
                                            $conn->query($sql);
                                            $details = $conn->fetchMultiple();
                                            ?>
                                            <select name="district" id="districtID"  class="full-width select2-hidden-accessible" required  data-placeholder="Select District" data-init-plugin="select2" aria-hidden="true">
                                                <option value="">Select District</option>
                                                <?php
                                                if($conn->rowCount() > 0){
                                                    foreach ($details as $district) {
                                                        ?>
                                                        <option value="<?php echo $district->id; ?>">
                                                            <?php echo $district->name; ?></option>
                                                        <?php
                                                    }
                                                }else {
                                                    ?>
                                                <option value="">No District Found</option><?php
                                                }

                                                ?>
                                            </select>
                                        </div>



                                        <div class="form-group form-group-default input-group hidden">
                                            <div class="form-input-group date">
                                                <label class="fade">Registration Date & Time</label>
                                                <input readonly type="text" class="form-control" value="<?php echo date('d-m-Y H:i:s'); ?>" placeholder="Pick a date" id="reg_date" name="reg_date">
                                            </div>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="pg-icon">calendar</i></span>
                                            </div>
                                        </div>

                                        <div class="form-group form-group-default input-group disabled">
                                            <div class="form-input-group date">
                                                <label class="fade">Registration Date & Time</label>
                                                <input readonly type="text" class="form-control" value="<?php echo date('l, jS F, Y h:i A'); ?>"  placeholder="Pick a date" id="null" name="null">
                                            </div>
                                            
                                        </div>

                                        <div class="form-group form-group-default required">
                                            <label>Phone Number</label>
                                            <input type="tel" name="phone" id="phone" class="form-control" maxlength="11"
                                                   data-parsley-type="number" data-parsley-length="[11,11]" pattern="\d{11}" required>
                                        </div>

                                        <!-- <div class="form-group form-group-default">
                                            <label>Email Address</label>
                                            <input type="email" name="email" id="email" class="form-control">
                                        </div> -->

                                        <div class="form-group form-group-default">
                                            <label>Occupation</label>
                                            <input type="text" name="occupation" id="occupation" class="form-control">
                                        </div>

                                        <div class="form-group form-group-default required">
                                            <label>Church Name</label>
                                            <input type="text" name="church" id="church" class="form-control" required>
                                        </div>

                                    
                                            <div class="form-group form-group-default disabled">
                                                <label class="">Year of Conference</label>
                                                <input type="text" name="conyear" id="conyear" value="<?php echo date("Y"); ?>" class="form-control" readonly>
                                            </div>

                                            <div class="form-group form-group-default input-group required" id="bible">
                                        <div class="form-input-group">
                                            <label>Bible Study Group </label>
                                            <input type="text" name="bible" id="bible" class="form-control adm" placeholder="Click button to generate bible study group number" required>
                                        </div>
                                        <div class="input-group-append ">
                                            <a href="javascript:;" onclick="bib()" class="input-group-text primary"><i class="pg-icon">refresh_alt</i></a>
                                        </div>
                                        </div>

                                            
                                       

                                    
  
          
                                      <div class="row m-t-50">
                                          <div class="col-xl-6">
                                              <p class="small-text hint-text">Note: Please crosscheck all data provided before submitting to database </p>
                                          </div>
                                          <div class="col-xl-6">
                                              <input aria-label="" type="submit" value="Add Member" name="add_member" id="submit" class="btn btn-primary pull-right btn-lg btn-block btn-animated from-left">
                                                  
                                          </div>
                                      </div>


                                    <div id="success-msg"></div>

                                </form>
                            </div>
                        </div>
                        <!-- END card -->
                    </div>
                    <div class="col-lg-4">
                        <div id="card-linear-color" class="card card-default">
                            <div class="card-header  ">
                                <div class="card-title">Instructions
                                </div>
                                <div class="card-controls">
                                    <ul>
                                        <li><a href="#" class="card-collapse" data-toggle="collapse"><i class="card-icon card-icon-collapse"></i></a>
                                        </li>
                                        <li><a href="#" id="newsreload" onclick="loadDoc()" class="card-refresh" data-source="add-member-new.php" data-toggle="refresh"><i class="card-icon card-icon-refresh"></i></a>
                                        </li>
                                        <li><a href="#" class="card-close" data-toggle="close"><i class="card-icon card-icon-close"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-body" id="news">
                                <?php include('notice.php'); ?>
                            </div>
                        </div>
                    </div>


                </div>
                </div>
            </div>
            <!-- END CONTAINER FLUID -->
        </div>
        <!-- END PAGE CONTENT -->


        <?php include('includes/foot.php'); ?>
    </div>
    <!-- END PAGE CONTENT WRAPPER -->
</div>





<!-- END QUICKVIEW-->

<?php include('includes/footer.php'); ?>

<script>
    $('[data-toggle="tooltip"]').tooltip();
</script>

<script>
    function bib() {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            document.getElementById("bible").innerHTML = this.responseText;
        }
        xhttp.open("GET", "admission-number.php", true);
        xhttp.send();
    }
</script>

<script>
 

function myFunction() 
{
var x = document.getElementById("postcontent").value;
document.getElementById("demo").innerHTML = x.replace(/[.,]+/g, '');
}
</script>


<script>
    $('#member-add');
    $('#member-add').on('submit', function(event){
        event.preventDefault();
        if ($('#member-add').parsley().isValid()){
            $.ajax({
                url: "<?php echo $base_url; ?>process-add-member.php",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                beforeSend: function () {
                    $('#submit').attr('disabled', 'disabled');
                    $('#submit').val('Updating Details, Please Wait...');

                },

                success:function (data) {
                    $('#member-add').parsley().reset();
                    $('#submit').attr('disabled', false);
                    $('#submit').val('Add Member');
                    $('#success-msg').html(data);
                }
            })
        }

    })
</script>

<script>
    function loadDoc() {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            document.getElementById("news").innerHTML = this.responseText;
        }
        xhttp.open("GET", "notice.php", true);
        xhttp.send();
    }

    setTimeout(function () {document.getElementById("newsreload").click();}, 2000);
</script>



<script>
    $(function() {
        setTimeout(function() { $("#notify").fadeOut(1500); }, 10000)

    })
</script>

<?php
}else{
    ?>
    
  <?php include('session.php'); ?>

    <?php

}

?>