<%- include('../partials/header', { title, user }) %>
<%- include('../partials/sidebar', { path }) %>

<main class="main-content">
    <div id="testimonials-section" class="content-section active">
        <div class="section-header">
            <h2 class="page-title">
                <i class="fas fa-comments"></i>
                Testimonials Management
            </h2>
            <button class="btn-primary" id="btn-add-testimonial">
                <i class="fas fa-plus"></i> Add Testimonial
            </button>
        </div>

        <!-- Testimonials Table -->
        <div class="section-card">
            <div class="table-loading" id="testimonials-loading" style="display: none;">
                <i class="fas fa-spinner fa-spin"></i>
                <span>Loading testimonials...</span>
            </div>
            <div class="table-responsive">
                <table class="data-table testimonials-table" id="testimonials-table">
                    <thead>
                        <tr>
                            <th>Player</th>
                            <th>Rank</th>
                            <th>Message</th>
                            <th>Rating</th>
                            <th>Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="testimonials-table-body">
                        <!-- Dynamically populated -->
                    </tbody>
                </table>
            </div>
            <div class="empty-state" id="testimonials-empty-state" style="display: none;">
                <i class="fas fa-comment-slash"></i>
                <p>No testimonials found</p>
                <small>Add some testimonials to display them here</small>
            </div>
        </div>
    </div>
</main>

<!-- Add Testimonial Modal -->
<div id="add-testimonial-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-plus-circle"></i> Add New Testimonial</h3>
            <button class="modal-close" id="close-add-testimonial">&times;</button>
        </div>
        <form id="add-testimonial-form">
            <div class="modal-body">
                <div class="form-group">
                    <label for="new-player-name">Player Name</label>
                    <input type="text" id="new-player-name" required placeholder="e.g., Alex">
                </div>
                <div class="form-group">
                    <label for="new-player-rank">Rank</label>
                    <select id="new-player-rank" required>
                        <option value="Player">Player</option>
                        <option value="Pro">Pro</option>
                        <option value="Master">Master</option>
                        <option value="Grandmaster">Grandmaster</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="new-player-avatar">Avatar (Initial)</label>
                    <input type="text" id="new-player-avatar" placeholder="e.g., A" maxlength="1">
                    <small class="form-help">Leave blank to use first letter of name</small>
                </div>
                <div class="form-group">
                    <label for="new-message">Message</label>
                    <textarea id="new-message" rows="3" required placeholder="Enter testimonial message..."></textarea>
                </div>
                <div class="form-group">
                    <label for="new-rating">Rating (1-5)</label>
                    <select id="new-rating" required>
                        <option value="5">5 Stars</option>
                        <option value="4">4 Stars</option>
                        <option value="3">3 Stars</option>
                        <option value="2">2 Stars</option>
                        <option value="1">1 Star</option>
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn-secondary" id="cancel-add-testimonial">Cancel</button>
                <button type="submit" class="btn-primary">Add Testimonial</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Testimonial Modal -->
<div id="edit-testimonial-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-edit"></i> Edit Testimonial</h3>
            <button class="modal-close" id="close-edit-testimonial">&times;</button>
        </div>
        <form id="edit-testimonial-form">
            <input type="hidden" id="edit-testimonial-id">
            <div class="modal-body">
                <div class="form-group">
                    <label for="edit-player-name">Player Name</label>
                    <input type="text" id="edit-player-name" required>
                </div>
                <div class="form-group">
                    <label for="edit-player-rank">Rank</label>
                    <select id="edit-player-rank" required>
                        <option value="Player">Player</option>
                        <option value="Pro">Pro</option>
                        <option value="Master">Master</option>
                        <option value="Grandmaster">Grandmaster</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-player-avatar">Avatar (Initial)</label>
                    <input type="text" id="edit-player-avatar" maxlength="1">
                    <small class="form-help">Leave blank to use first letter of name</small>
                </div>
                <div class="form-group">
                    <label for="edit-message">Message</label>
                    <textarea id="edit-message" rows="3" required></textarea>
                </div>
                <div class="form-group">
                    <label for="edit-rating">Rating (1-5)</label>
                    <select id="edit-rating" required>
                        <option value="5">5 Stars</option>
                        <option value="4">4 Stars</option>
                        <option value="3">3 Stars</option>
                        <option value="2">2 Stars</option>
                        <option value="1">1 Star</option>
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn-secondary" id="cancel-edit-testimonial">Cancel</button>
                <button type="submit" class="btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<%- include('../partials/footer') %>
