<%- include('partials/layout_start', { activePage: 'testimonials', pageTitle: 'Manage Testimonials' }) %>

<div class="admin-section">
    <form action="/admin/testimonial/add" method="POST" enctype="multipart/form-data" style="margin-bottom: 30px; background: #1e293b; padding: 20px; border-radius: 8px; border: 1px solid #334155; max-width: 800px;">
        <h4 style="margin-top: 0; margin-bottom: 15px;">Add New Testimonial</h4>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
            <div class="form-group" style="margin-bottom: 15px; grid-column: 1 / -1;">
                <label style="display: block; margin-bottom: 5px; font-weight: bold;">Brand Name</label>
                <input type="text" name="brand_name" required style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
            </div>
            <div class="form-group" style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; font-weight: bold;">Quote (English)</label>
                <textarea name="quote_en" required rows="3" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;"></textarea>
            </div>
            <div class="form-group" style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; font-weight: bold;">Quote (Bengali)</label>
                <textarea name="quote_bn" required rows="3" style="width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;"></textarea>
            </div>
        </div>

        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Brand Logo (Optional)</label>
            <input type="file" name="image" accept="image/*">
        </div>
        <button type="submit" class="btn-primary" style="padding: 10px 20px; background-color: #f59e0b; color: #1e293b; border: none; font-weight: bold; cursor: pointer; border-radius: 4px;">Add Testimonial</button>
    </form>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
        <% testimonials.forEach(test => { %>
            <div style="background: #1e293b; border: 1px solid #334155; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;">
                <div style="padding: 15px;">
                    <% if (test.image_url) { %>
                        <img src="<%= test.image_url %>" style="max-height: 50px; margin-bottom: 15px; object-fit: contain;">
                    <% } %>
                    <h4 style="margin: 0 0 10px 0; color: #1e293b;"><%= test.brand_name %></h4>
                    <p style="font-size: 0.9rem; color: #475569; margin: 0 0 10px 0;"><i>"<%= test.quote_en %>"</i></p>
                    <p style="font-size: 0.9rem; color: #475569; margin: 0;"><i>"<%= test.quote_bn %>"</i></p>
                </div>
                <div style="padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; background: #1e293b; border-top: 1px solid #334155; margin-top: auto;">
                    <div style="color: #64748b; font-size: 0.8rem;"><%= test.created_at.split(' ')[0] %></div>
                    <form action="/admin/testimonial/delete/<%= test.id %>" method="POST" style="margin: 0;">
                        <button type="submit" style="color:white; background: #ef4444; border:none; padding: 5px 10px; border-radius: 4px; cursor:pointer; font-size: 0.8rem;"><i class="fas fa-trash-alt"></i> Delete</button>
                    </form>
                </div>
            </div>
        <% }) %>
    </div>
</div>

<%- include('partials/layout_end') %>
