<%- 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 Portfolio</h4>
                    </div>
                    <div class="col-md-4 col-sm-5 text-md-end text-sm-start mt-3 mt-md-0">
                        <button id="addPortfolioBtn" class="btn btn-primary px-4">
                            <i class="fa-solid fa-plus me-2"></i> Add Portfolio Item
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section Update -->
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <h4 class="mb-4">Update Portfolio Section</h4>
                <form id="sectionForm">
                    <input type="hidden" name="type" value="<%= section ? section.type : 'portfolio' %>">

                    <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="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>

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Short Description</label>
                        <textarea class="form-control" name="shortDescription" rows="3" placeholder="Short description..."><%= section ? section.shortDescription : '' %></textarea>
                    </div>

                    <button type="submit" class="btn btn-primary px-4">
                        Update Section
                    </button>
                </form>
            </div>
        </div>

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

            <!-- Modal -->
            <div class="modal fade" id="portfolioModal" tabindex="-1" aria-hidden="true">
                <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="portfolioModalLabel">Add Portfolio Item</h5>
                            <button type="button" class="btn-close btn-close-dark" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body p-4">
                            <form id="portfolioForm" enctype="multipart/form-data">
                                <input type="hidden" id="portfolioId">

                                <div class="mb-3">
                                    <label class="form-label fw-medium">Title <span class="text-danger">*</span></label>
                                    <input type="text" id="portfolioTitle" class="form-control" placeholder="Enter title" required>
                                </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="generatePortfolioAI" 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="portfolioDescription" class="form-control" rows="4" placeholder="Enter description" required></textarea>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-medium">Image <span class="text-danger">*</span></label>
                                    <input type="file" id="portfolioImage" name="image" class="form-control" accept="image/*">
                                    <small class="text-muted d-block mt-1">
                                  <i class="fa-solid fa-circle-info text-primary"></i>
                                  Recommended Size: <strong>446 x 250 px</strong>,Formats: <strong>/jpeg|jpg|png|webp/</strong>
                                </small>
                                    <img id="previewImage" src="" class="img-thumbnail mt-2" style="width:100%; max-width:200px; display:none;">
                                </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>
</div>

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