{% extends 'base.html' %}
{% block extra_css %}
<style>
    /* ============================================
       PROFILE - NIX EXAMINATION BRANDING
       ============================================ */
    
    .profile-head {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--nix-border);
    }

    .profile-head h2 {
        font-weight: 800;
        margin-bottom: .2rem;
        color: var(--nix-black);
        font-size: 1.75rem;
    }

    .profile-head h2 i {
        color: var(--nix-red);
        margin-right: .5rem;
    }

    .profile-head p {
        color: var(--nix-muted);
        margin: 0;
        font-size: .95rem;
    }

    /* Panel Cards */
    .panel {
        border: 1px solid var(--nix-border);
        border-radius: var(--nix-radius-lg);
        background: var(--nix-white);
        box-shadow: var(--nix-shadow-sm);
        transition: var(--nix-transition);
    }

    .panel:hover {
        box-shadow: var(--nix-shadow);
    }

    .panel .card-header {
        background: transparent;
        border-bottom: 1px solid var(--nix-border);
        font-weight: 700;
        padding: 1rem 1.3rem;
        color: var(--nix-black);
        font-size: .95rem;
    }

    .panel .card-header i {
        color: var(--nix-red);
        margin-right: .5rem;
    }

    .panel .card-body {
        padding: 1.3rem;
    }

    /* Logo Drop Zone */
    .logo-drop {
        border: 2px dashed var(--nix-border);
        border-radius: var(--nix-radius-lg);
        padding: 1.25rem;
        text-align: center;
        background: var(--nix-bg);
        cursor: pointer;
        transition: all var(--nix-transition);
    }

    .logo-drop:hover,
    .logo-drop.dragover {
        border-color: var(--nix-red);
        background: var(--nix-red-light);
    }

    .logo-drop input[type=file] {
        display: none;
    }

    .logo-preview {
        width: 120px;
        height: 120px;
        margin: 0 auto .8rem;
        border-radius: var(--nix-radius);
        border: 1px solid var(--nix-border);
        background: var(--nix-white);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: var(--nix-transition);
    }

    .logo-drop:hover .logo-preview {
        border-color: var(--nix-red);
    }

    .logo-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .logo-preview .placeholder {
        color: var(--nix-border);
        font-size: 2.5rem;
    }

    .logo-hint {
        color: var(--nix-muted);
        font-size: .78rem;
        margin-top: .5rem;
        line-height: 1.5;
    }

    .logo-hint i {
        color: var(--nix-red);
    }

    /* Paper Preview */
    .paper-preview {
        border: 1px solid var(--nix-border);
        border-radius: var(--nix-radius);
        background: var(--nix-white);
        padding: 1rem .9rem;
        position: relative;
        overflow: hidden;
        min-height: 190px;
    }

    .paper-watermark {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: .06;
        pointer-events: none;
    }

    .paper-watermark img {
        width: 62%;
        transform: rotate(-30deg);
        max-height: 120px;
        object-fit: contain;
    }

    .paper-logo {
        text-align: center;
        margin-bottom: .4rem;
    }

    .paper-logo img {
        height: 38px;
        object-fit: contain;
    }

    .paper-school {
        text-align: center;
        font-weight: 800;
        font-size: .78rem;
        letter-spacing: .02em;
        color: var(--nix-black);
    }

    .paper-meta {
        text-align: center;
        font-size: .66rem;
        color: var(--nix-muted);
        margin-top: .15rem;
    }

    .paper-rule {
        border-top: 1px solid var(--nix-border);
        margin: .5rem 0;
    }

    .paper-line {
        height: 5px;
        border-radius: 3px;
        background: var(--nix-border);
        margin-bottom: .35rem;
        opacity: .7;
    }

    .paper-line.short {
        width: 55%;
    }

    /* Form Elements */
    .form-label {
        font-weight: 600;
        font-size: .875rem;
        color: var(--nix-text);
        margin-bottom: .35rem;
    }

    .form-control {
        border-color: var(--nix-border);
        border-radius: var(--nix-radius);
        min-height: 44px;
        transition: var(--nix-transition);
        font-size: .95rem;
    }

    .form-control:focus {
        border-color: var(--nix-red);
        box-shadow: 0 0 0 3px rgba(180, 0, 0, .08);
    }

    .form-control:disabled {
        background: var(--nix-bg);
        color: var(--nix-muted);
    }

    .form-control::placeholder {
        color: var(--nix-muted);
        opacity: .6;
    }

    /* Buttons */
    .btn-primary {
        background: var(--nix-red);
        border: none;
        color: #fff;
        padding: .7rem 1.5rem;
        border-radius: var(--nix-radius);
        font-weight: 600;
        transition: var(--nix-transition);
        box-shadow: var(--nix-shadow-red);
    }

    .btn-primary:hover {
        background: var(--nix-red-dark);
        transform: translateY(-2px);
        box-shadow: var(--nix-shadow-red-lg);
        color: #fff;
    }

    .btn-outline-secondary {
        border-color: var(--nix-border);
        color: var(--nix-text);
        background: transparent;
        transition: var(--nix-transition);
    }

    .btn-outline-secondary:hover {
        border-color: var(--nix-red);
        color: var(--nix-red);
        background: var(--nix-red-light);
    }

    .btn-outline-danger {
        border-color: var(--nix-red);
        color: var(--nix-red);
        background: transparent;
        transition: var(--nix-transition);
    }

    .btn-outline-danger:hover {
        background: var(--nix-red);
        color: #fff;
        border-color: var(--nix-red);
    }

    .btn-sm {
        padding: .35rem 1rem;
        font-size: .82rem;
    }

    .text-muted {
        color: var(--nix-muted) !important;
    }

    .text-primary {
        color: var(--nix-red) !important;
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 768px) {
        .profile-head h2 {
            font-size: 1.4rem;
        }

        .profile-head p {
            font-size: .85rem;
        }

        .panel .card-header {
            padding: .85rem 1rem;
            font-size: .85rem;
        }

        .panel .card-body {
            padding: 1rem;
        }

        .logo-preview {
            width: 100px;
            height: 100px;
        }

        .paper-preview {
            min-height: 160px;
            padding: .85rem;
        }

        .paper-logo img {
            height: 30px;
        }

        .paper-school {
            font-size: .7rem;
        }

        .paper-meta {
            font-size: .6rem;
        }
    }

    @media (max-width: 576px) {
        .profile-head h2 {
            font-size: 1.2rem;
        }

        .profile-head {
            margin-bottom: 1rem;
        }

        .logo-drop {
            padding: 1rem;
        }

        .logo-preview {
            width: 80px;
            height: 80px;
        }

        .logo-preview .placeholder {
            font-size: 2rem;
        }

        .paper-preview {
            min-height: 140px;
        }

        .btn-primary {
            width: 100%;
            justify-content: center;
        }

        .btn-outline-danger {
            width: 100%;
            justify-content: center;
        }
    }
