<%- include('includes/header', {username: admin[0].name, email: admin[0].email }) %>

    <div class="body-wrapper">
        <div class="container-fluid">
            <!-- Header -->
            <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
                <div class="card-body px-4 py-3">
                    <div class="row align-items-center">
                        <div class="col-md-8 col-sm-7">
                            <h4 class="fw-semibold mb-1">Manage Features</h4>
                        </div>
                        <div class="col-md-4 col-sm-5 text-md-end text-sm-start mt-3 mt-md-0">
                            <button id="addFeatureBtn" class="btn btn-primary px-4">
                                <i class="fa-solid fa-plus me-2"></i> Add Features
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card shadow-sm">
                <div class="card-body">

                    <h4 class="mb-4">Update Features</h4>

                    <form id="sectionForm">

                        <!-- TYPE (HIDDEN) -->
                        <input type="hidden" name="type" value="<%= section ? section.type : 'feature' %>">

                        <!-- LABEL + TITLE (ONE LINE) -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Section Label</label>
                                <input type="text" class="form-control" name="badge"
                                    value="<%= section ? section.badge : '' %>" placeholder="Feature Section Label">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Title</label>
                                <input type="text" class="form-control" name="title"
                                    value="<%= section ? section.title : '' %>"
                                    placeholder="Custom Title for Every Requirement">
                                <small class="text-muted">
                                    Highlight any word using <code>&lt;span&gt;word&lt;/span&gt;</code>
                                </small>
                            </div>
                        </div>

                        <!-- SHORT DESCRIPTION -->
                        <div class="mb-4">
                            <label class="form-label fw-semibold">Short Description</label>
                            <textarea class="form-control" name="shortDescription" rows="3"
                                placeholder="Write short description here..."><%= section ? section.shortDescription : '' %></textarea>
                        </div>
                        <!-- BUTTON -->
                        <button type="submit" class="btn btn-primary px-4">
                            Update Section
                        </button>

                    </form>


                </div>
            </div>
            <!-- Table -->
            <div class="datatables">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="Features_config"
                                class="table table-striped table-bordered text-nowrap align-middle">
                                <thead>
                                    <tr>
                                        <th>Icon</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th class="action-col">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- FEATURES MODAL -->
                <div class="modal fade" id="featureModal" tabindex="-1">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content border-0 shadow-lg rounded-3">

                            <div class="modal-header bg-light-subtle">
                                <h5 class="modal-title fw-semibold" id="featureModalLabel">Add Feature</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <form id="featureForm">
                                <input type="hidden" id="featureId">

                                <div class="modal-body p-4">
                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Title<span
                                                class="text-danger">*</span></label>
                                        <input type="text" id="featureTitle" class="form-control" required>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-medium">Icon Class<span
                                                class="text-danger">*</span></label>
                                        <input type="text" id="featureIcon" class="form-control" required>
                                        <small class="text-muted d-block mt-1">
                                            <strong>Note:</strong> Please copy the <strong>Component Name</strong> of
                                            the icon
                                            from
                                            <a href="https://lucide.dev/icons" target="_blank">
                                                https://lucide.dev/icons
                                            </a>
                                        </small>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <label class="form-label fw-semibold">
                                            Description<span class="text-danger">*</span>
                                        </label>
                                        <button type="button" id="generateAIFeature"
                                            class="btn btn-sm btn-outline-primary">
                                            <i class="fa-solid fa-wand-magic-sparkles me-1"></i>
                                            Generate by AI
                                        </button>
                                    </div>
                                    <div class="mb-3">
                                        <textarea id="featureDescription" class="form-control" rows="4"
                                         maxlength="150" required></textarea>
                                         <small class="text-muted">Max 150 characters (2-3 lines)</small>
                                    </div>
                                </div>

                                <div class="modal-footer border-0 pt-0">
                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-primary px-4">
                                        Save
                                    </button>
                                </div>
                            </form>

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


        </div>
    </div>

    <%- include('includes/allscripts') %>
        <script src="/js/view/features.js"></script>
        <script src="/js/view/pagesection.js"></script>