@php
$key = $moduleImage->key;
@endphp

@include('layouts.components.section-marker', ['section_name' => $moduleImage->description])

<div class="card py-4 px-4">
    <div class="row mb-3">
        <div class="col">
            <div class="form-check">
                <input type="hidden" name="{{ $key }}[active]" value="0">
                <input
                    type="checkbox"
                    name="{{ $key }}[active]"
                    class="form-check-input"
                    id="{{ $key }}[active]"
                    {{ old("{$key}.active", $moduleImage['value']['active'] ?? false) ? 'checked' : '' }}>
                <label class="form-check-label" for="{{ $key }}[active]">Ativo</label>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="form-group">
            <label class="mb-2" for="{{ $key }}[image]">Upload de Imagem</label>
            <input
                type="file"
                name="{{ $key }}[image]"
                id="{{ $key }}[image]"
                class="form-control custom-file">

            @if (!empty($moduleImage['value']['image']))
                <div class="mt-3">
                    <p>Imagem Atual:</p>
                    <img
                        class="img-thumbnail-for-icons"
                        src="{{ asset('storage/' . $moduleImage['value']['image']) }}"
                        alt="Imagem atual"
                        style="max-width: 200px;">
                </div>
            @endif

            @if ($errors->has("{$key}.image"))
                <div class="error handle-error">{{ $errors->first("{$key}.image") }}</div>
            @endif
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const checkboxImage = document.getElementById('{{ $key }}[active]');
        const fileInputImage = document.getElementById('{{ $key }}[image]');

        if (fileInputImage) {
            fileInputImage.disabled = !checkboxImage.checked;
        }

        checkboxImage.addEventListener('change', () => {
            if (fileInputImage) {
                fileInputImage.disabled = !checkboxImage.checked;
            }
        });
    });
</script>