@extends('admin.layouts.app')

@section('content')

<form method="POST" id="testimonial-form" action="{{ isset($testimonial) && $testimonial->id ? route('admin.testimonials.update', $testimonial->id) : route('admin.testimonials.store') }}" enctype="multipart/form-data">
    @csrf
    @if(isset($testimonial) && $testimonial->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($testimonial) && $testimonial->id ? __('admin/testimonials.edit_testimonial') : __('admin/testimonials.create_testimonial') }}</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/testimonials.breadcrumb.testimonials') }}</a></li>
                        <li class="breadcrumb-item active">{{ isset($testimonial) && $testimonial->id ? __('admin/testimonials.breadcrumb.edit') : __('admin/testimonials.breadcrumb.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.testimonials.index') }}" class="btn btn-light me-2">{{ __('admin/testimonials.actions.close') }}</a>
                                <button type="submit" class="btn btn-info add-btn" id="savetestimonial" data-bs-loading-text="{{ __('admin/testimonials.system.saving') }}">
                                    <i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/testimonials.actions.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Contenu principal -->
                <div class="col-lg-8">
                    <!-- Informations générales -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/testimonials.general_info.title') }}</h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label class="form-label" for="name">{{ __('admin/testimonials.general_info.name.label') }} <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                                            id="name" name="name"
                                            value="{{ old('name', isset($testimonial) ? $testimonial->name : '') }}"
                                            placeholder="{{ __('admin/testimonials.general_info.name.placeholder') }}">
                                        @error('name')
                                        <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="link">{{ __('admin/testimonials.general_info.link.label') }}</label>
                                        <input type="url" class="form-control @error('link') is-invalid @enderror"
                                            id="link" name="link"
                                            value="{{ old('link', isset($testimonial) ? $testimonial->link : '') }}"
                                            placeholder="{{ __('admin/testimonials.general_info.link.placeholder') }}">
                                        @error('link')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 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($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($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="description_{{ $locale }}">{{ __('admin/testimonials.translations.description.label') }} <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control @error($locale.'.description') is-invalid @enderror"
                                                    id="description_{{ $locale }}" name="{{ $locale }}[description]"
                                                    placeholder="{{ __('admin/testimonials.translations.description.placeholder', ['locale' => strtoupper($locale)]) }}"
                                                    value="{{ old($locale.'.description', isset($testimonial) ? $testimonial->translate($locale)?->description : '') }}">
                                                @error($locale.'.description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <x-admin.tinymce
                                                    name="{{ $locale }}[content]"
                                                    label="{{ __('admin/testimonials.translations.content.label', ['locale' => strtoupper($locale)]) }}"
                                                    :value="isset($testimonial) ? ($testimonial->translate($locale)?->content ?? '') : ''"
                                                    preset="minimal"
                                                    required=true
                                                    id="content_{{ $locale }}" />
                                                @error($locale.'.content')
                                                <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/testimonials.configuration.title') }}</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="is_active" id="activeswitch" value="1"
                                        {{ old('is_active', (isset($testimonial) ? $testimonial->is_active : true)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="activeswitch">
                                        {{ __('admin/testimonials.configuration.active_testimonial') }}
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="order" class="form-label">{{ __('admin/testimonials.configuration.display_order.label') }}</label>
                                <input type="number" id="order" name="order"
                                    class="form-control @error('order') is-invalid @enderror"
                                    value="{{ old('order', isset($testimonial) ? $testimonial->order : 0) }}"
                                    min="0" step="1">
                                <small class="text-muted">{{ __('admin/testimonials.configuration.display_order.help') }}</small>
                                @error('order')
                                <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/testimonials.image.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="image" class="form-label">{{ __('admin/testimonials.image.label') }}</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

                                @if(isset($testimonial) && $testimonial->image)
                                <div class="text-center mt-2">
                                    <img src="{{ asset('storage/' . $testimonial->image) }}"
                                        alt="{{ __('admin/testimonials.image.current_image') }}"
                                        class="img-fluid"
                                        style="max-width: 200px;">
                                    <div class="text-center mt-1">
                                        <small class="text-muted">{{ __('admin/testimonials.image.current_image') }}</small>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    @if(isset($testimonial) && $testimonial->id)
                    <!-- Informations -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/testimonials.detail.information.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/testimonials.detail.information.created_at') }}</small>
                                <div>{{ $testimonial->created_at->format(__('admin/testimonials.date_format.full')) }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/testimonials.detail.information.updated_at') }}</small>
                                <div>{{ $testimonial->updated_at->format(__('admin/testimonials.date_format.full')) }}</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() {

    // Initialiser le validateur multilingue
    const validator = new MultilingualFormValidator({
        formId: 'testimonial-form',
        submitBtnId: 'savetestimonial',
        
        // Champs multilingues requis (title_fr, title_en, content_fr, content_en, etc.)
        fields: ['description', 'content'],
        
        // Champs simples requis (si vous en avez)
        singleFields: ['name'],
        
        alertMessage: "{{ __('admin/testimonials.validation.please_fill_all_required_fields') }}",
        loadingText: "{{ __('admin/testimonials.system.saving') }}",
        debug: false,
        
        onBeforeSubmit: function() {

        }
    });  

    // Vérification du template après initialisation
    setTimeout(() => {
        if (validator.checkTemplate()) {
            console.log('Template HTML correctement configuré');
        } else {
            console.warn('Problèmes détectés dans le template HTML');
        }
    }, 200);

});

   
</script>
@endpush