@php
    $selectedFontFamily = collect($data)->firstWhere('name', 'fontfamily')['value'] ?? '';
    $selectedSecondaryFontFamily = collect($data)->firstWhere('name', 'secondaryFontFamily')['value'] ?? '';

    $selectedFontType = '';
    $selectedSecondaryFontType = '';

    foreach ($fontData as $type => $fonts) {
        if ($selectedFontType === '' && in_array($selectedFontFamily, $fonts)) {
            $selectedFontType = $type;
        }

        if ($selectedSecondaryFontType === '' && in_array($selectedSecondaryFontFamily, $fonts)) {
            $selectedSecondaryFontType = $type;
        }

        if ($selectedFontType !== '' && $selectedSecondaryFontType !== '') {
            break;
        }
    }

    $fontSelectConfigs = [
        [
            'type_id' => 'fontType',
            'family_id' => 'fontFamily',
            'selected_type' => $selectedFontType,
            'selected_family' => $selectedFontFamily,
        ],
        [
            'type_id' => 'secondaryFontType',
            'family_id' => 'secondaryFontFamily',
            'selected_type' => $selectedSecondaryFontType,
            'selected_family' => $selectedSecondaryFontFamily,
        ],
    ];
@endphp

@include('layouts.components.section-marker', ['section_name' => 'Website Layouts'])

<div class="card py-4 px-4">
    <div class="row">
        @foreach ($data as $index => $item)
            <div class="input-group mb-3">
                <div class="col-12 mb-2">
                    @if ($item['name'] === 'logo')
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <input type="file" name="{{ $item['name'] }}" id="{{ $item['name'] }}" class="form-control custom-file">
                        @if ($item['value'])
                            <img class="img-thumbnail-for-icons" src="{{ asset('storage/' . $item['value']) }}" alt="Logo Header" style="max-width: 200px; margin-top: 10px;">
                        @endif
                    @elseif ($item['name'] === 'logoEmail')
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <input type="file" name="{{ $item['name'] }}" id="{{ $item['name'] }}" class="form-control custom-file">
                        @if ($item['value'])
                            <img class="img-thumbnail-for-icons" src="{{ asset('storage/' . $item['value']) }}" alt="Logo Email" style="max-width: 200px; margin-top: 10px;">
                        @endif
                        @if ($errors->has($item['name']))
                            <div class="error handle-error">{{ $errors->first($item['name']) }}</div>
                        @endif
                    @elseif ($item['name'] === 'logoFooter')
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <input type="file" name="{{ $item['name'] }}" id="{{ $item['name'] }}" class="form-control custom-file">
                        @if ($item['value'])
                            <img class="img-thumbnail-for-icons" src="{{ asset('storage/' . $item['value']) }}" alt="Logo Footer" style="max-width: 200px; margin-top: 10px;">
                        @endif
                        @if ($errors->has($item['name']))
                            <div class="error handle-error">{{ $errors->first($item['name']) }}</div>
                        @endif
                    @elseif ($item['name'] === 'favicon')
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <input type="file" name="{{ $item['name'] }}" id="{{ $item['name'] }}" class="form-control custom-file">
                        @if ($item['value'])
                            <img class="img-thumbnail-for-icons" src="{{ asset('storage/' . $item['value']) }}" alt="Favicon" style="max-width: 200px; margin-top: 10px;">
                        @endif
                    @elseif ($item['name'] === 'fontType')
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <select name="layouts[{{ $index }}][value]" id="fontType" class="form-select">
                            <option value="">Selecione um tipo de fonte</option>
                            @foreach (array_keys($fontData) as $type)
                                <option value="{{ $type }}" {{ $selectedFontType === $type ? 'selected' : '' }}>
                                    {{ ucfirst($type) }}
                                </option>
                            @endforeach
                        </select>
                    @elseif ($item['name'] === 'fontfamily')
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <select name="layouts[{{ $index }}][value]" id="fontFamily" class="form-select"></select>
                    @elseif ($item['name'] === 'secondaryFontType')
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <select name="layouts[{{ $index }}][value]" id="secondaryFontType" class="form-select">
                            <option value="">Selecione um tipo de fonte</option>
                            @foreach (array_keys($fontData) as $type)
                                <option value="{{ $type }}" {{ $selectedSecondaryFontType === $type ? 'selected' : '' }}>
                                    {{ ucfirst($type) }}
                                </option>
                            @endforeach
                        </select>
                    @elseif ($item['name'] === 'secondaryFontFamily')
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <select name="layouts[{{ $index }}][value]" id="secondaryFontFamily" class="form-select"></select>
                    @elseif ($item['name'] === 'buttonsAnimations')
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <br/>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        <input type="hidden" name="layouts[{{ $index }}][value]" value="0">
                        <input
                            type="checkbox"
                            name="layouts[{{ $index }}][value]"
                            value="1"
                            class="form-check-input"
                            id="layouts_{{ $index }}_value"
                            {{ old("layouts.{$index}.value", $item['value'] ?? false) ? 'checked' : '' }}
                        >
                        <label class="form-check-label" for="layouts_{{ $index }}_value">
                            Ativo
                        </label>
                    @else
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">
                        @include('layouts.components.color-input', [
                            'id' => $index,
                            'name' => 'layouts[' . $index . '][value]',
                            'value' => $item['value']
                        ])
                    @endif
                </div>
            </div>
        @endforeach
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Script para mostrar as fontes de acordo com o tipo
        const fonts = @json($fontData);
        const fontSelectConfigs = @json($fontSelectConfigs);

        fontSelectConfigs.forEach(({ type_id, family_id, selected_type, selected_family }) => {
            const fontTypeSelect = document.getElementById(type_id);
            const fontFamilySelect = document.getElementById(family_id);

            if (!fontTypeSelect || !fontFamilySelect) {
                return;
            }

            let initialSelectedFamily = selected_family;

            function updateFontOptions() {
                const currentFamily = fontFamilySelect.value || initialSelectedFamily || '';
                const selectedType = fontTypeSelect.value;
                fontFamilySelect.innerHTML = '';

                if (fonts[selectedType]) {
                    fonts[selectedType].forEach(font => {
                        const option = document.createElement('option');
                        option.value = font;
                        option.textContent = font;
                        fontFamilySelect.appendChild(option);
                    });
                }

                if (currentFamily) {
                    fontFamilySelect.value = currentFamily;
                }

                if (initialSelectedFamily) {
                    initialSelectedFamily = '';
                }
            }

            fontTypeSelect.addEventListener('change', function () {
                updateFontOptions();
                fontFamilySelect.dispatchEvent(new Event('change'));
            });

            fontFamilySelect.addEventListener('change', function () {
                console.log("Fonte selecionada:", fontFamilySelect.value);
            });

            if (selected_type) {
                fontTypeSelect.value = selected_type;
            }

            updateFontOptions();
        });
    });
</script>