<h1>Edit Home Data</h1>

<form action="/home/edit/<%= home_data._id %>" method="POST" enctype="multipart/form-data">

    <!-- Main Section -->
    <h3>Main Section</h3>
    <div class="mb-3">
        <label class="form-label">Main Title</label>
        <input type="text" class="form-control" name="title" value="<%= home_data.title %>" required>
    </div>
    <div class="mb-3">
        <label class="form-label">Main Content</label>
        <textarea class="form-control" name="content" rows="5" required><%= home_data.content %></textarea>
    </div>
    <div class="mb-3">
        <label class="form-label">Hero Video</label>
        <input type="file" class="form-control" name="herovideo" accept=".mp4">
        <% if (home_data.herovideo) { %>
            <small class="text-muted">
                  <video width="400" controls>
    <source src="<%= home_data.herovideo %>" type="video/mp4">
    Your browser does not support the video tag.
</video>
        <% } %>
    </div>

    <hr>

    <!-- Section 1 -->
    <div class="mb-3">
        <label class="form-label">Landmarks Authored</label>
        <input type="text" class="form-control" name="title1" placeholder="60+.." value="<%= home_data.title1 %>">
    </div>
    <div class="mb-3">
        <label class="form-label">Completed</label>
        <input type="text" class="form-control" name="title2" placeholder="40+.." value="<%= home_data.title2 %>">
    </div>
    <div class="mb-3">
        <label class="form-label">Lives Transformed</label>
        <input type="text" class="form-control" name="title3" placeholder="13000+.." value="<%= home_data.title3 %>">
    </div>

    <div class="mb-3">
        <label class="form-label">Years of Architectural Stewardship</label>
        <input type="text" class="form-control" name="title4" placeholder="24+.." value="<%= home_data.title4 %>">
    </div>

    <div class="mb-3">
        <label class="form-label">Million Sq.Ft. Of Meticulously Planned Space</label>
        <input type="text" class="form-control" name="title5" placeholder="35+.." value="<%= home_data.title5 %>">
    </div>

    <hr>

    <!-- Section 2 -->
    <div class="mb-3">
        <label class="form-label">left Image</label>
        <input type="file" class="form-control" name="image2">
        <% if (home_data.image2) { %>
            <small class="text-muted">
<img src="<%= home_data.image2 %>" alt="Image" width="200">
            </small>
        <% } %>
    </div>
    <div class="mb-3">
        <label class="form-label">middle Title</label>
        <input type="text" class="form-control" name="title6" value="<%= home_data.title6 %>">
    </div>
    <div class="mb-3">
        <label class="form-label">middle Content 2</label>
        <textarea class="form-control" name="content2" rows="3"><%= home_data.content2 %></textarea>
    </div>
    <div class="mb-3">
        <label class="form-label">right Image</label>
        <input type="file" class="form-control" name="image3">
        <% if (home_data.image3) { %>
            <small class="text-muted">
<img src="<%= home_data.image3 %>" alt="Image" width="200">
                </small>
        <% } %>
    </div>

    <hr>

    <!-- Our Featured Developments 1 -->
    
    <h6 class="mt-4">Add IS PARADISE</h6>

    <div class="mb-3">
    <label>Title</label>
    <input type="text" class="form-control" name="title9" value="<%= home_data.title9 %>">
</div>

<div class="mb-3">
    <label>Content</label>
    <textarea class="form-control" name="content4" rows="3"><%= home_data.content4 %></textarea>
</div>

    <div class="mb-3">
        <label class="form-label">Video</label>
        <input type="file" class="form-control" name="video4">
        <% if (home_data.video4) { %>
            <small class="text-muted">
<video width="400" controls>
    <source src="<%= home_data.video4 %>" type="video/mp4">
    Your browser does not support the video tag.
</video>            </small>
        <% } %>
    </div>

    <!-- Our Featured Developments 2 -->
    <h6 class="mt-4">UNIQUE GREEN MEADOWS</h6>

    <div class="mb-3">
    <label>Title</label>
    <input type="text" class="form-control" name="title10" value="<%= home_data.title10 %>">
</div>

