<h3 class="title">{{ __('Edit Content') }}</h3>

<div class="site-tab-bars">
    <ul class="nav nav-pills" id="pills-tab-render" role="tablist">
        @foreach ($languages as $language)
            <li class="nav-item" role="presentation">
                <a href="#{{ $language->locale }}-render" class="nav-link {{ $loop->first ? 'active' : '' }}"
                    id="pills-{{ $language->locale }}-tab" data-bs-toggle="pill" role="tab"
                    aria-controls="{{ $language->locale }}-render"
                    aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                    <i data-lucide="languages"></i> {{ $language->name }}
                </a>
            </li>
        @endforeach
    </ul>
</div>

<div class="tab-content" id="pills-tabContent">
    @foreach ($groupData as $key => $landingContent)
        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="{{ $key }}-render"
            role="tabpanel" aria-labelledby="pills-{{ $key }}-tab">
            <div class="row">
                <div class="col-xl-12">
                    <form action="{{ route('admin.page.content-update') }}" method="post"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" value="{{ $landingContent['id'] }}">
                        <input type="hidden" name="locale" value="{{ $key }}">
                        
                        @if (in_array($landingContent['type'], [
                            'facilities',
                            'overview',
                            'faq',
                        ]))
                            @foreach ($groupData as $otherKey => $otherContent)
                                @if ($otherKey !== $key)
                                    <input type="hidden" name="otherContents[{{ $otherKey }}][id]" value="{{ $otherContent['id'] }}">
                                    <input type="hidden" name="otherContents[{{ $otherKey }}][title]" value="{{ $otherContent['title'] }}">
                                    <input type="hidden" name="otherContents[{{ $otherKey }}][description]" value="{{ $otherContent['description'] }}">
                                @endif
                            @endforeach
                        @endif

                        @if ($key == 'en')
                            @if ($landingContent['type'] == 'whychooseus')
                                <div class="site-input-groups">
                                    <label class="box-input-label">
                                        {{ __('Icon Name') }}
                                        <a class="link" href="https://fontawesome.com/icons"
                                            target="_blank">{{ __('Fontawesome') }}</a> /
                                        <a class="link" href="{{ asset('frontend/default/fonts/demo.html') }}"
                                            target="_blank">{{ __('Icommon') }}</a>
                                    </label>
                                    <input type="text" name="icon" class="box-input mb-0"
                                        value="{{ $landingContent['icon'] }}" placeholder="Icon Class" required>
                                </div>
                            @endif

                            @if (in_array($landingContent['type'], [
                                    'hero',
                                    'brands',
                                    'facilities',
                                    'about',
                                    'overview',
                                    'login',
                                    'register',
                                    'forgetpassword',
                                ]))
                                <div class="site-input-groups">
                                    <label class="box-input-label">{{ __('Image') }}</label>
                                    <div class="wrap-custom-file">
                                        <input type="file" name="photo" id="photo-{{ $key }}"
                                            accept=".gif, .jpg, .png">
                                        <label for="photo-{{ $key }}" class="file-ok"
                                            style="background-image: url({{ asset($landingContent['photo']) }});">
                                            <img class="upload-icon" src="{{ asset('global/materials/upload.svg') }}"
                                                alt="">
                                            <span>{{ __('Upload') }}</span>
                                        </label>
                                    </div>
                                </div>
                            @endif
                        @endif

                        @if (!in_array($landingContent['type'], ['hero', 'brands']))
                            <div class="site-input-groups">
                                <label class="box-input-label">{{ __('Title:') }}</label>
                                <input type="text" name="title" class="box-input mb-0 title-input" data-lang="{{ $key }}" 
                                    value="{{ $landingContent['title'] }}" required>
                            </div>
                        @endif

                        @if (
                            !in_array($landingContent['type'], [
                                'hero',
                                'brands',
                                'facilities',
                                'overview',
                                'login',
                                'register',
                                'forgetpassword',
                            ]))
                            <div class="site-input-groups mb-0">
                                <label class="box-input-label">{{ __('Description:') }}</label>
                                <textarea name="description" class="form-textarea description-input" placeholder="Description" data-lang="{{ $key }}">{{ $landingContent['description'] }}</textarea>
                            </div>
                        @endif

                        <div class="action-btns">
                            <button type="submit" class="site-btn-sm primary-btn me-2">
                                <i data-lucide="check"></i> {{ __('Save Changes') }}
                            </button>
                            <a href="#" class="site-btn-sm red-btn" data-bs-dismiss="modal" aria-label="Close">
                                <i data-lucide="x"></i> {{ __('Close') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
</div>

<script>
    // Preview selected image
    function filePreview(el, target) {
        const file = el.files[0];
        if (file) {
            const previewUrl = URL.createObjectURL(file);
            const label = document.querySelector(target);
            const labelText = label.querySelector('span');

            label.style.backgroundImage = `url(${previewUrl})`;
            labelText.textContent = file.name;
        }
    }

    document.querySelectorAll('input[type="file"]').forEach(input => {
        input.addEventListener('change', function() {
            filePreview(this, `label[for="${this.id}"]`);
        });
    });
    
    document.querySelectorAll('.title-input').forEach(input => {
        input.addEventListener('change', function() {
            const newTitle = this.value;
            const lang = this.dataset.lang;
            
            const hiddenInputs = document.querySelectorAll(`input[name="otherContents[${lang}][title]"]`);
            hiddenInputs.forEach(hiddenInput => {
                hiddenInput.value = newTitle;
            });
        });
    });
    
    document.querySelectorAll('.description-input').forEach(input => {
        input.addEventListener('change', function() {
            const newDescription = this.value;
            const lang = this.dataset.lang;
            
            const hiddenInputs = document.querySelectorAll(`input[name="otherContents[${lang}][description]"]`);
            hiddenInputs.forEach(hiddenInput => {
                hiddenInput.value = newDescription;
            });
        });
    });
</script>
