@extends('admin.layouts.container')

@section('content')
    <div class="side-title">
        <h3>{{$head ?? '' }}</h3>
    </div>

    <div class="border-item">
        <form class="form-row" method="post" action="{{ $action }}" onsubmit="saveForm(this)" enctype="multipart/form-data">
            @if($page ?? '' && $page->id)
                @method('PUT')
            @endif
            @CSRF

            @foreach($languages as $language)
                                <div class="form-group col-lg-6">
                                    <label>
                                        @if($page->id == 1)
                                            {{ __('pages.page_title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}
                                        @else
                                            {{ meta('title', $language->local) ?? __('pages.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}
                                        @endif
                                    </label>
                                    <input type="text" class="form-control {{ $errors->has('title_' . $language->local) ? 'is-invalid' : '' }}"
                                        name="title_{{ $language->local }}"
                                        placeholder="@if($page->id == 1){{ __('pages.page_title') }}@else{{ meta('title', $language->local) ?? __('pages.title') }}@endif"
                                        value='{{ old("title_{$language->local}", $page[$language->local]->title ?? "") }}'
                                        @if(in_array($page->id ?? null, [11,12,13,14,15,16,17,18,19], true)) readonly @endif />
                                </div>
                @if(in_array($page->id,[10,1,19]))
                    <div class="form-group col-lg-6">
                        <label>{{ $page->id == 19 ? __('pages.page_title_19_1') : __('pages.title_2') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}</label>
                        <input type="text" class="form-control {{ $errors->has('title_2_' . $language->local) ? 'is-invalid' : '' }}"
                            name="title_2_{{ $language->local }}" placeholder="{{ __('pages.title_2') }}"
                            value='{{ old("title_2_{$language->local}", $page[$language->local]->title_2 ?? "") }}' />
                    </div>
                     <div class="form-group col-lg-6">
                        <label>{{ $page->id == 19 ? __('pages.page_title_19_2') :__('pages.title_3') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}</label>
                        <input type="text" class="form-control {{ $errors->has('title_3_' . $language->local) ? 'is-invalid' : '' }}"
                            name="title_3_{{ $language->local }}" placeholder="{{ __('pages.title_3') }}"
                            value='{{ old("title_3_{$language->local}", $page[$language->local]->title_3 ?? "") }}'
                            maxlength="200" />
                        <small class="form-text text-muted">{{ __('pages.char_limit_200') }}</small>
                    </div>
                    @if($page->id == 1)
                        <!--<div class="form-group col-lg-12">-->
                        <!--    <label>{{ __('pages.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }}</label>-->
                        <!--    <textarea name="title_4_{{ $language->local }}" class="form-control {{ $errors->has('title_4_' . $language->local) ? 'is-invalid' : '' }}"-->
                        <!--        placeholder="{{ __('pages.description') }}" maxlength="500" rows="4">{{ old("title_4_{$language->local}", $page[$language->local]->title_4 ?? "") }}</textarea>-->
                        <!--    <small class="form-text text-muted">{{ __('pages.char_limit_500') }}</small>-->
                        <!--</div>-->
                    @else
                        <div class="form-group col-lg-6">
                            <label>{{ $page->id == 19 ? __('pages.page_title_19_3') : meta('title', $language->local) ?? __('pages.title') }}
                                {{ count($languages) > 1 ? "({$language->name})" : '' }} {{ $page->id != 19 ? '(4)' : '' }}</label>
                            <input type="text" class="form-control {{ $errors->has('title_4_' . $language->local) ? 'is-invalid' : '' }}"
                                name="title_4_{{ $language->local }}" placeholder="{{ meta('title', $language->local) ?? __('pages.title') }}"
                                value='{{ old("title_4_{$language->local}", $page[$language->local]->title_4 ?? "") }}' />
                        </div>
                    @endif
                @endif

                @if($page->id != 10 )
                                    <div class="form-group col-lg-12" >
                                        <label>{{ $page->id == 19 ? __('pages.page_description_19_1') : meta('description', $language->local) ?? __('pages.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                        <textarea name="description_{{ $language->local }}" class="form-control {{ $errors->has('description_' . $language->local) ? 'is-invalid' : '' }}" placeholder="{{ meta('description', $language->local) ?? __('pages.description') }}">{{ old("description_{$language->local}", $page[$language->local]->description ?? "") }}</textarea>
                                    </div>
                @endif
                  @if($page->id == 19)
                   <div class="form-group col-lg-12" >
                                        <label>{{ $page->id == 19 ? __('pages.page_description_19_2') : meta('description', $language->local) ?? __('pages.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                        <textarea name="description_2_{{ $language->local }}" class="form-control {{ $errors->has('description_2_' . $language->local) ? 'is-invalid' : '' }}" placeholder="{{ meta('description', $language->local) ?? __('pages.description') }}">{{ old("description_2_{$language->local}", $page[$language->local]->description_2 ?? "") }}</textarea>
                                    </div>
                                     <div class="form-group col-lg-12" >
                                        <label>{{ $page->id == 19 ? __('pages.page_description_19_3') : meta('description', $language->local) ?? __('pages.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                                        <textarea name="description_3_{{ $language->local }}" class="form-control {{ $errors->has('description_3_' . $language->local) ? 'is-invalid' : '' }}" placeholder="{{ meta('description', $language->local) ?? __('pages.description') }}">{{ old("description_3_{$language->local}", $page[$language->local]->description_3 ?? "") }}</textarea>
                                    </div>
                  @endif
            @endforeach
            @if($page->id == 10)
            <div class="form-group col-lg-6">
                    <label>{{ __('pages.value_1') }} </label>
                    <input type="text" class="form-control integers-only {{ $errors->has('value_1') ? 'is-invalid' : '' }}" name="value_1" placeholder="{{ __('pages.value_1') }}" value='{{ old("value_1", $page->value_1 ?? "") }}'/>
                </div>
            <div class="form-group col-lg-6">
                    <label>{{ __('pages.value_2') }} </label>
                    <input type="text" class="form-control integers-only {{ $errors->has('value_2') ? 'is-invalid' : '' }}" name="value_2" placeholder="{{ __('pages.value_2') }}" value='{{ old("value_2", $page->value_2 ?? "") }}'/>
                </div>
            <div class="form-group col-lg-6">
                    <label>{{ __('pages.value_3') }} </label>
                    <input type="text" class="form-control integers-only {{ $errors->has('value_3') ? 'is-invalid' : '' }}" name="value_3" placeholder="{{ __('pages.value_3') }}" value='{{ old("value_3", $page->value_3 ?? "") }}'/>
                </div>
            <div class="form-group col-lg-6">
                    <label>{{ __('pages.value_4') }} </label>
                    <input type="text" class="form-control integers-only {{ $errors->has('value_4') ? 'is-invalid' : '' }}" name="value_4" placeholder="{{ __('pages.value_4') }}" value='{{ old("value_4", $page->value_4 ?? "") }}'/>
                </div>



            <div class="form-group col-lg-6">
                <label>{{ __('pages.image') }} (1)</label>
                <input type="hidden" name="old_image_1" value="{{ $page->image_1 ?? '' }}"/>
                <input type="file" class="form-control {{ $errors->has('image_1') ? 'is-invalid' : '' }}" name="image_1" accept="image/*"/>
                @if(($page->image_1 ?? null) && ($page->image_1_url ?? null))
                    <a href="{{ $page->image_1_url }}" class="btn btn-primary mt-2" target="_new"><i class="fas fa-download"></i></a>
                @endif
            </div>

            <div class="form-group col-lg-6">
                <label>{{ __('pages.image') }} (2)</label>
                <input type="hidden" name="old_image_2" value="{{ $page->image_2 ?? '' }}"/>
                <input type="file" class="form-control {{ $errors->has('image_2') ? 'is-invalid' : '' }}" name="image_2" accept="image/*"/>
                @if(($page->image_2 ?? null) && ($page->image_2_url ?? null))
                    <a href="{{ $page->image_2_url }}" class="btn btn-primary mt-2" target="_new"><i class="fas fa-download"></i></a>
                @endif
            </div>

            <div class="form-group col-lg-6">
                <label>{{ __('pages.image') }} (3)</label>
                <input type="hidden" name="old_image_3" value="{{ $page->image_3 ?? '' }}"/>
                <input type="file" class="form-control {{ $errors->has('image_3') ? 'is-invalid' : '' }}" name="image_3" accept="image/*"/>
                @if(($page->image_3 ?? null) && ($page->image_3_url ?? null))
                    <a href="{{ $page->image_3_url }}" class="btn btn-primary mt-2" target="_new"><i class="fas fa-download"></i></a>
                @endif
            </div>

            <div class="form-group col-lg-6">
                <label>{{ __('pages.image') }} (4)</label>
                <input type="hidden" name="old_image_4" value="{{ $page->image_4 ?? '' }}"/>
                <input type="file" class="form-control {{ $errors->has('image_4') ? 'is-invalid' : '' }}" name="image_4" accept="image/*"/>
                @if(($page->image_4 ?? null) && ($page->image_4_url ?? null))
                    <a href="{{ $page->image_4_url }}" class="btn btn-primary mt-2" target="_new"><i class="fas fa-download"></i></a>
                @endif
            </div>

            @endif
@if($page->id == 19)
  <div class="form-group col-lg-6">
                <label>{{ __('pages.image') }} (2)</label>
                <input type="hidden" name="old_image_2" value="{{ $page->image_2 ?? '' }}"/>
                <input type="file" class="form-control {{ $errors->has('image_2') ? 'is-invalid' : '' }}" name="image_2" accept="image/*"/>
                @if(($page->image_2 ?? null) && ($page->image_2_url ?? null))
                    <a href="{{ $page->image_2_url }}" class="btn btn-primary mt-2" target="_new"><i class="fas fa-download"></i></a>
                @endif
            </div>

            <div class="form-group col-lg-6">
                <label>{{ __('pages.image') }} (3)</label>
                <input type="hidden" name="old_image_3" value="{{ $page->image_3 ?? '' }}"/>
                <input type="file" class="form-control {{ $errors->has('image_3') ? 'is-invalid' : '' }}" name="image_3" accept="image/*"/>
                @if(($page->image_3 ?? null) && ($page->image_3_url ?? null))
                    <a href="{{ $page->image_3_url }}" class="btn btn-primary mt-2" target="_new"><i class="fas fa-download"></i></a>
                @endif
            </div>
              @endif
            @if(!in_array($page->id ?? null, [11,12,13,14,16,17,18], true))
                <div class="form-group col-lg-6">
                    <label>{{ __('pages.image') }} </label>
                    <input id="old_image" class="old_image" type="hidden" name="old_image" value="{{ $page->image ?? ""}}"/>
                    <input type="file" class="form-control {{ $errors->has('image') ? 'is-invalid' : '' }}" name="image" placeholder="{{ __('pages.image') }}" value='{{ old('image', '') }}' accept="image/*"/>
                    @if (($page->image ?? null) && ($page->image_url ?? null))
                        <a href="{{ $page->image_url }}" class="btn btn-primary" target="_new"><i class="fas fa-download"></i></a>
                    @endif
                </div>
            @endif


            <div class="text-center mt-5 col-12">
                <button class="butn"><span>{{ __('dashboard.save') }}</span></button>
            </div>
        </form>
    </div>

@endsection

@section('inner_js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Number inputs
            const numberInputs = document.querySelectorAll('input.numbers-only');
            numberInputs.forEach(input => {
                input.addEventListener('input', function () {
                    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
                });
            });

            // Integer inputs
            const integerInputs = document.querySelectorAll('input.integers-only');
            integerInputs.forEach(input => {
                input.addEventListener('input', function () {
                    this.value = this.value.replace(/\D/g, '');
                });
            });

            // Character count for limited fields
            const limitedInputs = document.querySelectorAll('input[maxlength], textarea[maxlength]');
            limitedInputs.forEach(input => {
                const maxLength = input.getAttribute('maxlength');
                const helpText = input.parentNode.querySelector('.form-text');

                if (helpText) {
                    const updateCount = () => {
                        const currentLength = input.value.length;
                        const remaining = maxLength - currentLength;
                        helpText.textContent = helpText.textContent.split('(')[0] + `(${currentLength}/${maxLength} حرف)`;

                        // Change color based on remaining characters
                        if (remaining < 50) {
                            helpText.style.color = '#dc3545'; // Red
                        } else if (remaining < 100) {
                            helpText.style.color = '#ffc107'; // Yellow
                        } else {
                            helpText.style.color = '#6c757d'; // Gray
                        }
                    };

                    input.addEventListener('input', updateCount);
                    updateCount(); // Initial count
                }
            });
        });
    </script>

@endsection
