<?php include_once('header.php'); ?>
<?php
$action = '';
$member_id = '';
if (isset($_GET['action']) && isset($_GET['member_id'])) {
    $action = $_GET['action'];
    $member_id = $_GET['member_id'];
}
?>
<style type="text/css">
    .error {
        border-color: #ecbeb6;
        color: #b55351;
        text-transform: capitalize;
        text-align: left !important;
    }

    #error {
        width: 100%;
    }

    .alert {
        width: 100%;
        text-align: left;
    }
</style>
<div class="container mt-3">
    <div class="card-deck mb-3 text-center">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 mt-3 border-bottom" style="width: 100%;">
            <h1 class="h2">Leadership - Management</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
                <div class="btn-group mr-2">
                    <a class="btn btn-sm btn-outline-secondary" href="board_members.php">Board Members</a>
                </div>
            </div>
        </div>

        <div id="error"></div>
        <!-- new user section -->

        <div class="row text-left">
            <div id="live_data" class="col-md-8"></div>
            <div class="col-md-4">
                <?php if($action == ''){ ?>
                <h4 style="text-align: left;">Add Member</h4><br>
                <div id="err"></div>
                <form class="needs-validation" style="text-align: left;" id="add-resource" method="post" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> Title</label>
                            <input type="text" class="form-control" name="title" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left">Select Image(442x540)</label>
                            <input type="file" class="form-control" id="file" name="file" required>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> Facebook</label>
                            <input type="text" class="form-control" name="fb" placeholder="Facebook Profile">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> Twitter</label>
                            <input type="text" class="form-control" name="twitter" placeholder="Twitter Profile">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> LinkedIn</label>
                            <input type="text" class="form-control" name="linkedin" placeholder="LinkedIn Profile">
                        </div>
                        <div class="col-md-8 mb-3">
                            <input type="hidden" name="type" value="Management">
                            <button class="btn btn-primary btn-md form-control" type="submit" name="add_member" id="add_resource" style="float: left; margin-right: 5px;">
                                Save Member
                            </button>
                        </div>
                    </div>
                </form>
                <?php } else if($action == 'update'){ ?>
                <h4 style="text-align: left;">Update Member Details <a href="management.php" class="btn btn-primary btn-sm" style="float:right;"> Add Member</a></h4><br>
                <?php 
                    $member = $con->getRows('leadership', array('where' => 'leader_id="' . $member_id . '"', 'return_type' => 'single'));
                    if(!empty($member)){
                ?>
                <div id="err"></div>
                <form class="needs-validation" style="text-align: left;" id="add-resource" method="post" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> Name</label>
                            <input type="text" class="form-control" name="name" value="<?=$member['name']?>">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> Title</label>
                            <input type="text" class="form-control" name="title" value="<?=$member['title']?>">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left">Update Image(442x540)</label>
                            <input type="file" class="form-control" id="file" name="image">
                            <input type="hidden" name="current_image" value="<?=$member['image']?>">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> Facebook</label>
                            <input type="text" class="form-control" name="fb" value="<?=$member['facebook']?>">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> Twitter</label>
                            <input type="text" class="form-control" name="twitter" value="<?=$member['twitter']?>">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="firstName" style="text-align:left; float:left"> LinkedIn</label>
                            <input type="text" class="form-control" name="linkedin" value="<?=$member['linkedin']?>">
                        </div>
                        <div class="col-md-8 mb-3">
                            <input type="hidden" name="type" value="Management">
                            <input type="hidden" name="member_id" value="<?=$member['leader_id']?>">
                            <button class="btn btn-primary btn-md form-control" type="submit" name="update_member" id="add_resource" style="float: left; margin-right: 5px;">
                                Save Member
                            </button>
                        </div>
                    </div>
                </form>

                <?php } } ?>
            </div>
            

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

</div>


