<?php
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);
// error_reporting(E_ALL);

include "pin/header.php";
include "pin/sidenav.php";

$user_id = $_SESSION['user_id'];
$emp_id = $_SESSION['emp_id'];
$user_role = $_SESSION['user_role'];
$user_name = $_SESSION['user_name'];


$edit = mysqli_fetch_assoc(mysqli_query($db, "SELECT * FROM `password_management` WHERE `id`='$_GET[edit]' "));

$passwords = json_decode($edit['passwords'], true) ?? [];

?>


<style>
    /* for resume editable */
    [contenteditable="true"] {
        min-width: 5%;
        max-width: 100%;
        cursor: text;
    }

    [contenteditable="true"]:focus,
    [contenteditable="true"]:hover {
        outline: 1px dashed #000;
        cursor: text;
    }

    [contenteditable="true"][placeholder]:empty::before {
        content: attr(placeholder);
        color: #9197a3;
        font-weight: 100;
        padding: 3px;
    }
</style>

<div class="content-page">
    <div class="content">
        <div class="container-fluid">

            <div class="mt-5"></div>

            <form  id="password_manager" enctype="multipart/form-data" class="parsley-examples">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card mb-3">
                            <div class="card-body p-3">
                                <div class="w-100 d-flex justify-content-between align-items-center">
                                    <h4 class="m-0">
                                        Add Password
                                    </h4>
                                    <?php if (!isset($edit['id'])) { ?>
                                        <div>
                                            <button type="button" class="btn btn-success add_section" style="height:fit-content; padding-top: 0.5rem; padding-bottom: 0.3rem;" title="Add More Password"><i class="uil uil-plus"></i></button>
                                        </div>
                                    <?php } ?>
                                </div>
                            </div>
                        </div> <!-- end card -->

                        <div class="all_sections row">

                            <div class="section mb-3 col-md-6">

                                <?php
                                if (sizeof($passwords) > 0) {
                                    foreach ($passwords as $key => $pass) {
                                ?>
                                        <div class="card pt-3 position-relative">
                                            <div class="bg-danger rounded-circle position-absolute remove_section" style="padding: 4px 5px 1px 5px; top:-5px; right:-5px; cursor:pointer;" title="Remove Password Section"><i class="uil uil-times text-white"></i></div>
                                            <div class="card-body">
                                                <div class="w-100 d-flex justify-content-between align-items-center">
                                                    <h6 class="m-0 section_heading" contenteditable="true" placeholder="Password Name"><?php echo $key; ?></h6>
                                                    <div>
                                                        <button type="button" class="btn btn-sm btn-primary add_field" style="height:fit-content; padding-top: 0.5rem; padding-bottom: 0.3rem;">Add Field</button>
                                                    </div>
                                                </div>
                                                <hr class="mt-1">
                                                <div class="row">
                                                    <?php foreach ($pass as $k => $v) { ?>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <div class="d-flex justify-content-between align-items-center">
                                                                    <label for="" class="label_heading" contenteditable="true" placeholder="Field Title"><?php echo $k; ?></label>
                                                                    <div class="bg-danger rounded-circle remove_field" style="padding: 0px 3px; cursor:pointer;" title="Remove Field"><i class="uil uil-times text-white" style="font-size: 12px;"></i></div>
                                                                </div>
                                                                <input type="text" class="form-control label_value" name="label_value[]" id="" placeholder="Enter <?php echo $k; ?>" value="<?php echo $v; ?>">
                                                            </div>
                                                        </div>
                                                    <?php } ?>
                                                </div>
                                            </div>
                                        </div>
                                    <?php }
                                } else { ?>
                                    <div class="card pt-3 position-relative">
                                        <div class="bg-danger rounded-circle position-absolute remove_section" style="padding: 4px 5px 1px 5px; top:-5px; right:-5px; cursor:pointer;" title="Remove Password Section"><i class="uil uil-times text-white"></i></div>
                                        <div class="card-body">
                                            <div class="w-100 d-flex justify-content-between align-items-center">
                                                <h6 class="m-0 section_heading" contenteditable="true" placeholder="Password Name"></h6>
                                                <div>
                                                    <button type="button" class="btn btn-sm btn-success add_field" style="height:fit-content; padding-top: 0.5rem; padding-bottom: 0.3rem;" title="Add More Field"><i class="uil uil-plus"></i></button>
                                                </div>
                                            </div>
                                            <hr class="mt-1">
                                            <div class="row">

                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <label for="" class="label_heading" contenteditable="true" placeholder="Field Title">Username</label>
                                                            <div class="bg-danger rounded-circle remove_field" style="padding: 0px 3px; cursor:pointer;" title="Remove Field"><i class="uil uil-times text-white" style="font-size: 12px;"></i></div>
                                                        </div>
                                                        <input type="text" class="form-control label_value" name="label_value[]" id="" placeholder="Enter Username">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <label for="" class="label_heading" contenteditable="true" placeholder="Field Title">Password</label>
                                                            <div class="bg-danger rounded-circle remove_field" style="padding: 0px 3px; cursor:pointer;" title="Remove Field"><i class="uil uil-times text-white" style="font-size: 12px;"></i></div>
                                                        </div>
                                                        <input type="text" class="form-control label_value" name="label_value[]" id="" placeholder="Enter Password">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>

                        </div>



                        <div class="form-group text-right mb-0 mt-4">
                            <?php if (isset($edit['id'])) { ?>
                                <input type="hidden" name="password_edit_id" id="password_edit_id" value="<?php echo $edit['id']; ?>">
                                <button class="btn btn-primary mr-1" id="update_password" name="update_password" type="submit">Update Password</button>
                            <?php } else { ?>
                                <button class="btn btn-primary mr-1" id="add_password" name="add_password" type="submit">Save Password</button>
                            <?php } ?>
                            <!-- <button type="reset" class="btn btn-secondary">Cancel</button> -->
                        </div>


                    </div>
                    <!-- end col -->

                </div>
                <!-- end row -->
            </form>


        </div>
    </div> <!-- content -->

</div>

<?php
include "pin/footer.php";
?>

<script>
    $(document).on("keyup", ".label_heading", function() {
        let next_element = $(this).parent().next();
        let content = $(this).text();
        if (content == '') {
            $(next_element).attr("placeholder", `Enter ___`)
        } else {
            $(next_element).attr("placeholder", `Enter ${content}`)
        }
        // console.log(content);
    });

    $(document).on("click", ".add_field", function() {
        let row = $(this).parent().parent().next().next();
        $(row).append(`<div class="col-md-6">
                                <div class="form-group">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <label for="" class="label_heading" contenteditable="true" placeholder="Field Title"></label>
                                        <div class="bg-danger rounded-circle remove_field" style="padding: 0px 3px; cursor:pointer;" title="Remove Field"><i class="uil uil-times text-white" style="font-size: 12px;"></i></div>
                                    </div>
                                    <input type="text" class="form-control label_value" name="" id="" placeholder="Enter ___">
                                </div>
                            </div>`);
    });
    $(document).on("click", ".remove_field", function() {
        $(this).parent().parent().parent().remove();
    });

    $(document).on("click", ".add_section", function() {
        let body = $(".all_sections");

        $(body).append(`<div class="section mb-3 col-md-6">
                            <div class="card pt-3 position-relative">
                                <div class="bg-danger rounded-circle position-absolute remove_section" style="padding: 4px 5px 1px 5px; top:-5px; right:-5px; cursor:pointer;" title="Remove Password Section"><i class="uil uil-times text-white"></i></div>
                                <div class="card-body">
                                    <div class="w-100 d-flex justify-content-between align-items-center">
                                        <h6 class="m-0 section_heading" contenteditable="true" placeholder="Password Name"></h6>
                                        <div>
                                            <button type="button" class="btn btn-sm btn-success add_field" style="height:fit-content; padding-top: 0.5rem; padding-bottom: 0.3rem;" title="Add More Field"><i class="uil uil-plus"></i></button>
                                        </div>
                                    </div>
                                    <hr class="mt-1">
                                    <div class="row">

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <label for="" class="label_heading" contenteditable="true" placeholder="Field Title">Username</label>
                                                    <div class="bg-danger rounded-circle remove_field" style="padding: 0px 3px; cursor:pointer;" title="Remove Field"><i class="uil uil-times text-white" style="font-size: 12px;"></i></div>
                                                </div>
                                                <input type="text" class="form-control label_value" name="label_value[]" id="" placeholder="Enter Username">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <label for="" class="label_heading" contenteditable="true" placeholder="Field Title">Password</label>
                                                    <div class="bg-danger rounded-circle remove_field" style="padding: 0px 3px; cursor:pointer;" title="Remove Field"><i class="uil uil-times text-white" style="font-size: 12px;"></i></div>
                                                </div>
                                                <input type="text" class="form-control label_value" name="label_value[]" id="" placeholder="Enter Password">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>`);
    });
    $(document).on("click", ".remove_section", function() {
        let body = $(this).parent().parent().remove();
    });

    $("#password_manager").submit(function(event) {
        event.preventDefault();

        let password_edit_id = $("#password_edit_id").val();

        let main_obj = [];
        let section = $(".section");

        $(section).each(function(index, element) {
            let s_heading = $(element).find('.section_heading').text();

            let s_obj = {};
            let label_heading = $(element).find('.label_heading');
            $(label_heading).each(function(index, ele) {
                let l_heading = $(ele).text();
                let l_value = $(ele).parent().next().val();

                s_obj[l_heading] = l_value;
            });
            main_obj.push({
                [s_heading]: s_obj
            });
        });

        console.log(main_obj);

        $.ajax({
            url: "fun/function",
            type: "POST",
            data: {
                password_manager: main_obj,
                password_edit_id: password_edit_id
            },
            success: function(res) {
                console.log(res);
                if (res == 1) {
                    successMessage('Password Saved Successfully!', '<?php echo $user_name; ?>');
                    $(".all_sections").html(`<div class="section mb-3 col-md-6">
                                        <div class="card pt-3 position-relative">
                                            <div class="bg-danger rounded-circle position-absolute remove_section" style="padding: 4px 5px 1px 5px; top:-5px; right:-5px; cursor:pointer;" title="Remove Password Section"><i class="uil uil-times text-white"></i></div>
                                            <div class="card-body">
                                                <div class="w-100 d-flex justify-content-between align-items-center">
                                                    <h6 class="m-0 section_heading" contenteditable="true" placeholder="Password Name"></h6>
                                                    <div>
                                                        <button type="button" class="btn btn-sm btn-success add_field" style="height:fit-content; padding-top: 0.5rem; padding-bottom: 0.3rem;" title="Add More Field"><i class="uil uil-plus"></i></button>
                                                    </div>
                                                </div>
                                                <hr class="mt-1">
                                                <div class="row">

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <label for="" class="label_heading" contenteditable="true" placeholder="Field Title">Username</label>
                                                                <div class="bg-danger rounded-circle remove_field" style="padding: 0px 3px; cursor:pointer;" title="Remove Field"><i class="uil uil-times text-white" style="font-size: 12px;"></i></div>
                                                            </div>
                                                            <input type="text" class="form-control label_value" name="label_value[]" id="" placeholder="Enter Username">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <label for="" class="label_heading" contenteditable="true" placeholder="Field Title">Password</label>
                                                                <div class="bg-danger rounded-circle remove_field" style="padding: 0px 3px; cursor:pointer;" title="Remove Field"><i class="uil uil-times text-white" style="font-size: 12px;"></i></div>
                                                            </div>
                                                            <input type="text" class="form-control label_value" name="label_value[]" id="" placeholder="Enter Password">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`);
                } else {
                    failedMessage('Some Error Occurred, Please Try after some time.', '<?php echo $user_name; ?>');
                }
            }
        });

    });
</script>