@php
$data = $data ?? [];

$template_layouts = config('settings.layouts');

$layouts = array_map(function($template_layout) use ($data) {
    $existing_layout = collect($data)->firstWhere('name', $template_layout['name']);

    if ($existing_layout) {
        foreach ($template_layout as $key => $value) {
            if (!isset($existing_layout[$key]) || empty($existing_layout[$key])) {
                $existing_layout[$key] = $value;
            }
        }
        return $existing_layout;
    }

    return $template_layout;
}, $template_layouts);

$selectedFontFamily = collect($layouts)->firstWhere('name', 'fontfamily')['value'] ?? '';
$selectedFontType = '';

foreach ($fontData as $type => $fonts) {
    if (in_array($selectedFontFamily, $fonts)) {
        $selectedFontType = $type;
        break;
    }
}
@endphp

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

<div class="card py-4 px-4">
    <div class="row">
        @foreach ($layouts 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" style="max-width: 200px; margin-top: 10px;">
                        @endif
                    @elseif ($item['name'] === 'logoPng')
                        <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 PNG" 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>
                    @else
                        <label for="layouts[{{ $index }}][value]">
                            <p><strong>{{ $item['description'] }}</strong></p>
                        </label>
                        <input type="hidden" name="layouts[{{ $index }}][name]" value="{{ $item['name'] }}">

                        <div class="d-flex align-items-center">
                            <input type="text" name="layouts[{{ $index }}][value]" id="color-input-{{ $index }}"
                                   class="form-control" value="{{ $item['value'] ?? '' }}"
                                   placeholder="#FFFFFF" maxlength="7">

                            <input type="color" id="color-picker-{{ $index }}"
                                   class="form-control form-control-color ms-2"
                                   value="{{ $item['value'] ?? '#000000' }}">
                        </div>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        //Script para Sincronizar os Campos
        document.querySelectorAll("[id^='color-input-']").forEach(function (textInput) {
            let index = textInput.id.split("-").pop();
            let colorPicker = document.getElementById("color-picker-" + index);

            textInput.addEventListener("input", function () {
                let value = textInput.value.trim();
                if (/^#([0-9A-F]{3}){1,2}$/i.test(value)) {
                    colorPicker.value = value;
                }
            });

            colorPicker.addEventListener("input", function () {
                textInput.value = colorPicker.value;
            });
        });

        //Script para mostrar as fontes de acordo com o tipo
        const fonts = @json($fontData);
        let fontTypeSelect = document.getElementById('fontType');
        let fontFamilySelect = document.getElementById('fontFamily');
        let selectedFontFamily = @json($selectedFontFamily);

        function updateFontOptions() {
            let selectedType = fontTypeSelect.value;
            fontFamilySelect.innerHTML = '';

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

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

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

        fontTypeSelect.value = @json($selectedFontType);
        updateFontOptions();
    });
</script>