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

{% block content %}
<div class="container-fluid px-4 mt-4">
    
<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1 fw-bold">
            <i class="fas fa-cog text-primary me-2"></i>
            Site Settings Management
        </h4>
        <p class="text-muted mb-0">Manage all site settings, gallery, and news in one place</p>
    </div>
    <div>
        <a href="jermis_chalinze/joint-results/" class="btn btn-info" target="_blank">
            <i class="fas fa-eye me-2"></i>Preview Site
        </a>
        <a href="{% url 'exams:dashboard' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
        </a>
        <button onclick="window.print();" class="btn btn-primary ms-2">
            <i class="fas fa-print me-2"></i>Print
        </button>
    </div>
</div>


    {% 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 %}

    
    <!-- Tabs -->
    <ul class="nav nav-tabs mb-4" id="settingsTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab">
                <i class="fas fa-globe me-2"></i>General 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 ms-2">{{ 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 ms-2">{{ news_count }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="appearance-tab" data-bs-toggle="tab" data-bs-target="#appearance" type="button" role="tab">
                <i class="fas fa-palette me-2"></i>Appearance
            </button>
        </li>
    </ul>

    <div class="tab-content">
        
        <!-- ======================================================
             TAB 1: GENERAL SETTINGS
        ====================================================== -->
        <div class="tab-pane fade show active" id="general" role="tabpanel">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="action" value="update_settings">
                
                <div class="row">
                    <!-- Left Column -->
                    <div class="col-md-6">
                        <div class="card shadow mb-4">
                            <div class="card-header bg-primary text-white">
                                <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Basic Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Site Name</label>
                                    <input type="text" name="site_name" class="form-control" value="{{ setting.site_name }}" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Site Title</label>
                                    <input type="text" name="site_title" class="form-control" value="{{ setting.site_title }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Site Tagline</label>
                                    <input type="text" name="site_tagline" class="form-control" value="{{ setting.site_tagline }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Site Description</label>
                                    <textarea name="site_description" class="form-control" rows="5">{{ setting.site_description|default:'' }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Site Keywords (comma separated)</label>
                                    <input type="text" name="site_keywords" class="form-control" value="{{ setting.site_keywords|default:'' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Site Author</label>
                                    <input type="text" name="site_author" class="form-control" value="{{ setting.site_author|default:'' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Copyright Text</label>
                                    <input type="text" name="copyright_text" class="form-control" value="{{ setting.copyright_text|default:'' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Right Column -->
                    <div class="col-md-6">
                        <!-- Contact Information -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0"><i class="fas fa-address-card me-2"></i>Contact Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Phone Number</label>
                                    <input type="text" name="contact_phone" class="form-control" value="{{ setting.contact_phone|default:'' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Email Address</label>
                                    <input type="email" name="contact_email" class="form-control" value="{{ setting.contact_email|default:'' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Physical Address</label>
                                    <textarea name="contact_address" class="form-control" rows="4">{{ setting.contact_address|default:'' }}</textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Social Media Links -->
                        <div class="card shadow mb-4">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0"><i class="fas fa-share-alt me-2"></i>Social Media Links</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label fw-bold"><i class="fab fa-facebook text-primary me-2"></i>Facebook</label>
                                    <input type="url" name="facebook_url" class="form-control" value="{{ setting.facebook_url|default:'' }}" placeholder="https://facebook.com/yourpage">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold"><i class="fab fa-twitter text-info me-2"></i>Twitter/X</label>
                                    <input type="url" name="twitter_url" class="form-control" value="{{ setting.twitter_url|default:'' }}" placeholder="https://twitter.com/yourhandle">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold"><i class="fab fa-instagram text-danger me-2"></i>Instagram</label>
                                    <input type="url" name="instagram_url" class="form-control" value="{{ setting.instagram_url|default:'' }}" placeholder="https://instagram.com/yourprofile">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold"><i class="fab fa-youtube text-danger me-2"></i>YouTube</label>
                                    <input type="url" name="youtube_url" class="form-control" value="{{ setting.youtube_url|default:'' }}" placeholder="https://youtube.com/yourchannel">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Logo and Favicon -->
                <div class="row">
                    <div class="col-md-4">
                        <div class="card shadow mb-4">
                            <div class="card-header bg-warning">
                                <h6 class="mb-0"><i class="fas fa-image me-2"></i>Logo</h6>
                            </div>
                            <div class="card-body text-center">
                                {% if setting.logo %}
                                    <img src="{{ setting.logo.url }}" alt="Logo" style="max-width: 100%; max-height: 150px;" class="mb-3 border p-2">
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete('logo')">
                                            <i class="fas fa-trash me-1"></i>Delete Logo
                                        </button>
                                    </div>
                                {% else %}
                                    <div class="alert alert-secondary">No logo uploaded</div>
                                {% endif %}
                                <input type="file" name="logo" class="form-control" accept="image/*">
                                <small class="text-muted">Recommended size: 200x60px</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card shadow mb-4">
                            <div class="card-header bg-warning">
                                <h6 class="mb-0"><i class="fas fa-file-image me-2"></i>Favicon</h6>
                            </div>
                            <div class="card-body text-center">
                                {% if setting.favicon %}
                                    <img src="{{ setting.favicon.url }}" alt="Favicon" style="width: 64px; height: 64px;" class="mb-3 border p-1">
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete('favicon')">
                                            <i class="fas fa-trash me-1"></i>Delete Favicon
                                        </button>
                                    </div>
                                {% else %}
                                    <div class="alert alert-secondary">No favicon uploaded</div>
                                {% endif %}
                                <input type="file" name="favicon" class="form-control" accept="image/*">
                                <small class="text-muted">Recommended size: 32x32px</small>
                            </div>
                        </div>
                    </div>
                    
<div class="col-md-4">
    <div class="card shadow mb-4">
        <div class="card-header bg-warning">
            <h6 class="mb-0"><i class="fas fa-image me-2"></i>Header Image</h6>
        </div>
        <div class="card-body text-center">
            {% if setting.header_image %}
                <img src="{{ setting.header_image.url }}" alt="Header Image" style="max-width: 100%; max-height: 100px;" class="mb-3 border p-2">
                <div class="mb-2">
                    <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete('header_image')">
                        <i class="fas fa-trash me-1"></i>Delete Image
                    </button>
                </div>
            {% else %}
                <div class="alert alert-secondary">No header image uploaded</div>
            {% endif %}
            <input type="file" name="header_image" class="form-control" accept="image/*">
        </div>
    </div>
</div>
                </div>
                
                <!-- Footer Links -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-secondary text-white">
                        <h6 class="mb-0"><i class="fas fa-link me-2"></i>Footer Links</h6>
                    </div>
                    <div class="card-body">
                        <div id="footerLinksContainer">
                            {% for link in footer_links %}
                            <div class="row mb-2 footer-link-row">
                                <div class="col-md-5">
                                    <input type="text" name="footer_link_title[]" class="form-control" placeholder="Link Title" value="{{ link.title }}">
                                </div>
                                <div class="col-md-5">
                                    <input type="text" name="footer_link_url[]" class="form-control" placeholder="Link URL" value="{{ link.url }}">
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-danger btn-sm remove-link">
                                        <i class="fas fa-trash"></i> Remove
                                    </button>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <button type="button" class="btn btn-success btn-sm mt-2" id="addFooterLink">
                            <i class="fas fa-plus"></i> Add Footer Link
                        </button>
                    </div>
                </div>
                
                <!-- Custom CSS/JS -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="card shadow mb-4">
                            <div class="card-header bg-dark text-white">
                                <h6 class="mb-0"><i class="fab fa-css3 me-2"></i>Custom CSS</h6>
                            </div>
                            <div class="card-body">
                                <textarea name="custom_css" class="form-control font-monospace" rows="8" placeholder="/* Add your custom CSS here */">{{ setting.custom_css|default:'' }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card shadow mb-4">
                            <div class="card-header bg-dark text-white">
                                <h6 class="mb-0"><i class="fab fa-js me-2"></i>Custom JavaScript</h6>
                            </div>
                            <div class="card-body">
                                <textarea name="custom_js" class="form-control font-monospace" rows="8" placeholder="// Add your custom JavaScript here">{{ setting.custom_js|default:'' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Status -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-info text-white">
                        <h6 class="mb-0"><i class="fas fa-toggle-on me-2"></i>Status</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" id="isActive" {% if setting.is_active %}checked{% endif %}>
                            <label class="form-check-label fw-bold" for="isActive">Site Active</label>
                        </div>
                        <small class="text-muted">When inactive, visitors will see a maintenance page</small>
                    </div>
                </div>
                
                <!-- Submit Buttons -->
                <div class="card shadow mb-4">
                    <div class="card-body text-center">
                        <button type="submit" class="btn btn-primary btn-lg px-5">
                            <i class="fas fa-save me-2"></i>Save All Settings
                        </button>
                        <button type="button" class="btn btn-danger btn-lg px-5 ms-3" onclick="confirmReset()">
                            <i class="fas fa-undo me-2"></i>Reset to Default
                        </button>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- ======================================================
             TAB 2: GALLERY MANAGEMENT
        ====================================================== -->
        <div class="tab-pane fade" id="gallery" role="tabpanel">
            <!-- Add Gallery Image Form -->
            <div class="card shadow mb-4">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="fas fa-plus me-2"></i>Add New Gallery Image</h6>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="add_gallery">
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" name="title" class="form-control" placeholder="Image Title">
                            </div>
                            <div class="col-md-4">
                                <input type="text" name="description" class="form-control" placeholder="Description (optional)">
                            </div>
                            <div class="col-md-2">
                                <input type="number" name="order_by" class="form-control" placeholder="Order" value="0">
                            </div>
                            <div class="col-md-2">
                                <input type="file" name="image" class="form-control" accept="image/*" required>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-upload me-2"></i>Upload Image
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Gallery Images List -->
            <div class="card shadow mb-4">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="fas fa-images me-2"></i>Gallery Images ({{ gallery_count }})</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        {% for image in gallery_page_obj %}
                        <div class="col-md-3 mb-4">
                            <div class="card h-100">
                                <img src="{{ image.image.url }}" class="card-img-top" alt="{{ image.title }}" style="height: 150px; object-fit: cover;">
                                <div class="card-body">
                                    <h6 class="card-title">{{ image.title|default:"Untitled" }}</h6>
                                    <p class="card-text small">{{ image.description|truncatechars:50 }}</p>
                                    <p class="card-text"><small class="text-muted">Order: {{ image.order_by }}</small></p>
                                    <div class="btn-group w-100">
                                        <a href="?edit_gallery={{ image.id }}&gallery_page={{ gallery_page_obj.number }}" class="btn btn-sm btn-warning">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                        <form method="post" style="display: inline;">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="toggle_gallery">
                                            <input type="hidden" name="gallery_id" value="{{ image.id }}">
                                            <button type="submit" class="btn btn-sm {% if image.is_active %}btn-success{% else %}btn-secondary{% endif %}">
                                                <i class="fas {% if image.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
                                                {% if image.is_active %}Active{% else %}Inactive{% 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="gallery_id" value="{{ image.id }}">
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                <i class="fas fa-trash"></i> Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-12 text-center py-5">
                            <i class="fas fa-images fa-3x text-muted mb-3"></i>
                            <p>No gallery images found. Upload your first image above.</p>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <!-- Gallery Pagination -->
                    {% if gallery_page_obj.has_other_pages %}
                    <nav aria-label="Gallery navigation">
                        <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">&laquo;</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">{{ 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">&raquo;</a></li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- ======================================================
             TAB 3: NEWS MANAGEMENT
        ====================================================== -->
        <div class="tab-pane fade" id="news" role="tabpanel">
            <!-- Add News Form -->
            <div class="card shadow mb-4">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="fas fa-plus me-2"></i>Add New News</h6>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="add_news">
                        <div class="mb-3">
                            <input type="text" name="title" class="form-control" placeholder="News Title" required>
                        </div>
                        <div class="mb-3">
                            <textarea name="summary" class="form-control" rows="2" placeholder="Short summary (optional)"></textarea>
                        </div>
                        <div class="mb-3">
                            <textarea name="content" class="form-control" rows="5" placeholder="Full news content" required></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="file" name="image" class="form-control" accept="image/*">
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_featured" id="isFeatured">
                                    <label class="form-check-label" for="isFeatured">Feature this news</label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-plus me-2"></i>Publish News
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- News List -->
            <div class="card shadow mb-4">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="fas fa-newspaper me-2"></i>News List ({{ news_count }})</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>#</th>
                                    <th>Title</th>
                                    <th>Summary</th>
                                    <th>Featured</th>
                                    <th>Status</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for news in news_page_obj %}
                                <tr>
                                    <td>{{ forloop.counter0|add:news_page_obj.start_index }}</td>
                                    <td>{{ news.title|truncatechars:50 }}</td>
                                    <td>{{ news.summary|truncatechars:80|default:"-" }}</td>
                                    <td class="text-center">
                                        {% if news.is_featured %}
                                            <span class="badge bg-warning">⭐ Featured</span>
                                        {% else %}
                                            <span class="badge bg-secondary">No</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        {% if news.is_active %}
                                            <span class="badge bg-success">Active</span>
                                        {% else %}
                                            <span class="badge bg-danger">Inactive</span>
                                        {% endif %}
                                    </td>
                                    <td><small>{{ news.created_at|date:"Y-m-d" }}</small></td>
                                    <td class="text-center">
                                        <div class="btn-group btn-group-sm">
                                            <a href="?edit_news={{ news.id }}&news_page={{ news_page_obj.number }}#news" class="btn btn-warning">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form method="post" style="display: inline;">
                                                {% csrf_token %}
                                                <input type="hidden" name="action" value="toggle_news">
                                                <input type="hidden" name="news_id" value="{{ news.id }}">
                                                <button type="submit" class="btn {% if news.is_active %}btn-success{% else %}btn-secondary{% endif %}">
                                                    <i class="fas {% if news.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
                                                </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="news_id" value="{{ news.id }}">
                                                <button type="submit" class="btn btn-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="7" class="text-center py-4">
                                        <i class="fas fa-newspaper fa-2x text-muted mb-2 d-block"></i>
                                        No news found. Create your first news above.
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- News Pagination -->
                    {% if news_page_obj.has_other_pages %}
                    <nav aria-label="News navigation">
                        <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">&laquo;</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">{{ 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">&raquo;</a></li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- ======================================================
             TAB 4: APPEARANCE
        ====================================================== -->
        <div class="tab-pane fade" id="appearance" role="tabpanel">
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="update_settings">
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="card shadow mb-4">
                            <div class="card-header bg-primary text-white">
                                <h6 class="mb-0"><i class="fas fa-palette me-2"></i>Color Scheme</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Primary Color</label>
                                    <div class="input-group">
                                        <input type="color" name="primary_color" class="form-control form-control-color w-25" value="{{ setting.primary_color|default:'#4e73df' }}">
                                        <input type="text" class="form-control" value="{{ setting.primary_color|default:'#4e73df' }}" readonly>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Secondary Color</label>
                                    <div class="input-group">
                                        <input type="color" name="secondary_color" class="form-control form-control-color w-25" value="{{ setting.secondary_color|default:'#858796' }}">
                                        <input type="text" class="form-control" value="{{ setting.secondary_color|default:'#858796' }}" readonly>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Header Background Color</label>
                                    <div class="input-group">
                                        <input type="color" name="header_bg_color" class="form-control form-control-color w-25" value="{{ setting.header_bg_color|default:'#ffffff' }}">
                                        <input type="text" class="form-control" value="{{ setting.header_bg_color|default:'#ffffff' }}" readonly>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-bold">Footer Background Color</label>
                                    <div class="input-group">
                                        <input type="color" name="footer_bg_color" class="form-control form-control-color w-25" value="{{ setting.footer_bg_color|default:'#1a3e6f' }}">
                                        <input type="text" class="form-control" value="{{ setting.footer_bg_color|default:'#1a3e6f' }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="card shadow mb-4">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0"><i class="fas fa-eye me-2"></i>Live Preview</h6>
                            </div>
                            <div class="card-body text-center">
                                <div style="background-color: {{ setting.primary_color|default:'#4e73df' }}; padding: 20px; border-radius: 8px; margin-bottom: 10px;">
                                    <span style="color: white;">Primary Color Preview</span>
                                </div>
                                <div style="background-color: {{ setting.secondary_color|default:'#858796' }}; padding: 20px; border-radius: 8px; margin-bottom: 10px;">
                                    <span style="color: white;">Secondary Color Preview</span>
                                </div>
                                <div style="background-color: {{ setting.header_bg_color|default:'#ffffff' }}; padding: 20px; border-radius: 8px; border: 1px solid #ddd;">
                                    <span>Header Background Preview</span>
                                </div>
                                <div style="background-color: {{ setting.footer_bg_color|default:'#1a3e6f' }}; padding: 20px; border-radius: 8px;">
                                    <span style="color: white;">Footer Background Preview</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card shadow mb-4">
                    <div class="card-body text-center">
                        <button type="submit" class="btn btn-primary btn-lg px-5">
                            <i class="fas fa-save me-2"></i>Save Appearance Settings
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Gallery Modal -->
{% if edit_gallery %}
<div class="modal fade show" id="editGalleryModal" tabindex="-1" style="display: block;" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="action" value="edit_gallery">
                <input type="hidden" name="gallery_id" value="{{ edit_gallery.id }}">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title">Edit Gallery Image</h5>
                    <button type="button" class="btn-close" onclick="window.location.href='?gallery_page={{ gallery_page_obj.number }}#gallery'"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 text-center">
                        <img src="{{ edit_gallery.image.url }}" alt="Current" style="max-width: 100%; max-height: 200px;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" name="title" class="form-control" value="{{ edit_gallery.title }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3">{{ edit_gallery.description }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Order</label>
                        <input type="number" name="order_by" class="form-control" value="{{ edit_gallery.order_by }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Replace Image (optional)</label>
                        <input type="file" name="image" class="form-control" accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='?gallery_page={{ gallery_page_obj.number }}#gallery'">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<!-- Edit News Modal -->
{% if edit_news %}
<div class="modal fade show" id="editNewsModal" tabindex="-1" style="display: block;" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="action" value="edit_news">
                <input type="hidden" name="news_id" value="{{ edit_news.id }}">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title">Edit News</h5>
                    <button type="button" class="btn-close" onclick="window.location.href='?news_page={{ news_page_obj.number }}#news'"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Title</label>
                        <input type="text" name="title" class="form-control" value="{{ edit_news.title }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Summary</label>
                        <textarea name="summary" class="form-control" rows="2">{{ edit_news.summary }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Content</label>
                        <textarea name="content" class="form-control" rows="6" required>{{ edit_news.content }}</textarea>
                    </div>
                    {% if edit_news.image %}
                    <div class="mb-3 text-center">
                        <img src="{{ edit_news.image.url }}" alt="Current" style="max-width: 100%; max-height: 150px;">
                    </div>
                    {% endif %}
                    <div class="mb-3">
                        <label class="form-label">Replace Image (optional)</label>
                        <input type="file" name="image" class="form-control" accept="image/*">
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_featured" id="editIsFeatured" {% if edit_news.is_featured %}checked{% endif %}>
                            <label class="form-check-label" for="editIsFeatured">Feature this news</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='?news_page={{ news_page_obj.number }}#news'">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

<script>
// Add footer link row
document.getElementById('addFooterLink')?.addEventListener('click', function() {
    const container = document.getElementById('footerLinksContainer');
    const newRow = document.createElement('div');
    newRow.className = 'row mb-2 footer-link-row';
    newRow.innerHTML = `
        <div class="col-md-5">
            <input type="text" name="footer_link_title[]" class="form-control" placeholder="Link Title">
        </div>
        <div class="col-md-5">
            <input type="text" name="footer_link_url[]" class="form-control" placeholder="Link URL">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-danger btn-sm remove-link">
                <i class="fas fa-trash"></i> Remove
            </button>
        </div>
    `;
    container.appendChild(newRow);
    
    // Add remove event listener to new button
    newRow.querySelector('.remove-link').addEventListener('click', function() {
        newRow.remove();
    });
});

// Remove footer link event listeners
document.querySelectorAll('.remove-link').forEach(btn => {
    btn.addEventListener('click', function() {
        this.closest('.footer-link-row').remove();
    });
});

// Confirm delete functions
function confirmDelete(type) {
    let confirmMessage = '';
    let actionValue = '';
    
    switch(type) {
        case 'logo':
            confirmMessage = 'Are you sure you want to delete the logo?';
            actionValue = 'delete_logo';
            break;
        case 'logo_light':
            confirmMessage = 'Are you sure you want to delete the light logo?';
            actionValue = 'delete_logo_light';
            break;
        case 'favicon':
            confirmMessage = 'Are you sure you want to delete the favicon?';
            actionValue = 'delete_favicon';
            break;
        case 'header_image':
            confirmMessage = 'Are you sure you want to delete the header image?';
            actionValue = 'delete_header_image';
            break;
        default:
            return;
    }
    
    if (confirm(confirmMessage)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="${actionValue}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}

function confirmReset() {
    if (confirm('⚠️ WARNING: This will reset ALL settings to default values. This action cannot be undone. Are you sure?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="reset_settings">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}

// Live color preview
document.querySelectorAll('input[type="color"]').forEach(colorInput => {
    colorInput.addEventListener('input', function() {
        const previewDiv = this.closest('.row')?.querySelector('.form-control');
        if (previewDiv) {
            previewDiv.value = this.value;
        }
        
        // Update preview boxes
        const fieldName = this.getAttribute('name');
        if (fieldName === 'primary_color') {
            const preview = document.querySelector('#appearance .card-body .text-center div:first-child');
            if (preview) preview.style.backgroundColor = this.value;
        } else if (fieldName === 'secondary_color') {
            const preview = document.querySelector('#appearance .card-body .text-center div:nth-child(2)');
            if (preview) preview.style.backgroundColor = this.value;
        } else if (fieldName === 'header_bg_color') {
            const preview = document.querySelector('#appearance .card-body .text-center div:nth-child(3)');
            if (preview) preview.style.backgroundColor = this.value;
        } else if (fieldName === 'footer_bg_color') {
            const preview = document.querySelector('#appearance .card-body .text-center div:last-child');
            if (preview) preview.style.backgroundColor = this.value;
        }
    });
});
</script>

<style>
    .nav-tabs .nav-link {
        font-weight: 500;
    }
    .nav-tabs .nav-link.active {
        border-bottom: 3px solid #4e73df;
    }
    .form-control-color {
        width: 60px;
        height: 38px;
        padding: 5px;
    }
    .modal-backdrop {
        z-index: 1040;
    }
    .modal {
        z-index: 1050;
    }
</style>

{% endblock %}