{% extends "exams/base.html" %}
{% load static %}

{% block content %}
 
<div class="container-fluid px-4 mt-4">

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endif %}
    
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="mb-1 fw-bold">
                <i class="fas fa-cog text-primary me-2"></i>Site Settings & Management
            </h3>
            <p class="text-muted mb-0">Configure global site settings, manage gallery, news, and content</p>
        </div>
        <div>

            <a href="{% url 'exams:site_settings_preview' %}" class="btn btn-info me-2" >
                <i class="fas fa-eye me-2"></i>Preview
            </a>

            <a href="{% url 'exams:site_settings_preview' %}" class="btn btn-primary me-2" >
                <i class="fas fa-eye me-2"></i>Edit
            </a>

            <a href="/joint-results" class="btn btn-warning me-2">
                <i class="fas fa-eye me-2"></i>Visit
            </a>

            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#resetModal">
                <i class="fas fa-undo-alt me-2"></i>Reset
            </button>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <ul class="nav nav-tabs mb-4" id="settingsTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">
                <i class="fas fa-info-circle me-2"></i>Basic Settings
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="gallery-tab" data-bs-toggle="tab" data-bs-target="#gallery" type="button" role="tab">
                <i class="fas fa-images me-2"></i>Gallery <span class="badge bg-secondary">{{ gallery_count }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="news-tab" data-bs-toggle="tab" data-bs-target="#news" type="button" role="tab">
                <i class="fas fa-newspaper me-2"></i>News <span class="badge bg-secondary">{{ news_count }}</span>
            </button>
        </li>
    </ul>

    <form method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        
        {% if form.non_field_errors %}
        <div class="alert alert-danger">
            {% for error in form.non_field_errors %}{{ error }}{% endfor %}
        </div>
        {% endif %}
        
        <div class="tab-content">
            <!-- Basic Settings Tab -->
            <div class="tab-pane fade show active" id="basic" role="tabpanel">
                <!-- Basic Information -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-info-circle me-2 text-primary"></i>Basic Information
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Site Name</label>
                                {{ form.site_name }}
                                {% if form.site_name.errors %}
                                <div class="invalid-feedback d-block">{{ form.site_name.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Site Title (Browser Tab)</label>
                                {{ form.site_title }}
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Site Tagline</label>
                                {{ form.site_tagline }}
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">About the Institution</label>
                                {{ form.about }}
                                <small class="text-muted">Information about your institution displayed on the homepage</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Logo & Branding -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-image me-2 text-primary"></i>Logo & Branding
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Main Logo</label>
                                {{ form.logo }}
                                {% if setting.logo %}
                                <div class="mt-2">
                                    <img src="{{ setting.logo.url }}" alt="Current Logo" style="max-height: 60px;">
                                    <small class="text-muted d-block">Current logo</small>
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Favicon</label>
                                {{ form.favicon }}
                                {% if setting.favicon %}
                                <div class="mt-2">
                                    <img src="{{ setting.favicon.url }}" alt="Favicon" style="width: 32px; height: 32px;">
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Light Logo (Dark Backgrounds)</label>
                                {{ form.logo_light }}
                                <small class="text-muted">Used on dark backgrounds</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Header Settings -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-header me-2 text-primary"></i>Header Settings
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Header Text</label>
                                {{ form.header_text }}
                                <small class="text-muted">HTML supported (e.g., announcements, welcome messages)</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Header Background Image</label>
                                {{ form.header_image }}
                                {% if setting.header_image %}
                                <div class="mt-2">
                                    <img src="{{ setting.header_image.url }}" alt="Header Image" style="max-height: 50px;">
                                </div>
                                {% endif %}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Header Background Color</label>
                                {{ form.header_bg_color }}
                                <div class="mt-2">
                                    <div style="width: 50px; height: 30px; background-color: {{ form.header_bg_color.value|default:'#0066B3' }}; border: 1px solid #ddd; border-radius: 4px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Footer Settings -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-footer me-2 text-primary"></i>Footer Settings
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Footer Text</label>
                                {{ form.footer_text }}
                                <small class="text-muted">HTML supported (address, contact info, etc.)</small>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Footer Copyright</label>
                                {{ form.footer_copyright }}
                                <small class="text-muted">Use {year} for current year</small>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Footer Links (JSON Format)</label>
                                {{ form.footer_links }}
                                <small class="text-muted">
                                    Format: [{"title": "About", "url": "/about"}, {"title": "Contact", "url": "/contact"}]
                                </small>
                                {% if footer_links %}
                                <div class="mt-2 p-2 bg-light rounded">
                                    <strong>Current Links:</strong>
                                    <ul class="mb-0 mt-1">
                                        {% for link in footer_links %}
                                        <li><a href="{{ link.url }}" target="_blank">{{ link.title }}</a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Contact Information -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-address-card me-2 text-primary"></i>Contact Information
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Contact Email</label>
                                {{ form.contact_email }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Contact Phone</label>
                                {{ form.contact_phone }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">P.O. Box</label>
                                {{ form.contact_po_box }}
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Contact Address</label>
                                {{ form.contact_address }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Social Media -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-share-alt me-2 text-primary"></i>Social Media Links
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Facebook URL</label>
                                {{ form.facebook_url }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Twitter/X URL</label>
                                {{ form.twitter_url }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Instagram URL</label>
                                {{ form.instagram_url }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">YouTube URL</label>
                                {{ form.youtube_url }}
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">WhatsApp URL</label>
                                {{ form.whatsapp_url }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Custom CSS/JS -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-code me-2 text-primary"></i>Custom Code
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Custom CSS</label>
                                {{ form.custom_css }}
                                <small class="text-muted">Add custom CSS styles to override defaults</small>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Custom JavaScript</label>
                                {{ form.custom_js }}
                                <small class="text-muted">Add custom JavaScript code (will be included in the footer)</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- SEO -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-search me-2 text-primary"></i>SEO Settings
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Meta Description</label>
                                {{ form.meta_description }}
                                <small class="text-muted">Description for search engines (max 160 characters)</small>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Meta Keywords</label>
                                {{ form.meta_keywords }}
                                <small class="text-muted">Comma-separated keywords for search engines</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Active Status -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-body">
                        <div class="form-check">
                            {{ form.is_active }}
                            <label class="form-check-label fw-bold">Active</label>
                            <div class="form-text">If unchecked, default settings will be used</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Gallery Tab -->
            <div class="tab-pane fade" id="gallery" role="tabpanel">
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-images me-2 text-primary"></i>Gallery Management
                        </h6>
                        <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addGalleryModal">
                            <i class="fas fa-plus me-1"></i>Add Image
                        </button>
                    </div>
                    <div class="card-body">
                        {% if gallery_page_obj %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Image</th>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Order</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for g in gallery_page_obj %}
                                    <tr>
                                        <td width="80">
                                            <img src="{{ g.image.url }}" class="img-thumbnail" style="max-height: 50px;">
                                        </td>
                                        <td><strong>{{ g.title }}</strong></td>
                                        <td>{{ g.description|truncatechars:50 }}</td>
                                        <td>{{ g.sort_order }}</td>
                                        <td>
                                            {% if g.is_active %}
                                                <span class="badge bg-success">Active</span>
                                            {% else %}
                                                <span class="badge bg-danger">Inactive</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#editGalleryModal{{ g.id }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <form method="post" style="display:inline">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="toggle_gallery">
                                                <input type="hidden" name="id" value="{{ g.id }}">
                                                <button class="btn btn-sm btn-warning">
                                                    {% if g.is_active %}<i class="fas fa-eye-slash"></i>{% else %}<i class="fas fa-eye"></i>{% endif %}
                                                </button>
                                            </form>
                                            <form method="post" style="display:inline" onsubmit="return confirm('Delete this image?')">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="delete_gallery">
                                                <input type="hidden" name="id" value="{{ g.id }}">
                                                <button class="btn btn-sm btn-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    
                                    <!-- Edit Gallery Modal -->
                                    <div class="modal fade" id="editGalleryModal{{ g.id }}" tabindex="-1">
                                        <div class="modal-dialog">
                                            <form method="post" enctype="multipart/form-data">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="edit_gallery">
                                                <input type="hidden" name="id" value="{{ g.id }}">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5>Edit Gallery Image</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <input class="form-control mb-2" name="title" value="{{ g.title }}" placeholder="Title">
                                                        <textarea class="form-control mb-2" name="description" placeholder="Description">{{ g.description }}</textarea>
                                                        <input class="form-control mb-2" type="number" name="sort_order" value="{{ g.sort_order }}" placeholder="Order">
                                                        <input class="form-control mb-2" type="file" name="image">
                                                        <small class="text-muted">Current image:</small>
                                                        <img src="{{ g.image.url }}" class="img-fluid mt-2" style="max-height: 100px;">
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button class="btn btn-primary">Update</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Gallery Pagination -->
                        {% if gallery_page_obj.has_other_pages %}
                        <nav>
                            <ul class="pagination justify-content-center">
                                {% if gallery_page_obj.has_previous %}
                                    <li class="page-item"><a class="page-link" href="?gallery_page={{ gallery_page_obj.previous_page_number }}#gallery-tab">Previous</a></li>
                                {% endif %}
                                {% for num in gallery_page_obj.paginator.page_range %}
                                    <li class="page-item {% if gallery_page_obj.number == num %}active{% endif %}">
                                        <a class="page-link" href="?gallery_page={{ num }}#gallery-tab">{{ num }}</a>
                                    </li>
                                {% endfor %}
                                {% if gallery_page_obj.has_next %}
                                    <li class="page-item"><a class="page-link" href="?gallery_page={{ gallery_page_obj.next_page_number }}#gallery-tab">Next</a></li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                        {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-images fa-3x text-muted mb-3"></i>
                            <p>No gallery images yet. Click "Add Image" to upload.</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- News Tab -->
            <div class="tab-pane fade" id="news" role="tabpanel">
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-newspaper me-2 text-primary"></i>News Management
                        </h6>
                        <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addNewsModal">
                            <i class="fas fa-plus me-1"></i>Add News
                        </button>
                    </div>
                    <div class="card-body">
                        {% if news_page_obj %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>Image</th>
                                        <th>Title</th>
                                        <th>Summary</th>
                                        <th>Featured</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for n in news_page_obj %}
                                    <tr>
                                        <td width="60">
                                            {% if n.image %}
                                                <img src="{{ n.image.url }}" class="img-thumbnail" style="max-height: 40px;">
                                            {% else %}
                                                <i class="fas fa-file-alt fa-2x text-muted"></i>
                                            {% endif %}
                                        </td>
                                        <td><strong>{{ n.title }}</strong></td>
                                        <td>{{ n.summary|truncatechars:80 }}</td>
                                        <td>
                                            {% if n.is_featured %}
                                                <span class="badge bg-warning">Featured</span>
                                            {% else %}
                                                <span class="badge bg-secondary">No</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if n.is_active %}
                                                <span class="badge bg-success">Active</span>
                                            {% else %}
                                                <span class="badge bg-danger">Inactive</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ n.created_at|date:"Y-m-d" }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#editNewsModal{{ n.id }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <form method="post" style="display:inline">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="toggle_news">
                                                <input type="hidden" name="id" value="{{ n.id }}">
                                                <button class="btn btn-sm btn-warning">
                                                    {% if n.is_active %}<i class="fas fa-eye-slash"></i>{% else %}<i class="fas fa-eye"></i>{% endif %}
                                                </button>
                                            </form>
                                            <form method="post" style="display:inline" onsubmit="return confirm('Delete this news?')">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="delete_news">
                                                <input type="hidden" name="id" value="{{ n.id }}">
                                                <button class="btn btn-sm btn-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                    
                                    <!-- Edit News Modal -->
                                    <div class="modal fade" id="editNewsModal{{ n.id }}" tabindex="-1">
                                        <div class="modal-dialog modal-lg">
                                            <form method="post" enctype="multipart/form-data">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="edit_news">
                                                <input type="hidden" name="id" value="{{ n.id }}">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5>Edit News</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <input class="form-control mb-2" name="title" value="{{ n.title }}" placeholder="Title">
                                                        <textarea class="form-control mb-2" name="summary" rows="2" placeholder="Summary">{{ n.summary }}</textarea>
                                                        <textarea class="form-control mb-2" name="content" rows="5" placeholder="Content">{{ n.content }}</textarea>
                                                        <input class="form-control mb-2" type="file" name="image">
                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="checkbox" name="is_featured" {% if n.is_featured %}checked{% endif %}>
                                                            <label class="form-check-label">Featured News</label>
                                                        </div>
                                                        {% if n.image %}
                                                        <small class="text-muted">Current image:</small>
                                                        <img src="{{ n.image.url }}" class="img-fluid mt-2" style="max-height: 100px;">
                                                        {% endif %}
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button class="btn btn-primary">Update</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- News Pagination -->
                        {% if news_page_obj.has_other_pages %}
                        <nav>
                            <ul class="pagination justify-content-center">
                                {% if news_page_obj.has_previous %}
                                    <li class="page-item"><a class="page-link" href="?news_page={{ news_page_obj.previous_page_number }}#news-tab">Previous</a></li>
                                {% endif %}
                                {% for num in news_page_obj.paginator.page_range %}
                                    <li class="page-item {% if news_page_obj.number == num %}active{% endif %}">
                                        <a class="page-link" href="?news_page={{ num }}#news-tab">{{ num }}</a>
                                    </li>
                                {% endfor %}
                                {% if news_page_obj.has_next %}
                                    <li class="page-item"><a class="page-link" href="?news_page={{ news_page_obj.next_page_number }}#news-tab">Next</a></li>
                                {% endif %}
                            </ul>
                        </nav>
                        {% endif %}
                        {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-newspaper fa-3x text-muted mb-3"></i>
                            <p>No news items yet. Click "Add News" to create.</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Submit Buttons -->
        <div class="d-flex justify-content-end gap-2 mb-5">
            <a href="{% url 'exams:dashboard' %}" class="btn btn-secondary">
                <i class="fas fa-times me-2"></i>Cancel
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-2"></i>Save Settings
            </button>
        </div>
        
    </form>
</div>

<!-- Add Gallery Modal -->
<div class="modal fade" id="addGalleryModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="action" value="add_gallery">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>Add Gallery Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input class="form-control mb-2" name="title" placeholder="Title" required>
                    <textarea class="form-control mb-2" name="description" placeholder="Description"></textarea>
                    <input class="form-control mb-2" type="number" name="sort_order" placeholder="Order (0-100)" value="0">
                    <input class="form-control mb-2" type="file" name="image" accept="image/*" required>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">Add to Gallery</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Add News Modal -->
<div class="modal fade" id="addNewsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="action" value="add_news">
            <div class="modal-content">
                <div class="modal-header">
                    <h5>Add News</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input class="form-control mb-2" name="title" placeholder="Title" required>
                    <textarea class="form-control mb-2" name="summary" rows="2" placeholder="Summary (optional)"></textarea>
                    <textarea class="form-control mb-2" name="content" rows="5" placeholder="Content" required></textarea>
                    <input class="form-control mb-2" type="file" name="image" accept="image/*">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_featured">
                        <label class="form-check-label">Featured News</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">Publish News</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Reset Confirmation Modal -->
<div class="modal fade" id="resetModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reset Site Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to reset all site settings to default?</p>
                <p class="text-danger"><strong>This action cannot be undone!</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="post" action="{% url 'exams:site_settings_reset' %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Reset All Settings</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}