<?php
/**
 * Photo upload field component with live preview.
 *
 * @var string|null $currentPhoto Existing photo path (relative, e.g. 'uploads/photos/members/...')
 * @var bool $required Whether the field is mandatory
 * @var string $fieldName Input field name (default: 'photo')
 * @var string $label Label text
 */
$currentPhoto = $currentPhoto ?? null;
$required = $required ?? true;
$fieldName = $fieldName ?? 'photo';
$label = $label ?? 'الصورة الشخصية';
$fieldId = 'photo_upload_' . str_replace(['[', ']'], '_', $fieldName);
$previewId = 'photo_preview_' . str_replace(['[', ']'], '_', $fieldName);
?>
<div class="form-group photo-upload-group">
    <label for="<?= e($fieldId) ?>" class="form-label">
        <?= e($label) ?>
        <?php if ($required): ?><span class="required-mark">*</span><?php endif; ?>
    </label>

    <div class="photo-upload-container" id="container_<?= e($fieldId) ?>">
        <div class="photo-preview-area" id="<?= e($previewId) ?>">
            <?php if ($currentPhoto): ?>
                <img src="/<?= e($currentPhoto) ?>" alt="الصورة الحالية" class="photo-current">
            <?php else: ?>
                <div class="photo-placeholder">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                        <circle cx="12" cy="7" r="4"/>
                    </svg>
                    <span>اضغط لرفع الصورة</span>
                </div>
            <?php endif; ?>
        </div>

        <input
            type="file"
            name="<?= e($fieldName) ?>"
            id="<?= e($fieldId) ?>"
            accept=".jpg,.jpeg,.png,.webp"
            class="photo-file-input"
            <?= $required && !$currentPhoto ? 'required' : '' ?>
        >

        <div class="photo-upload-actions">
            <?php if ($currentPhoto): ?>
                <span class="photo-status photo-status-ok">✓ صورة مرفوعة</span>
            <?php endif; ?>
            <label for="<?= e($fieldId) ?>" class="btn btn-sm btn-outline-primary photo-btn">
                <?= $currentPhoto ? 'تغيير الصورة' : 'اختيار صورة' ?>
            </label>
        </div>

        <small class="form-text text-muted">
            الصيغ المقبولة: JPG, PNG, WEBP — الحد الأقصى: 5 ميجابايت
        </small>
    </div>
</div>

<style>
.photo-upload-group { margin-bottom: 1.5rem; }
.photo-upload-container { text-align: center; }
.photo-preview-area {
    width: 180px;
    height: 180px;
    margin: 0 auto 12px;
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    cursor: pointer;
    transition: border-color 0.2s;
}
.photo-preview-area:hover { border-color: #6366f1; }
.photo-preview-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
}
.photo-placeholder span { font-size: 13px; }
.photo-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.photo-upload-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}
.photo-status { font-size: 13px; }
.photo-status-ok { color: #16a34a; }
.photo-btn { cursor: pointer; }
</style>

<script>
(function() {
    var input = document.getElementById('<?= e($fieldId) ?>');
    var preview = document.getElementById('<?= e($previewId) ?>');

    preview.addEventListener('click', function() { input.click(); });

    input.addEventListener('change', function() {
        if (!this.files || !this.files[0]) return;

        var file = this.files[0];
        var maxSize = 5 * 1024 * 1024;
        var allowed = ['image/jpeg', 'image/png', 'image/webp'];

        if (!allowed.includes(file.type)) {
            alert('صيغة الصورة غير مدعومة — يُقبل فقط JPG, PNG, WEBP');
            this.value = '';
            return;
        }
        if (file.size > maxSize) {
            alert('حجم الصورة يتجاوز الحد المسموح (5 ميجابايت)');
            this.value = '';
            return;
        }

        var reader = new FileReader();
        reader.onload = function(e) {
            preview.innerHTML = '<img src="' + e.target.result + '" alt="معاينة" style="width:100%;height:100%;object-fit:cover;">';
        };
        reader.readAsDataURL(file);
    });
})();
</script>
