{% extends "layouts/console_layout.html" %}

{% block content %}
<div class="profile-card">
    <div class="profile-header-badge">
        <span class="material-symbols-outlined">badge</span>
        <span>Account Profile</span>
    </div>
    
    <p class="profile-subtitle">All inputs are optional, though recommended for a personalized experience.</p>

    <form id="profileForm" class="profile-form" novalidate autocomplete="off">
        <!-- Avatar Section -->
        <div class="avatar-upload-section">
            <div class="avatar-preview-wrap">
                <div class="avatar-circle" id="avatarCircle">
                    <img id="avatarImage"{% if $has_profile_photo %} src="{{ $profile_photo_url }}" style="display: block;"{% else %} style="display: none;"{% endif %} alt="Profile Photo">
                    <div id="avatarPlaceholder" class="avatar-placeholder" style="{% if $has_profile_photo %}display: none;{% else %}display: flex;{% endif %}">
                        <span class="material-symbols-outlined">person</span>
                    </div>
                </div>
                <label for="photoInput" class="avatar-edit-badge" title="Upload or Change Photo">
                    <span class="material-symbols-outlined">photo_camera</span>
                </label>
            </div>
            
            <input type="file" id="photoInput" accept="image/jpeg,image/png,image/webp,image/gif" style="display: none;">
            
            <div class="avatar-controls">
                <label for="photoInput" class="btn-avatar-action" id="btnChangePhoto" style="cursor: pointer;">
                    <span class="material-symbols-outlined" id="changePhotoIcon">{% if $has_profile_photo %}photo_camera{% else %}upload{% endif %}</span>
                    <span id="changePhotoText">{% if $has_profile_photo %}Change Photo{% else %}Upload Photo{% endif %}</span>
                </label>
                <button type="button" class="btn-avatar-action danger" id="btnRemovePhoto" style="{% if $has_profile_photo %}display: inline-flex;{% else %}display: none;{% endif %}">
                    <span class="material-symbols-outlined">delete</span> Remove
                </button>
            </div>
            <div class="avatar-hint">
                <span>Square (1:1) &bull; Max 15 MB</span>
            </div>
            <div id="photoError" class="field-error" style="display: none;"></div>
        </div>

        <!-- Form Fields -->
        <div class="form-group">
            <label for="profileName">
                <span class="label-text">Name</span>
                <span class="label-badge">Optional, Recommended</span>
            </label>
            <div class="input-with-icon">
                <span class="material-symbols-outlined input-icon">badge</span>
                <input type="text" id="profileName" name="name" class="form-control" placeholder="Enter your full name" value="{{ $profile_name }}">
            </div>
        </div>

        <div class="form-group">
            <label for="profileDob">
                <span class="label-text">Date of Birth</span>
                <span class="label-badge">Optional, Recommended</span>
            </label>
            <div class="input-with-icon">
                <span class="material-symbols-outlined input-icon">calendar_month</span>
                <input type="date" id="profileDob" name="dob" class="form-control" value="{{ $profile_dob }}">
            </div>
        </div>

        <div class="form-group">
            <label for="profilePhone">
                <span class="label-text">Phone Number</span>
                <span class="label-badge">Optional, Recommended</span>
            </label>
            <div class="input-with-icon">
                <span class="material-symbols-outlined input-icon">call</span>
                <input type="tel" id="profilePhone" name="phone" class="form-control" placeholder="e.g. +91 98765 43210" value="{{ $profile_phone }}">
            </div>
        </div>

        <div class="form-group">
            <label for="profileEmail">
                <span class="label-text">Email Address</span>
                <span class="label-badge">Optional, Recommended</span>
            </label>
            <div class="input-with-icon">
                <span class="material-symbols-outlined input-icon">mail</span>
                <input type="email" id="profileEmail" name="email" class="form-control" placeholder="e.g. yourname@example.com" value="{{ $profile_email }}">
            </div>
        </div>

        <div class="form-group">
            <label for="profilePassword">
                <span class="label-text">Reset Password</span>
                <span class="label-badge">Optional, Recommended</span>
            </label>
            <div class="input-with-icon">
                <span class="material-symbols-outlined input-icon">lock</span>
                <input type="password" id="profilePassword" name="password" class="form-control" placeholder="Enter new password (leave blank to keep current)">
                <button type="button" class="btn-password-toggle" id="togglePasswordBtn" title="Toggle password visibility">
                    <span class="material-symbols-outlined" id="togglePasswordIcon">visibility</span>
                </button>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-primary" id="saveProfileBtn">
                <span class="material-symbols-outlined">save</span>
                <span id="saveBtnText">Save Profile</span>
            </button>
        </div>
    </form>
</div>

<!-- Square Cropper Modal -->
<div id="cropperModal" class="modal-backdrop" style="display: none;">
    <div class="modal-box cropper-modal-box">
        <div class="modal-header">
            <h3>Crop Profile Picture</h3>
            <button type="button" class="modal-close-btn" id="closeCropperBtn">
                <span class="material-symbols-outlined">close</span>
            </button>
        </div>
        <div class="cropper-body">
            <p class="cropper-tip">Drag image to adjust position. Use slider to zoom.</p>
            <div class="crop-viewport-container">
                <div class="crop-viewport">
                    <canvas id="cropCanvas" width="280" height="280"></canvas>
                    <div class="crop-grid-overlay"></div>
                </div>
            </div>

            <div class="crop-slider-row">
                <span class="material-symbols-outlined">zoom_out</span>
                <input type="range" id="zoomSlider" min="1" max="3" step="0.02" value="1">
                <span class="material-symbols-outlined">zoom_in</span>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-secondary" id="btnAcceptOriginal">
                <span class="material-symbols-outlined">crop_original</span> Accept As-Is
            </button>
            <button type="button" class="btn-primary" id="btnApplyCrop">
                <span class="material-symbols-outlined">check</span> Crop & Use
            </button>
        </div>
    </div>
</div>

<!-- Toast Notification -->
<div id="toastNotification" class="toast" style="display: none;">
    <span class="material-symbols-outlined toast-icon" id="toastIcon">check_circle</span>
    <span id="toastMsg">Saved</span>
</div>
{% endblock %}