#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_will3.php" method="post">
            <div class="section-divider"></div>

<div class="section-title">Heir/Heiress
            
            <label class="form-label required" for="contact"></label>
            <span class="tooltip">
                <i class="fas fa-lightbulb lightbulb-icon"></i>
                <span class="tooltiptext">This is where you include the
person who is going to be your chosen cultural heir.</span>
            </span>
        </div>
        <div id="children-container">
            
            <div class="form-group">
                <input type="text" class="form-control" name="heir_name[]" placeholder="Heir name" required>
                <input type="text" class="form-control" name="heir_address[]" placeholder="Heir address" required>
            </div>
        </div>

<div class="section-divider"></div>
            <div class="section-title">Burrial Place
            
            <span class="tooltip">
                <i class="fas fa-lightbulb lightbulb-icon"></i>
                <span class="tooltiptext">This will indicate where you wish to be burried.</span>
            </span>
        </div>
        <div id="children-container">
            
            <div class="form-group">
                <input type="text" class="form-control" name="burry_wishes[]" placeholder="Burial place">
                
            </div>
        </div>

<div class="section-title">Other Wishes
            
            <span class="tooltip">
                <i class="fas fa-lightbulb lightbulb-icon"></i>
                <span class="tooltiptext">Mention what other things you would want</span>
            </span>
        </div>
        
        <div id="other_wishes-container">
            
            <div class="form-group">
                <input type="text" class="form-control" name="other_wishes[]" placeholder="Other Wishes" >
                <button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
            </div>
        </div>

<div class="section-divider"></div>
        <div class="section-title">Distribute to local charity
            
            <span class="tooltip">
                <i class="fas fa-lightbulb lightbulb-icon"></i>
                <span class="tooltiptext">You can decide to give a portion of your estate to any local charities,church.</span>
            </span>
        </div>
        <label class="form-label" for="contact">Add Distribution:</label>
        <button class="add-field-btn" onclick="addInputFields('charity-container', 'charity', 'distribution')">Add More Fields</button>
        <div id="charity-container">
            
            <div class="form-group">
                <input type="text" class="form-control" name="charity[]" placeholder=" Charity name" >
                <input type="text" class="form-control" name="charity_distribution[]" placeholder="Property Name" >
                <button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
            </div>
        </div>

<div class="section-divider"></div>
        <div class="section-title">Distribution
            
            <span class="tooltip">
                <i class="fas fa-lightbulb lightbulb-icon"></i>
                <span class="tooltiptext">How do you want your property
distributed. This is where you specify who gets what.
Put their name, and in the next box what they will
receive</span>
            </span>
        </div>
        <label class="form-label" for="contact">Add Distribution:</label>
        <button class="add-field-btn" onclick="addInputFields('distribution-container', 'distribution_name', 'distribution')">Add More Fields</button>
        <div id="distribution-container">
            
            <div class="form-group">
                <input type="text" class="form-control" name="distribution_name[]" placeholder="Name" >
                <input type="text" class="form-control" name="distribution[]" placeholder="Property Name">
                <button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
            </div>
        </div>

<div class="section-divider"></div>
        <div class="section-title">Witnesses
            
            <label class="form-label required" for="contact"></label>
            <span class="tooltip">
                <i class="fas fa-lightbulb lightbulb-icon"></i>
                <span class="tooltiptext">The law requires that two people
can be called to say and proof that this is your will so you
will need to have two trusted people.
NB: they do not have to read your will or sign at the same
time.They will be required to write their signatures physically as well as you.The fields will be available in the generated will</span>
            </span>
        </div>
        <label class="form-label" for="contact">Add Witness:</label>
        <button class="add-field-btn" onclick="addInputFields('guardians-container', 'witness_name', 'witness_address', 'witness_signature')">Add More Fields</button>
        <div id="guardians-container">
            
            <div class="form-group">
                <input type="text" class="form-control" name="witness_name[]" placeholder="Witness's Name" required>
                <input type="text" class="form-control" name="witness_address[]" placeholder="Witness's Address" required>
                <button class="delete-field-btn" onclick="deleteInputFields(this)">Delete</button>
            </div>
        </div>
        
        <button type="submit" name="subbtn" class="form-btn">Next</button>
        </form>
    </div>

// Create new input fields
            var formGroup = document.createElement('div');
            formGroup.className = 'form-group';
            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 form group and remove it
            var formGroup = button.parentNode;
            formGroup.parentNode.removeChild(formGroup);
        }

$(document).ready(function(){
    // Function to fetch suggestions based on field type
    function fetchSuggestions(fieldType, query) {
        $.ajax({
            url: 'fetch_data.php',
            type: 'GET',
            data: { field_type: fieldType, query: query },
            success: function(data) {
                // Clear previous options
                $('.fetch-data-field[data-field-type="' + fieldType + '"]').empty();
                // Append fetched options
                $('.fetch-data-field[data-field-type="' + fieldType + '"]').append('<option value="">Select Name</option>');
                data.forEach(function(item) {
                    $('.fetch-data-field[data-field-type="' + fieldType + '"]').append('<option value="' + item + '">' + item + '</option>');
                });
            }
        });
    }

// Event listener for distribution name field
    $('.fetch-data-field[data-field-type="distribution_name"]').on('input', function() {
        fetchSuggestions('distribution_name', $(this).val());
    });
});

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