<div class="mb-3">
    <label>Content</label>
    <textarea class="form-control" name="content5" rows="3"><%= home_data.content5 %></textarea>
</div>
    <div class="mb-3">
        <label class="form-label">Video</label>
        <input type="file" class="form-control" name="video5">
        <% if (home_data.video5) { %>
            <small class="text-muted">
<video width="400" controls>
    <source src="<%= home_data.video5 %>" type="video/mp4">
    Your browser does not support the video tag.
</video>            </small>
        <% } %>
    </div>

    <!-- Our Featured Developments 3 -->
    <h6 class="mt-4">UNIQUE NEW TOWN</h6>

    <div class="mb-3">
    <label>Title</label>
    <input type="text" class="form-control" name="title11" value="<%= home_data.title11 %>">
</div>

<div class="mb-3">
    <label>Content</label>
    <textarea class="form-control" name="content6" rows="3"><%= home_data.content6 %></textarea>
</div>
    <div class="mb-3">
        <label class="form-label">Video</label>
        <input type="file" class="form-control" name="video6">
        <% if (home_data.video6) { %>
            <small class="text-muted">
<video width="400" controls>
    <source src="<%= home_data.video6 %>" type="video/mp4">
    Your browser does not support the video tag.
</video>            </small>
        <% } %>
    </div>

    <hr>

    <div class="mb-3">
        <label class="form-label">Title</label>
        <input type="text" class="form-control" name="title8" value="<%= home_data.title8 %>">
    </div>
    <div class="mb-3">
        <label class="form-label">Content</label>
        <textarea class="form-control" name="content7" rows="3"><%= home_data.content7 %></textarea>
    </div>

    <div class="mb-3">
        <label class="form-label">Video</label>
        <input type="file" class="form-control" name="video7">
        <% if (home_data.video7) { %>
            <small class="text-muted"> 
<video width="400" controls>
    <source src="<%= home_data.video7 %>" type="video/mp4">
    Your browser does not support the video tag.
</video>                </small>
        <% } %>
    </div>
    
    <hr>

    <!-- Dynamic Sections -->
    <h6 class="mt-4">ADD MILESTONES</h6>
    <div id="dynamicSectionsContainer">
        <% if (home_data.dynamicSections && home_data.dynamicSections.length > 0) { %>
            <% home_data.dynamicSections.forEach((section, index) => { %>
                <div class="card p-3 mb-3 border border-info">
                    <div class="d-flex justify-content-between">
                        <!-- <h5>Extra Section</h5> -->
                        <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.parentElement.remove()">Remove</button>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" class="form-control" name="dynamicNames[]" value="<%= section.name %>" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">year</label>
                        <input type="text" class="form-control" name="dynamicPosts[]" placeholder="e.g. 2002.." value="<%= section.post %>">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Content</label>
                        <textarea class="form-control" name="dynamicContents[]" rows="3"><%= section.content %></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Image</label>
                        <input type="file" class="form-control" name="dynamicImage_<%= index %>">
                        <% if (section.image) { %>
                            <small class="text-muted">
<img src="<%= section.image %>" alt="Image" width="200">
                            </small>
                        <% } %>
                    </div>
                </div>
            <% }) %>
        <% } %>
    </div>
    
    <button type="button" id="addSectionBtn" class="btn btn-info mt-2">
        <i class="fas fa-plus"></i> Add +
    </button>

    <!-- Journey Sections -->
    <h6 class="mt-4">Add Values</h6>
    <div id="journeySectionsContainer">
        <% if (home_data.journeySections && home_data.journeySections.length > 0) { %>
            <% home_data.journeySections.forEach((section, index) => { %>
                <div class="card p-3 mb-3 border border-warning">
                    <div class="d-flex justify-content-between">
                        <!-- <h5>Journey Section</h5> -->
                        <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.parentElement.remove()">Remove</button>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" class="form-control" name="journeyTitles[]" value="<%= section.title %>" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Content</label>
                        <textarea class="form-control" name="journeyContents[]" rows="3"><%= section.content %></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Image</label>
                        <input type="file" class="form-control" name="journeyImage_<%= index %>">
                        <% if (section.image) { %>
                            <small class="text-muted">
<img src="<%= section.image %>" alt="Image" width="200">
                                </small>
                        <% } %>
                    </div>
                </div>
            <% }) %>
        <% } %>
    </div>
    
    <button type="button" id="addJourneyBtn" class="btn btn-warning mt-2">
        <i class="fas fa-plus"></i> Add +
    </button>
    <hr>
    
    <!-- Awards Section -->
    <h6>Awards Section</h6>
    <div id="AwardSectionsContainer">
        <% if (home_data.AwardSections && home_data.AwardSections.length > 0) { %>
            <% home_data.AwardSections.forEach((section, index) => { %>
                <div class="card p-3 mb-3 border border-info">
                    <div class="d-flex justify-content-between">
                        <!-- <h5>Award Section</h5> -->
                        <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.parentElement.remove()">Remove</button>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" class="form-control" name="awardTitles[]" value="<%= section.title %>" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">year</label>
                        <input type="text" class="form-control" name="awardYears[]" placeholder="e.g. 2002.." value="<%= section.year %>">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Content</label>
                        <textarea class="form-control" name="awardContents[]" rows="3"><%= section.content %></textarea>
                    </div>
                </div>
            <% }) %>
        <% } %>
    </div>
    <button type="button" id="addAwardBtn" class="btn btn-warning mt-2">
        <i class="fas fa-plus"></i> Add +
    </button>

    <hr>

    <div class="mt-4 mb-5">
        <button type="submit" class="btn btn-primary">
            Update Story
        </button>
    </div>