</style>
{% endblock %}

{% block content %}

<!-- ============================================
     PROFILE HEADER
     ============================================ -->
<div class="profile-head">
    <h2><i class="fas fa-school"></i> School Profile</h2>
    <p>Your school name and logo appear at the top of every exam paper you generate — and as a watermark on each page.</p>
</div>

<!-- ============================================
     FORM
     ============================================ -->
<form method="POST" enctype="multipart/form-data">
<div class="row g-4">
    <!-- Left Column - Details -->
    <div class="col-lg-7">
        <!-- School Details -->
        <div class="card panel mb-4">
            <div class="card-header"><i class="fas fa-building-columns"></i> School details</div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">School name</label>
                    <input type="text" name="school_name" id="schoolNameInput" class="form-control"
                           value="{{ current_user.school_name or '' }}" placeholder="e.g. Nairobi Secondary School">
                    <small class="text-muted">Printed in capitals at the top of every paper.</small>
                </div>
                <div class="mb-0">
                    <label class="form-label">Phone (M-Pesa)</label>
                    <input type="text" name="phone" class="form-control"
                           value="{{ current_user.phone or '' }}" placeholder="254700000000">
                    <small class="text-muted">Include the country code for M-Pesa payments.</small>
                </div>
            </div>
        </div>

        <!-- User Details -->
        <div class="card panel">
            <div class="card-header"><i class="fas fa-user"></i> Your details</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">First name</label>
                        <input type="text" name="first_name" class="form-control" value="{{ current_user.first_name or '' }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Last name</label>
                        <input type="text" name="last_name" class="form-control" value="{{ current_user.last_name or '' }}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3 mb-md-0">
                        <label class="form-label">Username</label>
                        <input type="text" class="form-control" value="{{ current_user.username }}" disabled>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" value="{{ current_user.email }}" disabled>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column - Logo + Preview -->
    <div class="col-lg-5">
        <!-- Logo Upload -->
        <div class="card panel mb-4">
            <div class="card-header"><i class="fas fa-image"></i> School logo</div>
            <div class="card-body">
                <label class="logo-drop d-block" id="logoDrop">
                    <div class="logo-preview">
                        {% if current_user.school_logo_url %}
                        <img id="logoPreviewImg" src="{{ url_for('static', filename=current_user.school_logo_url) }}" alt="School logo">
                        {% else %}
                        <img id="logoPreviewImg" alt="School logo" hidden>
                        <span class="placeholder" id="logoPlaceholder"><i class="fas fa-image"></i></span>
                        {% endif %}
                    </div>
                    <span class="btn btn-outline-secondary btn-sm"><i class="fas fa-upload me-1"></i> Choose logo</span>
                    <input type="file" name="school_logo" id="logoInput" accept="image/png,image/jpeg,image/gif,image/webp">
                    <div class="logo-hint">
                        <i class="fas fa-info-circle"></i> PNG, JPG, GIF or WEBP · up to 3 MB<br>
                        A square logo with a transparent background looks best.
                    </div>
                </label>
                <div id="logoFileName" class="text-muted small mt-2"></div>
            </div>
        </div>

        <!-- Paper Preview -->
        <div class="card panel mb-4">
            <div class="card-header"><i class="fas fa-file-lines"></i> How your paper will look</div>
            <div class="card-body">
                <div class="paper-preview">
                    <div class="paper-watermark" id="wmWrap" {% if not current_user.school_logo_url %}hidden{% endif %}>
                        <img id="wmImg" {% if current_user.school_logo_url %}src="{{ url_for('static', filename=current_user.school_logo_url) }}"{% endif %} alt="">
                    </div>
                    <div class="paper-logo" id="paperLogoWrap" {% if not current_user.school_logo_url %}hidden{% endif %}>
                        <img id="paperLogoImg" {% if current_user.school_logo_url %}src="{{ url_for('static', filename=current_user.school_logo_url) }}"{% endif %} alt="">
                    </div>
                    <div class="paper-school" id="paperSchool">{{ (current_user.school_name or '[School Name]')|upper }}</div>
                    <div class="paper-meta">121/1 · MATHEMATICS · PAPER 1</div>
                    <div class="paper-rule"></div>
                    <div class="paper-line"></div>
                    <div class="paper-line"></div>
                    <div class="paper-line short"></div>
                    <div class="paper-line"></div>
                    <div class="paper-line short"></div>
                </div>
                <p class="text-muted small mb-0 mt-2">
                    <i class="fas fa-info-circle"></i> The watermark is printed faintly behind the questions on every page.
                </p>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-1"></i> Save changes
            </button>
            {% if current_user.school_logo_url %}
            <button type="submit" name="action" value="remove_logo" class="btn btn-outline-danger"
                    formnovalidate onclick="return confirm('Remove the school logo from your papers?');">
                <i class="fas fa-trash me-1"></i> Remove logo
            </button>
            {% endif %}
        </div>
    </div>
