@extends('admin.layouts.app')

@section('content')

<form method="POST" id="news-form" action="{{ isset($news) && $news->id ? route('admin.news.update', $news->id) : route('admin.news.store') }}" enctype="multipart/form-data">
    @csrf
    @if(isset($news) && $news->id)
    @method('PUT')
    @endif

    <div class="row">
        <div class="col-xl-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">{{ isset($news) && $news->id ? __('admin/news.edit_news') : __('admin/news.create_news') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/news.news') }}</a></li>
                        <li class="breadcrumb-item active">{{ isset($news) && $news->id ? __('admin/news.edit') : __('admin/news.create') }}</li>
                    </ol>
                </div>
            </div>

            <!-- Menu bar -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <div class="flex-grow-1">
                                <a href="{{ route('admin.news.index') }}" class="btn btn-light me-2">{{ __('admin/news.close') }}</a>
                                <button type="submit" class="btn btn-info add-btn" id="savenews" data-bs-loading-text="{{ __('admin/news.saving') }}">
                                    <i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/news.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Contenu principal -->
                <div class="col-lg-8">
                    <!-- Onglets de langues -->
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                                @foreach(config('translatable.locales') as $index => $locale)
                                <li class="nav-item">
                                    <a class="nav-link {{ $index === 0 ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $locale }}" role="tab">
                                        {{ strtoupper($locale) }}
                                        <span class="tab-error-indicator d-none text-danger ms-1" id="error-{{ $locale }}">●</span>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="card-body p-4">
                            <div class="tab-content">
                                @foreach(config('translatable.locales') as $index => $locale)
                                <div class="tab-pane {{ $index === 0 ? 'active' : '' }}" id="{{ $locale }}" role="tabpanel">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label class="form-label" for="{{ $locale }}-title">({{ strtoupper($locale) }}) {{ __('admin/news.title') }} <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control @error($locale.'.title') is-invalid @enderror"
                                                    id="title_{{ $locale }}" name="{{ $locale }}[title]"
                                                    value="{{ old($locale.'.title', isset($news) ? $news->translate($locale)?->title : '') }}"
                                                    placeholder="{{ __('admin/news.title_placeholder', ['locale' => strtoupper($locale)]) }}">
                                                @error($locale.'.title')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label class="form-label" for="{{ $locale }}-summary">({{ strtoupper($locale) }}) {{ __('admin/news.summary') }} <span class="text-danger">*</span></label>
                                                <textarea class="form-control @error($locale.'.summary') is-invalid @enderror"
                                                    id="summary_{{ $locale }}" name="{{ $locale }}[summary]"
                                                    rows="3" placeholder="{{ __('admin/news.summary_placeholder', ['locale' => strtoupper($locale)]) }}">{{ old($locale.'.summary', isset($news) ? $news->translate($locale)?->summary : '') }}</textarea>
                                                @error($locale.'.summary')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label class="form-label" for="{{ $locale }}-description">({{ strtoupper($locale) }}) {{ __('admin/news.description') }} <span class="text-danger">*</span></label>
                                                <textarea class="form-control editor @error($locale.'.description') is-invalid @enderror"
                                                    id="description_{{ $locale }}" name="{{ $locale }}[description]"
                                                    rows="10" placeholder="{{ __('admin/news.description_placeholder', ['locale' => strtoupper($locale)]) }}">{{ old($locale.'.description', isset($news) ? $news->translate($locale)?->description : '') }}</textarea>
                                                @error($locale.'.description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Statut et options -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/news.publication') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="status" id="activeswitch" value="1"
                                        {{ old('status', (isset($news) ? $news->status : true)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="activeswitch">
                                        {{ __('admin/news.publish_news') }}
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="form-check form-switch form-switch-md">
                                    <input class="form-check-input" type="checkbox" name="is_important" id="is_important" value="1"
                                        {{ old('is_important', (isset($news) ? $news->is_important : false)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_important">
                                        <i class="ri-star-line me-1"></i>{{ __('admin/news.important_news') }}
                                    </label>
                                    <small class="text-muted d-block">{{ __('admin/news.will_be_displayed_in_popup') }}</small>
                                </div>
                            </div>
                            <!-- Nouveau champ pour la date limite -->
                            <div class="mb-3" id="important-until-container" style="{{ old('is_important', (isset($news) ? $news->is_important : false)) ? '' : 'display: none;' }}">
                                <label for="important_until" class="form-label">{{ __('admin/news.important_until') }}</label>
                                <input type="date" id="important_until" name="important_until"
                                    class="form-control @error('important_until') is-invalid @enderror"
                                    value="{{ old('important_until', isset($news) && $news->important_until ? $news->important_until->format('Y-m-d') : '') }}">
                                <small class="text-muted">{{ __('admin/news.leave_empty_for_unlimited') }}</small>
                                @error('important_until')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="published_at" class="form-label">{{ __('admin/news.publication_date') }}</label>
                                <input type="datetime-local" id="published_at" name="published_at" class="form-control @error('published_at') is-invalid @enderror"
                                    value="{{ old('published_at', isset($news) && $news->published_at ? $news->published_at->format('Y-m-d\TH:i') : now()->format('Y-m-d\TH:i')) }}">
                                @error('published_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Image -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/news.news_image') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="image" class="form-label">{{ __('admin/news.image') }}</label>
                                <input type="file" id="image" name="image" class="form-control @error('image') is-invalid @enderror"
                                    accept="image/*">
                                @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <p class="form-text text-muted mb-0">{{ __('admin/news.image_variants_hint') }}</p>

                                @if(isset($news) && $news->hasPreviewImage())
                                <div class="mt-2">
                                    <img src="{{ $news->image_detail_url }}"
                                        alt="{{ __('admin/news.current_image') }}"
                                        class="img-thumbnail"
                                        style="max-width: 100%; max-height: 240px;">
                                    <div class="mt-1">
                                        <small class="text-muted">{{ __('admin/news.current_image') }}</small>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    @if(isset($news) && $news->id)
                    <!-- Informations -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/news.informations') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/news.created_at') }}</small>
                                <div>{{ $news->created_at->format('d/m/Y à H:i') }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/news.updated_at') }}</small>
                                <div>{{ $news->updated_at->format('d/m/Y à H:i') }}</div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@push('script')
<script>
// Rendre les locales disponibles globalement pour le validateur
window.translatableLocales = {!! json_encode(config('translatable.locales')) !!};

document.addEventListener('DOMContentLoaded', function() {
    const isImportantCheckbox = document.getElementById('is_important');
    const importantUntilContainer = document.getElementById('important-until-container');
    const importantUntilInput = document.getElementById('important_until');

    isImportantCheckbox.addEventListener('change', function() {
        console.log(importantUntilContainer);
        if (this.checked) {
            importantUntilContainer.style.display = 'block';
            // Avertissement que les autres news importantes seront désactivées
            Swal.fire({
                title: "{{ __('admin/news.warning') }}",
                text: "{{ __('admin/news.important_news_warning') }}",
                icon: "warning",
                showCancelButton: !0,
                customClass: {
                    confirmButton: "btn btn-primary w-xs me-2 mt-2",
                    cancelButton: "btn btn-danger w-xs mt-2"
                },
                confirmButtonText: "{{ __('admin/news.yes_continue') }}",
                buttonsStyling: !1,
                showCloseButton: !0
            }).then(function(result) {
                if (result.isConfirmed) {
                    // OK, on continue
                } else {
                    // On désactive la news importante
                    isImportantCheckbox.checked = false;
                    // On cache le champ de date limite
                    importantUntilContainer.style.display = 'none';
                }
            });

        } else {
            importantUntilContainer.style.display = 'none';
            importantUntilInput.value = '';
        }
    });

    const validator = new MultilingualFormValidator({
        formId: 'news-form',
        submitBtnId: 'savenews',
        
        // Champs multilingues requis (title_fr, title_en, content_fr, content_en, etc.)
        fields: ['title', 'summary', 'description'],
        
        // Champs simples requis (si vous en avez)
        singleFields: [],
        
        alertMessage: "{{ __('admin/news.please_fill_all_required_fields') }}",
        loadingText: "{{ __('admin/news.saving') }}",
        debug: false,
        
        onBeforeSubmit: function() {
            // Validations spécifiques aux news
            // console.log('News: Validations spécifiques avant soumission');
            
            // Si news importante, vérifier que la date limite est définie
            if (isImportantCheckbox.checked && !importantUntilInput.value) {
                Swal.fire({
                    title: "{{ __('admin/news.info') }}",
                    text: "{{ __('admin/news.please_define_a_limit_date_for_important_news') }}",
                    icon: "info",
                    customClass: {
                        confirmButton: "btn btn-primary w-xs mt-2"
                    },
                    buttonsStyling: !1,
                    showCloseButton: !0
                });
                importantUntilInput.focus();
                importantUntilInput.classList.add('is-invalid');
                return false;
            }
            
            return true;
        }
    });        
});
</script>
@endpush