<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>
    window.jQuery || document.write('<script src="../../js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="../../js/vendor/popper.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/vendor/holder.min.js"></script>
<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../js/validation.min.js"></script>
<script src="../../js/tables/jquery.dataTables.js"></script>
<script src="../../js/tables/dataTables.bootstrap4.js"></script>

<!--  summernote JS
        ============================================ -->
<script src="../../js/summernote/summernote-updated.min.js"></script>
<script src="../../js/summernote/summernote-active.js"></script>


<script>
    function fetchData() {
        var type = "Management";
        $.ajax({
            url: "select-members.php",
            method: "GET",
            data: {
                type: type
            },
            success: function(data) {
                $('#live_data').html(data);
            }
        });
    }
    $(document).ready(function() {

        //loads system users
        var type = "Management";
        $.ajax({
            url: "select-members.php",
            method: "GET",
            data: {
                type: type
            },
            success: function(data) {
                $('#live_data').html(data);
            }
        });

        $("#add-resource").validate({
            rules: {
                title: {
                    required: true
                },
                file: {
                    required: true
                },
                name: {
                    required: true
                }
            },
            messages: {
                title: "Please enter member title",
                file: "Please select member image",
                name: "Please enter member name"

            },
            submitHandler: saveFile
        });
        /* validation */

        /* login submit */
        function saveFile() {
            //var data = $("#add-resource").serialize();
            var formData = $("#add-resource").submit(function() {
                return;
            });
            var formData = new FormData(formData[0]);

            $.ajax({

                type: 'POST',
                url: 'sql_statements.php',
                data: formData,
                beforeSend: function() {
                    $("#err").fadeOut();
                    $("#add_resource").html('<i class="fa fa-spin fa-spinner"></i> Saving Member ...');
                },
                success: function(response) {
                    //alert(response);

                    //if the response returns true
                    if (response == 1) {
                        $("#err").fadeIn(1000, function() {
                            $("#err").html('<div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button><span class="icon icon-ok-circle"></span> Member details has been saved.</div>');
                        });
                        $("#add-resource")[0].reset();
                        $("#err").delay(6000).fadeOut(function() {});
                        $("#add_resource").html('Save Member');

                    } else if (response == 2) {
                        $("#err").fadeIn(1000, function() {
                            $("#err").html('<div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button>There was an error saving a member, Please try again!</div>');
                            $("#add_resource").html('Save Member');
                        });
                        $("#err").delay(6000).fadeOut(function() {});
                    } else if (response == 3) {
                        $("#err").fadeIn(1000, function() {
                            $("#err").html('<div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button> The uploaded member image is not a valid, it should be of type jpeg, jpg, png</div>');
                            $("#add_resource").html('Save Member');
                        });
                        $("#err").delay(6000).fadeOut(function() {});
                    }
                    fetchData()

                },
                contentType: false,
                processData: false,
                cache: false
            });
            return false;
        }
        /* login submit */
    });


    //delete user details
    $(document).on('click', '.btn_delete', function() {
        var id = $(this).data("id3");
        var action = "delete_member";
        //alert(" Resource ID:"+id);
        if (confirm("Are you sure you want to remove this member?")) {
            $.ajax({
                url: "sql_statements.php",
                method: "POST",
                data: {
                    id: id,
                    action: action
                },
                dataType: "text",
                success: function(data) {
                    if (data == 1) {
                        $("#error").fadeIn(1000, function() {
                            $("#error").html('<div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button><span class="icon icon-ok-circle"></span>&nbsp; A member has been deleted!</div>');
                        });
                        $("#error").delay(6000).fadeOut(function() {});
                    }

                    if (data == 2) {
                        $("#error").fadeIn(1000, function() {
                            $("#error").html('<div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button><i class="icon wb-warning" aria-hidden="true"></i> There was an error deleting the member, please try again.</div>');
                            $("#new_make").html('&nbsp; Add Make');
                        }); //Your username/password entered doesn't match
                        $("#error").delay(6000).fadeOut(function() {});
                    }
                    fetchData();
                }
            });
        }
    });
    Holder.addTheme('thumb', {
        bg: '#55595c',
        fg: '#eceeef',
        text: 'Thumbnail'
    });
</script>
</body>

</html>