#I LOVE YOU EVERDAY#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BarefootLaw will generator</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
      body {
            font-family: Arial, sans-serif;
            background-color: #f3f3f3;
            margin: 0;
            padding: 0;
        }

.container {
            max-width: 800px;
            margin: 50px auto;
            background-color: #fff;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 20px; /* Reduced padding for mobile view */
        }

.form-group {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            flex-wrap: wrap; /* Allow form groups to wrap on smaller screens */
        }

.form-control {
            flex: 1;
            margin-right: 10px;
            margin-bottom: 10px; /* Added margin bottom for spacing between fields */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 16px;
        }

.add-field-btn,
        .delete-field-btn {
            padding: 10px;
            margin: 5px 10px; /* Adjusted margin for smaller screens */
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

.delete-field-btn {
            background-color: #f44336;
        }

.section-title {
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 18px;
            display: flex;
            align-items: center;
        }

/* Add a gray line between sections */
        .section-divider {
            border-top: 2px solid #ccc;
            margin-top: 20px;
            margin-bottom: 20px;
        }

.form-btn {
            display: block;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 5px;
            background-color: #4caf50;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }

.form-label.required::after {
            content: '*';
            color: red;
        }

.form-label.explainer::after {
            content: '\f6f6'; /* Unicode for lightbulb icon */
            color: #ffc107; /* Yellow */
            margin-left: 5px;
            font-family: 'boxicons';
        }

/* Tooltip */
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px; /* Adjusted width to fit content */
    max-width: 600px; /* Adjusted max-width for smaller screens */
    background-color: rgba(0, 0, 0, 0.8); /* Increased opacity for better contrast */
    color: #fff;
    text-align: left; /* Set text alignment to left */
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    top: 120%; /* Adjusted position for better alignment */
    left: 100px; /* Center the tooltip horizontally */
    transform: translateX(-50%); /* Center the tooltip horizontally */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px; /* Increased font size for better readability */
    line-height: 1.4; /* Improved line height for better spacing */
    white-space: wrap; /* Prevent text from wrapping */
}
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

.lightbulb-icon {
            color: #f39c12; /* Change to your preferred color */
            font-size: 14px; /* Adjust the size as needed */
            margin-left: 5px;
        }

/* Add smooth transition for form fields */
        .form-group {
            transition: height 0.3s ease-in-out;
        }

/* Initially hide added form fields */
        .form-group.new-field {
            height: 0;
            opacity: 0;
            overflow: hidden;
        }

/* Show added form fields smoothly */
        .form-group.new-field.show {
            height: auto;
            opacity: 1;
        }

</style>

</head>
<body>

<div class="container">
            <div class="form-label required">
            <h2>Key</h2>
                <span>Required : </span>
            </div>
            <div class="key-item">
                <span>Explainer : </span>
                <span class="tooltip">
                    <i class="fas fa-lightbulb lightbulb-icon"></i>
                <span class="icon lightbulb-icon"></span>
            </div>
        </div>

<div class="container">
        <h2>BarefootLaw will generator</h2>
        <form action="process_will2.php" method="post">
            <div class="section-divider"></div>

<div class="section-title">Children
    
    <span class="tooltip">
        <i class="fas fa-lightbulb lightbulb-icon"></i>
        <span class="tooltiptext">Names of the children and their ages. Remember to include all the children even those who are not for your husband or wife.</span>
    </span>
</div>
<label class="form-label" for="contact">Add Children:</label>
<button class="add-field-btn" onclick="addInputFields('children-container', 'childs_name', 'childs_age')">Add More Fields</button>
<div id="children-container">
    
    <div class="form-group">
        <input type="text" class="form-control" name="childs_name[]" placeholder="Child's Name" >
        <input type="text" class="form-control" name="childs_age[]" placeholder="Age" >
        <button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
    </div>
</div>

<div class="section-title">Dependants
                
                <span class="tooltip">
                    <i class="fas fa-lightbulb lightbulb-icon"></i>
                    <span class="tooltiptext">This means those relatives who
depend entirely on you for their wellbeing such as your
parents.
This are entitled to a share of what you have so you can
give them a little</span>
                </span>
            </div>
            <label class="form-label" for="contact">Add Dependants:</label>
            <button class="add-field-btn" onclick="addInputFields('dependants-container', 'dependants_name', '')">Add More Fields</button>
            <div id="dependants-container">
                
                <div class="form-group">
                    <input type="text" class="form-control" name="dependants_name[]" placeholder="Dependant's Name" >
                    <button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
                </div>
            </div>

<div class="section-title">Guardians of Young Children
<span class="tooltip">
                    <i class="fas fa-lightbulb lightbulb-icon"></i>
                    <span class="tooltiptext">If you have young children, then
you may need to name someone to step in your shoes to
be responsible for their education and upbringing.
(Make sure you talked to them and they said yes).</span>
                </span></div>
<label class="form-label" for="contact">Add Guardians:</label>
<button class="add-field-btn" onclick="addInputFields('guardians-container', 'guardians_name', 'guardians_address')">Add More Fields</button>
<div id="guardians-container">
    
    <div class="form-group">
        <input type="text" class="form-control" name="guardians_name[]" placeholder="Guardian's Name" >
        <input type="text" class="form-control" name="guardians_address[]" placeholder="Guardians Address" >
        <button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
    </div>
</div>

<div class="section-title">Property Name
    
    <label class="form-label required" for="contact"></label>
    <span class="tooltip">
        <i class="fas fa-lightbulb lightbulb-icon"></i>
        <span class="tooltiptext">List all the property that is owned by you as an individual,
and those you own together with someone else.
(This does not include clan land, land you are managing
for someone else, or what you hope you will inherit at
some point).
If it is land give a description of it.
For example
20 acres in Aboke, Kole District with registration
details if possible</span>
    </span>
</div>
<label class="form-label" for="contact">Add Properties:</label>
<button type="button" class="add-field-btn" onclick="addInputFields('property-container', 'property_name', '')">Add More Fields</button>
<div id="property-container">
    
    <div class="form-group">
        <input type="text" class="form-control" name="property_name[]" placeholder="Property Name">
        <button type="button" class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
    </div>
</div>

<div class="section-title">Executors
<label class="form-label required" for="contact"></label>
<span class="tooltip">
                    <i class="fas fa-lightbulb lightbulb-icon"></i>
                    <span class="tooltiptext"> An Executor is a person whose
job it is to carry out the wishes and distribution of your
property in the will.
Make sure this is a trustworthy and responsible
person who will carry out all your wishes</span>
                </span></div>
<label class="form-label" for="contact">Add Executors:</label>
<button class="add-field-btn" onclick="addInputFields('executors-container','executor_name','')">Add More Fields</button>
<div id="executors-container">
    
    <div class="form-group">
        <input type="text" class="form-control" name="executor_name[]" placeholder="Executor's Name" required>
        <button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
    </div>
</div>

// Create new input fields
    var formGroup = document.createElement('div');
    formGroup.className = 'form-group new-field show'; // Added classes for transition
    var secondField = age == '' ? '' : '<input type="text" class="form-control" placeholder="" name="' + age + '[]" required>';
    formGroup.innerHTML = '<input type="text" class="form-control" placeholder="" name="' + name + '[]" required>' +
                          secondField +
                          '<button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>';

// Append the new input fields to the container
    container.appendChild(formGroup);
}

function deleteInputFields(button) {
    // Get the parent element of the delete button
    var formGroup = button.parentNode;
    
    // Remove the parent element from the DOM
    formGroup.parentNode.removeChild(formGroup);
}

</script>
</body>
</html>