</div>
</form>

<!-- ============================================
     JAVASCRIPT
     ============================================ -->
<script>
(function () {
    var input = document.getElementById('logoInput');
    var drop = document.getElementById('logoDrop');
    if (!input || !drop) return;

    function applyPreview(src) {
        ['logoPreviewImg', 'paperLogoImg', 'wmImg'].forEach(function (id) {
            var img = document.getElementById(id);
            if (img) { 
                img.src = src; 
                img.hidden = false; 
            }
        });
        var ph = document.getElementById('logoPlaceholder');
        if (ph) ph.hidden = true;
        ['paperLogoWrap', 'wmWrap'].forEach(function (id) {
            var el = document.getElementById(id);
            if (el) el.hidden = false;
        });
    }

    input.addEventListener('change', function () {
        var file = this.files && this.files[0];
        if (!file) return;
        document.getElementById('logoFileName').textContent = 'Selected: ' + file.name;
        var reader = new FileReader();
        reader.onload = function (e) { applyPreview(e.target.result); };
        reader.readAsDataURL(file);
    });

    // Drag and drop
    ['dragenter', 'dragover'].forEach(function (evt) {
        drop.addEventListener(evt, function (e) { 
            e.preventDefault(); 
            drop.classList.add('dragover'); 
        });
    });
    ['dragleave', 'drop'].forEach(function (evt) {
        drop.addEventListener(evt, function (e) { 
            e.preventDefault(); 
            drop.classList.remove('dragover'); 
        });
    });
    drop.addEventListener('drop', function (e) {
        if (e.dataTransfer && e.dataTransfer.files.length) {
            input.files = e.dataTransfer.files;
            input.dispatchEvent(new Event('change'));
        }
    });

    // Live preview of school name
    var nameInput = document.getElementById('schoolNameInput');
    if (nameInput) {
        nameInput.addEventListener('input', function () {
            document.getElementById('paperSchool').textContent = (this.value || '[School Name]').toUpperCase();
        });
    }
})();
</script>
{% endblock %}