</form>

<script>
    let AwardCount = <%= home_data.AwardSections ? home_data.AwardSections.length : 0 %>;
    document.getElementById('addAwardBtn').addEventListener('click', function() {
        const container = document.getElementById('AwardSectionsContainer');
        const sectionHtml = `
            <div class="card p-3 mb-3 border border-info">
                <div class="d-flex justify-content-between">
                     <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.parentElement.remove()">Remove</button>
                </div>
                <div class="mb-3">
                    <label class="form-label">Title</label>
                    <input type="text" class="form-control" name="awardTitles[]" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">year</label>
                    <input type="text" class="form-control" name="awardYears[]" placeholder="e.g. 2002..">
                </div>
                <div class="mb-3">
                    <label class="form-label">Content</label>
                    <textarea class="form-control" name="awardContents[]" rows="3"></textarea>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', sectionHtml);
        AwardCount++;
    });

    let sectionCount = <%= home_data.dynamicSections ? home_data.dynamicSections.length : 0 %>;
    document.getElementById('addSectionBtn').addEventListener('click', function() {
        const container = document.getElementById('dynamicSectionsContainer');
        const sectionHtml = `
            <div class="card p-3 mb-3 border border-info">
                <div class="d-flex justify-content-between">
                     <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.parentElement.remove()">Remove</button>
                </div>
                <div class="mb-3">
                    <label class="form-label">Title</label>
                    <input type="text" class="form-control" name="dynamicNames[]" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">year</label>
                    <input type="text" class="form-control" name="dynamicPosts[]" placeholder="e.g. 2002..">
                </div>
                <div class="mb-3">
                    <label class="form-label">Content</label>
                    <textarea class="form-control" name="dynamicContents[]" rows="3"></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Image</label>
                    <input type="file" class="form-control" name="dynamicImage_${sectionCount}" required>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', sectionHtml);
        sectionCount++;
    });

    let journeyCount = <%= home_data.journeySections ? home_data.journeySections.length : 0 %>;
    document.getElementById('addJourneyBtn').addEventListener('click', function() {
        const container = document.getElementById('journeySectionsContainer');
        const sectionHtml = `
            <div class="card p-3 mb-3 border border-warning">
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.parentElement.parentElement.remove()">Remove</button>
                </div>
                <div class="mb-3">
                    <label class="form-label">Title</label>
                    <input type="text" class="form-control" name="journeyTitles[]" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Content</label>
                    <textarea class="form-control" name="journeyContents[]" rows="3"></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Image</label>
                    <input type="file" class="form-control" name="journeyImage_${journeyCount}" required>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', sectionHtml);
        journeyCount++;
    });
</script>