@extends('admin.layouts.app')

@push('css')
<link href="{{ asset('admin/assets/libs/bootstrap-select2/select2.min.css') }}" rel="stylesheet" />
<link href="{{ asset('admin/assets/libs/bootstrap-select2/select2-bootstrap-5-theme.min.css') }}" rel="stylesheet" />
@endpush

@section('content')

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

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

            <!-- Menu bar -->
            <div class="col-lg-12 sticky-menu-bar">
                <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.trainings.index') }}" class="btn btn-light me-2">{{ __('admin/trainings.actions.close') }}</a>
                                <button type="submit" class="btn btn-info add-btn" id="savetraining" data-bs-loading-text="{{ __('admin/trainings.system.saving') }}">
                                    <i class="ri-save-line me-1 align-bottom"></i> {{ __('admin/trainings.actions.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if ($errors->any())
            <div class="row">
                <div class="col-lg-12">
                <div class="alert alert-danger">
                    <h5 class="alert-heading">{{ __('admin/trainings.validation.validation_errors') }}</h5>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            @endif


            <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) }}
                                        <!-- Indicateur d'erreur pour l'onglet -->
                                        <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="title_{{ $locale }}">{{ __('admin/trainings.general_info.title.label') }} <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control @error($locale.'.title') is-invalid @enderror"
                                                    id="title_{{ $locale }}" name="{{ $locale }}[title]"
                                                    placeholder="{{ __('admin/trainings.general_info.title.placeholder', ['locale' => strtoupper($locale)]) }}"
                                                    value="{{ old($locale.'.title', isset($training) ? $training->translate($locale)?->title : '') }}">
                                                @error($locale.'.title')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="accroche_first_{{ $locale }}">{{ __('admin/trainings.general_info.accroche_first.label') }}</label>
                                                <input type="text" class="form-control @error($locale.'.accroche_first') is-invalid @enderror"
                                                    id="accroche_first_{{ $locale }}" name="{{ $locale }}[accroche_first]"
                                                    placeholder="{{ __('admin/trainings.general_info.accroche_first.placeholder', ['locale' => strtoupper($locale)]) }}"
                                                    value="{{ old($locale.'.accroche_first', isset($training) ? $training->translate($locale)?->accroche_first : '') }}">
                                                @error($locale.'.accroche_first')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="accroche_second_{{ $locale }}">{{ __('admin/trainings.general_info.accroche_second.label') }}</label>
                                                <input type="text" class="form-control @error($locale.'.accroche_second') is-invalid @enderror"
                                                    id="accroche_second_{{ $locale }}" name="{{ $locale }}[accroche_second]"
                                                    placeholder="{{ __('admin/trainings.general_info.accroche_second.placeholder', ['locale' => strtoupper($locale)]) }}"
                                                    value="{{ old($locale.'.accroche_second', isset($training) ? $training->translate($locale)?->accroche_second : '') }}">
                                                @error($locale.'.accroche_second')
                                                <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/trainings.general_info.content.label', ['locale' => strtoupper($locale)]) }}"
                                                    :value="isset($training) ? ($training->translate($locale)?->content ?? '') : ''"
                                                    preset="full"
                                                    required=true
                                                    id="content_{{ $locale }}" />
                                                @error($locale.'.content')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Sessions de formation -->
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex align-items-center justify-content-between">
                                <h5 class="card-title mb-0">{{ __('admin/trainings.sessions.title') }}</h5>
                                <button type="button" class="btn btn-primary" id="add-session">
                                    <i class="ri-add-line me-1"></i>{{ __('admin/trainings.sessions.add_session') }}
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="sessions-container">
                                @if(isset($training) && $training->sessions->count() > 0)
                                    @foreach($training->sessions as $index => $session)
                                    <div class="session-item border rounded p-3 mb-3" data-session-index="{{ $index }}">
                                        <div class="d-flex align-items-center justify-content-between mb-3">
                                            <h6 class="mb-0"><small class="text-muted">({{ $session->id }})</small> <span class="session-title">{{ __('admin/trainings.sessions.session_title', ['number' => $index + 1]) }}</span></h6>
                                            <!-- <button type="button" class="btn btn-danger btn-sm remove-session">
                                                <i class="ri-delete-bin-line"></i>
                                            </button> -->
                                            <button type="button" 
                                                class="btn btn-danger btn-sm open-delete-session-modal"
                                                data-bs-toggle="modal"
                                                href="#deleteSessionModal"
                                                data-session-index="{{ $index }}"
                                                data-session-name="{{ $session->name }}">
                                                <i class="ri-delete-bin-line"></i>
                                            </button>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">{{ __('admin/trainings.sessions.name.label') }} <span class="text-danger">*</span></label>
                                                            <input type="text" class="form-control"
                                                                name="sessions[{{ $index }}][name]"
                                                                value="{{ old('sessions.'.$index.'.name', $session->name) }}"
                                                                placeholder="{{ __('admin/trainings.sessions.name.placeholder') }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">{{ __('admin/trainings.sessions.seats_available.label') }}</label>
                                                            <input type="number" class="form-control"
                                                                name="sessions[{{ $index }}][seats_available]"
                                                                value="{{ old('sessions.'.$index.'.seats_available', $session->seats_available) }}"
                                                                min="0" placeholder="{{ __('admin/trainings.sessions.seats_available.placeholder') }}">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="mb-3">
                                                            <label class="form-label">{{ __('admin/trainings.sessions.dates.label') }} <span class="text-danger">*</span></label>
                                                            <input type="text" class="form-control"
                                                                name="sessions[{{ $index }}][dates]"
                                                                value="{{ old('sessions.'.$index.'.dates', is_array($session->dates) ? implode(', ', $session->dates) : $session->dates) }}"
                                                                data-provider="flatpickr"
                                                                data-date-format="Y-m-d"
                                                                data-multiple-date="true"
                                                                placeholder="{{ __('admin/trainings.sessions.dates.placeholder') }}">
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="mb-3">
                                                            <label class="form-label">{{ __('admin/trainings.sessions.remarks.label') }}</label>
                                                            <textarea class="form-control" rows="2"
                                                                name="sessions[{{ $index }}][remarks]"
                                                                placeholder="{{ __('admin/trainings.sessions.remarks.placeholder') }}">{{ old('sessions.'.$index.'.remarks', $session->remarks) }}
                                                            </textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="mb-3">
                                                            <label class="form-label">{{ __('admin/trainings.sessions.files.label') }}</label>
                                                            
                                                            @if($session->files->count() > 0)
                                                                <div class="mb-4">
                                                                    <small class="text-muted">{{ __('admin/trainings.sessions.files.existing') }}</small>
                                                                    <div class="list-group mt-2">
                                                                        @foreach($session->files as $file)
                                                                            <div class="list-group-item d-flex justify-content-between align-items-center" id="file-{{ $file->id }}">
                                                                                <div>
                                                                                    <i class="ri-file-line me-2"></i>
                                                                                    <a href="{{ $file->url }}" target="_blank">{{ $file->original_name }}</a>
                                                                                    <small class="text-muted ms-2">({{ $file->formatted_size }})</small>
                                                                                </div>
                                                                                <button type="button" 
                                                                                    class="btn btn-sm btn-danger open-delete-file-modal"
                                                                                    data-bs-toggle="modal"
                                                                                    href="#deleteFileModal"
                                                                                    data-file-id="{{ $file->id }}"
                                                                                    data-file-name="{{ $file->original_name }}"
                                                                                    data-session-index="{{ $index }}">
                                                                                    <i class="ri-delete-bin-line"></i>
                                                                                </button>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            @endif
                                                            
                                                            <input type="file" class="form-control" 
                                                                name="sessions[{{ $index }}][files][]" 
                                                                multiple
                                                                accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png,.gif,.webp">
                                                            <small class="text-muted">{{ __('admin/trainings.sessions.files.help') }}</small>
                                                        </div>
                                                    </div>                                                    
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox"
                                                                name="sessions[{{ $index }}][is_closed]"
                                                                value="1"
                                                                {{ old('sessions.'.$index.'.is_closed', $session->is_closed) ? 'checked' : '' }}
                                                                id="session-{{ $index }}-closed">
                                                            <label class="form-check-label" for="session-{{ $index }}-closed">
                                                                {{ __('admin/trainings.sessions.is_closed') }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="card bg-light">
                                                    <div class="card-header py-2">
                                                        <h6 class="mb-0 text-muted">{{ __('admin/trainings.sessions.planned_dates') }}</h6>
                                                    </div>
                                                    <div class="card-body py-2">
                                                        @if($session->dates && is_array($session->dates) && count($session->dates) > 0)
                                                        @foreach($session->dates as $date)
                                                        <div class="mb-1">
                                                            <small class="text-dark">
                                                                <i class="ri-calendar-line me-1"></i>
                                                                {{ \Carbon\Carbon::parse($date)->locale('fr')->isoFormat('dddd D MMMM YYYY') }}
                                                            </small>
                                                        </div>
                                                        @endforeach
                                                        @else
                                                        <small class="text-muted fst-italic">{{ __('admin/trainings.sessions.no_planned_dates') }}</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <input type="hidden" name="sessions[{{ $index }}][id]" value="{{ $session->id }}">
                                    </div>
                                    @endforeach
                                @endif
                                <!-- Le conteneur est maintenant vide pour les nouvelles formations -->
                            </div>

                            <!-- Message d'information quand aucune session -->
                            <div id="no-sessions-message" class="text-center text-muted py-4" style="{{ (isset($training) && $training->sessions->count() > 0) ? 'display: none;' : '' }}">
                                <i class="ri-calendar-line fs-24 mb-2 d-block"></i>
                                <p class="mb-0">{{ __('admin/trainings.sessions.no_sessions') }}</p>
                                <small>{{ __('admin/trainings.sessions.no_sessions_help') }}</small>
                            </div>

                            <div class="text-muted small mt-3">
                                <i class="ri-information-line me-1"></i>
                                {{ __('admin/trainings.sessions.dates_help') }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Configuration générale -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/trainings.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($training) ? $training->is_active : true)) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="activeswitch">
                                        {{ __('admin/trainings.configuration.active_training') }}
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="order" class="form-label">{{ __('admin/trainings.configuration.order.label') }}</label>
                                <input type="number" id="order" name="order"
                                    class="form-control @error('order') is-invalid @enderror"
                                    value="{{ old('order', isset($training) ? $training->order : 0) }}"
                                    min="0" step="1">
                                @error('order')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="color" class="form-label">{{ __('admin/trainings.configuration.color.label') }}</label>
                                <input type="text" id="color" name="color"
                                    class="form-control colorpicker-input form-control-color1 @error('color') is-invalid @enderror"
                                    value="{{ old('color', isset($training) ? $training->color : '#007bff') }}">
                                @error('color')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror

                            </div>
                        </div>
                    </div>

                    <!-- Tarification -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/trainings.pricing.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="price" class="form-label">{{ __('admin/trainings.pricing.normal_price.label') }} <span class="text-danger">*</span></label>
                                <input type="number" id="price" name="price"
                                    class="form-control @error('price') is-invalid @enderror"
                                    value="{{ old('price', isset($training) ? $training->price : '') }}"
                                    min="0" step="1" placeholder="{{ __('admin/trainings.pricing.normal_price.placeholder') }}">
                                @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="student_price" class="form-label">{{ __('admin/trainings.pricing.student_price.label') }} </label>
                                <input type="number" id="student_price" name="student_price"
                                    class="form-control @error('student_price') is-invalid @enderror"
                                    value="{{ old('student_price', isset($training) ? $training->student_price : '') }}"
                                    min="0" step="1" placeholder="{{ __('admin/trainings.pricing.student_price.placeholder') }}">
                                @error('student_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Détails de formation -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/trainings.details.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="nb_seminars" class="form-label">{{ __('admin/trainings.details.nb_seminars.label') }}</label>
                                <input type="number" id="nb_seminars" name="nb_seminars"
                                    class="form-control @error('nb_seminars') is-invalid @enderror"
                                    value="{{ old('nb_seminars', isset($training) ? $training->nb_seminars : '') }}"
                                    min="0" step="1" placeholder="{{ __('admin/trainings.details.nb_seminars.placeholder') }}">
                                @error('nb_seminars')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="nb_cheques" class="form-label">{{ __('admin/trainings.details.nb_cheques.label') }}</label>
                                <input type="number" id="nb_cheques" name="nb_cheques"
                                    class="form-control @error('nb_cheques') is-invalid @enderror"
                                    value="{{ old('nb_cheques', isset($training) ? $training->nb_cheques : '') }}"
                                    min="0" step="1" placeholder="{{ __('admin/trainings.details.nb_cheques.placeholder') }}">
                                @error('nb_cheques')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="ufc" class="form-label">{{ __('admin/trainings.details.ufc.label') }}</label>
                                <input type="text" id="ufc" name="ufc"
                                    class="form-control @error('ufc') is-invalid @enderror"
                                    value="{{ old('ufc', isset($training) ? $training->ufc : '') }}"
                                    placeholder="{{ __('admin/trainings.details.ufc.placeholder') }}">
                                @error('ufc')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="training_location_id" class="form-label">{{ __('admin/trainings.details.location.label') }}</label>
                                <select id="training_location_id" name="training_location_id" class="form-select @error('training_location_id') is-invalid @enderror">
                                    <option value="">{{ __('admin/trainings.details.location.placeholder') }}</option>
                                    @foreach($trainingLocations as $location)
                                    <option value="{{ $location->id }}" {{ old('training_location_id', isset($training) ? $training->training_location_id : '') == $location->id ? 'selected' : '' }}>
                                        {{ $location->name }} - {{ $location->city }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('training_location_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>


                        </div>
                    </div>

                    <!-- Catégories et intervenants -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/trainings.categories_teams.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="categories" class="form-label">{{ __('admin/trainings.categories_teams.categories.label') }}</label>
                                <select id="categories" name="categories[]" class="form-select @error('categories') is-invalid @enderror" multiple data-placeholder="{{ __('admin/trainings.categories_teams.categories.placeholder') }}">
                                    @foreach($categories as $category)
                                    <option value="{{ $category->id }}" 
                                        {{ (collect(old('categories', isset($training) ? $training->categories->pluck('id')->toArray() : []))->contains($category->id)) ? 'selected' : '' }}>
                                        {{ $category->translate(app()->getLocale())->name ?? $category->translate()->name }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('categories')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">{{ __('admin/trainings.categories_teams.categories.help') }}</small>
                            </div>

                            <div class="mb-3">
                                <label for="teams" class="form-label">{{ __('admin/trainings.categories_teams.teams.label') }}</label>
                                <select id="teams" name="teams[]" class="form-select @error('teams') is-invalid @enderror" multiple data-placeholder="{{ __('admin/trainings.categories_teams.teams.placeholder') }}">
                                    @foreach($teams as $team)
                                    <option value="{{ $team->id }}" 
                                        {{ (collect(old('teams', isset($training) ? $training->teams->pluck('id')->toArray() : []))->contains($team->id)) ? 'selected' : '' }}>
                                        {{ $team->firstname }} {{ $team->lastname }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('teams')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">{{ __('admin/trainings.categories_teams.teams.help') }}</small>
                            </div>                            
                        </div>
                    </div>                    

                    <!-- Image principale -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/trainings.images.main_image.title') }}</h5>
                        </div>
                        <div class="card-body">
                            @if(isset($training) && $training->image)
                            <div class="mb-3">
                                <img src="{{ asset('storage/' . $training->image) }}" alt="{{ __('admin/trainings.images.main_image.title') }}" class="img-fluid rounded">
                            </div>
                            @endif

                            <div class="mb-3">
                                <label for="image" class="form-label">{{ isset($training) && $training->image ? __('admin/trainings.images.main_image.change_label') : __('admin/trainings.images.main_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
                            </div>
                        </div>
                    </div>

                    <!-- Images additionnelles -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/trainings.images.additional_images.title') }}</h5>
                        </div>
                        <div class="card-body">
                            @if(isset($training) && $training->images->count() > 0)
                            <!-- Images existantes -->
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/trainings.images.additional_images.current_images') }}</label>
                                <div class="row" id="existing-images">
                                    @foreach($training->images as $trainingImage)
                                    <div class="col-lg-6 mb-3" id="image-{{ $trainingImage->id }}">
                                        <div class="card">
                                            <div class="card-body p-2">
                                                <div class="position-relative">
                                                    <img src="{{ $trainingImage->image_url }}" 
                                                         class="img-fluid rounded" 
                                                         style="max-height: 150px; width: 100%; object-fit: cover;">
                                                    <button type="button" 
                                                            class="btn btn-danger btn-sm position-absolute top-0 end-0 m-1 open-delete-image-modal"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#deleteImageModal"
                                                            data-image-id="{{ $trainingImage->id }}"
                                                            data-bs-toggle-tooltip 
                                                            title="{{ __('admin/trainings.tooltips.delete_image') }}">
                                                        <i class="ri-delete-bin-line"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            @endif

                            <!-- Upload de nouvelles images -->
                            <div class="mb-3">
                                <label class="form-label">{{ __('admin/trainings.images.additional_images.add_new_images') }}</label>
                                <input type="file" 
                                       class="form-control @error('additional_images.*') is-invalid @enderror" 
                                       name="additional_images[]" 
                                       multiple 
                                       accept="image/*"
                                       id="additional-images-input">
                                <small class="text-muted">
                                    {{ __('admin/trainings.images.additional_images.formats_help') }}
                                </small>
                                @error('additional_images.*')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Prévisualisation des nouvelles images -->
                            <div id="new-images-preview" class="row" style="display: none;">
                                <div class="col-12 mb-2">
                                    <label class="form-label text-muted">{{ __('admin/trainings.images.additional_images.preview') }}</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Informations additionnelles -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/trainings.additional_info.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="target_audience" class="form-label">{{ __('admin/trainings.additional_info.target_audience.label') }}</label>
                                <textarea id="target_audience" name="target_audience"
                                    class="form-control @error('target_audience') is-invalid @enderror"
                                    rows="3" placeholder="{{ __('admin/trainings.additional_info.target_audience.placeholder') }}">{{ old('target_audience', isset($training) ? $training->target_audience : '') }}</textarea>
                                @error('target_audience')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="remarks" class="form-label">{{ __('admin/trainings.additional_info.remarks.label') }}</label>
                                <textarea id="remarks" name="remarks"
                                    class="form-control @error('remarks') is-invalid @enderror"
                                    rows="3" placeholder="{{ __('admin/trainings.additional_info.remarks.placeholder') }}">{{ old('remarks', isset($training) ? $training->remarks : '') }}</textarea>
                                @error('remarks')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    @if(isset($training) && $training->id)
                    <!-- Informations de création/modification -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin/trainings.history.title') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/trainings.history.created_at') }}</small>
                                <div>{{ $training->created_at->format(__('admin/trainings.date_format.full')) }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">{{ __('admin/trainings.history.updated_at') }}</small>
                                <div>{{ $training->updated_at->format(__('admin/trainings.date_format.full')) }}</div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

<!-- toast messages -->
<x-admin.toast-messages />

<!-- Modal de suppression d'image -->
<x-admin.delete-modal
    modal-id="deleteImageModal"
    item-type="{{ __('admin/trainings.delete_modal.image_item_type') }}"
    confirm-text="{{ __('admin/trainings.delete_modal.image_confirm_text') }}"
    delete-text="{{ __('admin/trainings.delete_modal.image_delete_text') }}"
    cancel-text="{{ __('admin/trainings.delete_modal.cancel_text') }}" />
    
<!-- Modal de suppression de session -->
<x-admin.delete-modal
    modal-id="deleteSessionModal"
    item-type="{{ __('admin/trainings.sessions.delete_modal.item_type') }}"
    confirm-text="{{ __('admin/trainings.sessions.delete_modal.confirm_text') }}"
    delete-text="{{ __('admin/trainings.sessions.delete_modal.delete_text') }}"
    cancel-text="{{ __('admin/trainings.delete_modal.cancel_text') }}" />    

    <!-- Modal de suppression de fichier -->
<x-admin.delete-modal
    modal-id="deleteFileModal"
    item-type="{{ __('admin/trainings.sessions.files.delete_modal.item_type') }}"
    confirm-text="{{ __('admin/trainings.sessions.files.delete_modal.confirm_text') }}"
    delete-text="{{ __('admin/trainings.sessions.files.delete_modal.delete_text') }}"
    cancel-text="{{ __('admin/trainings.delete_modal.cancel_text') }}" />


@endsection

@push('script')
<script src="{{ asset('admin/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('admin/assets/libs/tinyColorPicker/tinyColorPicker.js') }}"></script>
<script src="{{ asset('admin/assets/libs/bootstrap-select2/select2.min.js') }}"></script>


<script>
    // Configuration des locales pour le validateur
    window.translatableLocales = {!! json_encode(config('translatable.locales')) !!};

    $(function() {
        $('#color').colorPicker();
        
        // Initialiser Select2 pour les intervenants
        $('#teams').select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: '{{ __("admin/trainings.categories_teams.teams.placeholder") }}',
            allowClear: true,
            closeOnSelect: false
        });
        // Initialiser Select2 pour les catégories
        $('#categories').select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: '{{ __("admin/trainings.categories_teams.categories.placeholder") }}',
            allowClear: true,
            closeOnSelect: false
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        let sessionIndex = {{ isset($training) && $training->sessions->count() > 0 ? $training->sessions->count() : 0 }};

        // validation formulaire
        const trainingValidator = new MultilingualFormValidator({
            formId: 'training-form',
            submitBtnId: 'savetraining',
            
            // Champs traduits obligatoires (title_fr, title_en, content_fr, content_en)
            fields: ['title', 'content'], 
            
            // Champs NON traduits obligatoires
            singleFields: ['price'],
            
            alertMessage: "{{ __('admin/trainings.validation.required_fields') }}",
            loadingText: "{{ __('admin/trainings.system.saving') }}",
            debug: true,
            
            onBeforeSubmit: function() {
                // Validation des sessions si elles existent
                const sessionItems = document.querySelectorAll('.session-item');
                let sessionsValid = true;
                
                sessionItems.forEach((item, index) => {
                    const nameInput = item.querySelector('input[name*="[name]"]');
                    const datesInput = item.querySelector('input[name*="[dates]"]');

                    if (nameInput && !nameInput.value.trim()) {
                        nameInput.classList.add('is-invalid');
                        sessionsValid = false;
                    } else if (nameInput) {
                        nameInput.classList.remove('is-invalid');
                    }

                    if (datesInput && !datesInput.value.trim()) {
                        datesInput.classList.add('is-invalid');
                        sessionsValid = false;
                    } else if (datesInput) {
                        datesInput.classList.remove('is-invalid');
                    }
                });

                if (!sessionsValid) {
                    alert('{{ __("admin/trainings.validation.sessions_incomplete") }}');
                    return false;
                }

                // Synchroniser TinyMCE
                if (typeof tinymce !== 'undefined' && tinymce.editors) {
                    tinymce.editors.forEach(function(editor) {
                        if (editor.id.includes('content_')) {
                            editor.save();
                        }
                    });
                }

                return true;
            }
        });

        // ===============================
        // GESTION DES SESSIONS
        // ===============================

        // Template pour une nouvelle session
        function getSessionTemplate(index) {
            return `
            <div class="session-item border rounded p-3 mb-3" data-session-index="${index}">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="mb-0"><span class="session-title">{{ __('admin/trainings.sessions.session_title', ['number' => '']) }}${index + 1}</span></h6>
                    <button type="button" 
                        class="btn btn-danger btn-sm open-delete-session-modal"
                        data-bs-toggle="modal"
                        href="#deleteSessionModal"
                        data-session-index="${index}"
                        data-session-name="Session ${index + 1}">
                        <i class="ri-delete-bin-line"></i>
                    </button>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/trainings.sessions.name.label') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" 
                                name="sessions[${index}][name]" 
                                placeholder="{{ __('admin/trainings.sessions.name.placeholder') }}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/trainings.sessions.seats_available.label') }}</label>
                            <input type="number" class="form-control" 
                                name="sessions[${index}][seats_available]" 
                                min="0" placeholder="{{ __('admin/trainings.sessions.seats_available.placeholder') }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/trainings.sessions.dates.label') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" 
                                name="sessions[${index}][dates]" 
                                data-provider="flatpickr" 
                                data-date-format="Y-m-d" 
                                data-multiple-date="true"
                                placeholder="{{ __('admin/trainings.sessions.dates.placeholder') }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/trainings.sessions.remarks.label') }}</label>
                            <textarea class="form-control" rows="2" 
                                name="sessions[${index}][remarks]" 
                                placeholder="{{ __('admin/trainings.sessions.remarks.placeholder') }}"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label class="form-label">{{ __('admin/trainings.sessions.files.label') }}</label>
                            <input type="file" class="form-control" 
                                name="sessions[\${index}][files][]" 
                                multiple
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png,.gif,.webp">
                            <small class="text-muted">{{ __('admin/trainings.sessions.files.help') }}</small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" 
                                name="sessions[${index}][is_closed]" 
                                value="1" 
                                id="session-${index}-closed">
                            <label class="form-check-label" for="session-${index}-closed">
                                {{ __('admin/trainings.sessions.is_closed') }}
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        `;
        }

        // Fonction pour afficher/masquer le message "aucune session"
        function toggleNoSessionsMessage() {
            const container = document.getElementById('sessions-container');
            const message = document.getElementById('no-sessions-message');
            
            if (container.children.length === 0) {
                message.style.display = 'block';
            } else {
                message.style.display = 'none';
            }
        }

        // Ajouter une nouvelle session
        document.getElementById('add-session').addEventListener('click', function() {
            const container = document.getElementById('sessions-container');
            const newSession = document.createElement('div');
            newSession.innerHTML = getSessionTemplate(sessionIndex);
            container.appendChild(newSession.firstElementChild);

            // Réinitialiser Flatpickr pour le nouveau champ
            const newDateInput = container.lastElementChild.querySelector('[data-provider="flatpickr"]');
            if (newDateInput && typeof flatpickr !== 'undefined') {
                flatpickr(newDateInput, {
                    mode: 'multiple',
                    dateFormat: 'Y-m-d',
                    conjunction: ', '
                });
            }

            updateSessionTitles();
            toggleNoSessionsMessage();
            sessionIndex++;
        });

        // Supprimer une session
        document.addEventListener('click', function(e) {
            if (e.target.closest('.open-delete-session-modal')) {
                const button = e.target.closest('.open-delete-session-modal');
                const sessionIndex = button.getAttribute('data-session-index');
                const sessionName = button.getAttribute('data-session-name');
                const modal = document.getElementById('deleteSessionModal');
                
                if (modal && sessionIndex) {
                    const deleteForm = modal.querySelector('#delete-form-deleteSessionModal');
                    if (deleteForm) {
                        deleteForm.setAttribute('data-session-index', sessionIndex);
                    }
                    
                    const itemNameElement = modal.querySelector('#item-name-text-deleteSessionModal');
                    if (itemNameElement) {
                        itemNameElement.textContent = sessionName;
                    }
                }
            }
        });
        const deleteSessionModal = document.getElementById('deleteSessionModal');
        if (deleteSessionModal) {
            const deleteForm = deleteSessionModal.querySelector('#delete-form-deleteSessionModal');
            if (deleteForm) {
                deleteForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const sessionIndex = this.getAttribute('data-session-index');
                    if (!sessionIndex) return;
                    
                    const submitBtn = this.querySelector('button[type="submit"]');
                    const btnText = submitBtn.querySelector('.btn-text');
                    const btnLoading = submitBtn.querySelector('.btn-loading');
                    
                    // AJOUTER : Afficher le spinner
                    btnText.classList.add('d-none');
                    btnLoading.classList.remove('d-none');
                    submitBtn.disabled = true;
                    
                    const sessionItem = document.querySelector(`.session-item[data-session-index="${sessionIndex}"]`);
                    if (sessionItem) {
                        sessionItem.remove();
                    }
                    
                    updateSessionTitles();
                    toggleNoSessionsMessage();
                    
                    const modal = bootstrap.Modal.getInstance(deleteSessionModal);
                    if (modal) {
                        modal.hide();
                    }
                    
                    // AJOUTER : Masquer le spinner
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    submitBtn.disabled = false;
                    
                    if (typeof showSuccessToast === 'function') {
                        showSuccessToast('{{ __("admin/trainings.sessions.delete_success") }}');
                    }
                });
            }
        }        

        // Mettre à jour les titres des sessions
        function updateSessionTitles() {
            const sessionItems = document.querySelectorAll('.session-item');
            sessionItems.forEach((item, index) => {
                const title = item.querySelector('.session-title');
                if (title) {
                    title.textContent = `{{ __('admin/trainings.sessions.session_title', ['number' => '']) }}${index + 1}`;
                }

                // Mettre à jour les indices des champs
                item.setAttribute('data-session-index', index);

                // Mettre à jour les noms des champs
                const inputs = item.querySelectorAll('input, textarea, select');
                inputs.forEach(input => {
                    const name = input.getAttribute('name');
                    if (name && name.includes('sessions[')) {
                        const newName = name.replace(/sessions\[\d+\]/, `sessions[${index}]`);
                        input.setAttribute('name', newName);
                    }

                    // Mettre à jour les IDs pour les checkboxes
                    const id = input.getAttribute('id');
                    if (id && id.includes('session-') && id.includes('-closed')) {
                        const newId = `session-${index}-closed`;
                        input.setAttribute('id', newId);

                        // Mettre à jour le label correspondant
                        const label = item.querySelector(`label[for="${id}"]`);
                        if (label) {
                            label.setAttribute('for', newId);
                        }
                    }
                });
            });
        }

        // ===============================
        // GESTION DES IMAGES ADDITIONNELLES
        // ===============================
        
        document.getElementById('additional-images-input').addEventListener('change', function(e) {
            const files = e.target.files;
            const previewContainer = document.getElementById('new-images-preview');
            
            // Vider le conteneur de prévisualisation
            const previews = previewContainer.querySelectorAll('.preview-image');
            previews.forEach(preview => preview.remove());
            
            if (files.length > 0) {
                previewContainer.style.display = 'block';
                
                Array.from(files).forEach((file, index) => {
                    if (file.type.startsWith('image/')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const previewDiv = document.createElement('div');
                            previewDiv.className = 'col-lg-6 mb-3 preview-image';
                            previewDiv.innerHTML = `
                                <div class="card">
                                    <div class="card-body p-2">
                                        <div class="position-relative">
                                            <img src="${e.target.result}" 
                                                 class="img-fluid rounded" 
                                                 style="max-height: 150px; width: 100%; object-fit: cover;">
                                            <div class="position-absolute top-0 end-0 m-1">
                                                <span class="badge bg-success">{{ __('admin/trainings.images.additional_images.new_badge') }}</span>
                                            </div>
                                        </div>
                                        <small class="text-muted">${file.name}</small>
                                    </div>
                                </div>
                            `;
                            previewContainer.appendChild(previewDiv);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            } else {
                previewContainer.style.display = 'none';
            }
        });

        // ===============================
        // GESTION DE LA MODAL DE SUPPRESSION D'IMAGE
        // ===============================
        
        document.addEventListener('click', function(e) {
            if (e.target.closest('.open-delete-image-modal')) {
                const button = e.target.closest('.open-delete-image-modal');
                const imageId = button.getAttribute('data-image-id');
                const modal = document.getElementById('deleteImageModal');
                
                if (modal && imageId) {
                    const deleteForm = modal.querySelector('#delete-form-deleteImageModal');
                    if (deleteForm) {
                        deleteForm.setAttribute('data-image-id', imageId);
                    }
                    
                    const itemNameElement = modal.querySelector('#item-name-text-deleteImageModal');
                    if (itemNameElement) {
                        itemNameElement.textContent = `Image #${imageId}`;
                    }
                }
            }
        });

        // Gérer la soumission de la modal de suppression d'image
        const deleteImageModal = document.getElementById('deleteImageModal');
        if (deleteImageModal) {
            const deleteForm = deleteImageModal.querySelector('#delete-form-deleteImageModal');
            if (deleteForm) {
                deleteForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const imageId = this.getAttribute('data-image-id');
                    if (!imageId) return;
                    
                    const submitBtn = this.querySelector('button[type="submit"]');
                    const btnText = submitBtn.querySelector('.btn-text');
                    const btnLoading = submitBtn.querySelector('.btn-loading');
                    
                    // Afficher le spinner
                    btnText.classList.add('d-none');
                    btnLoading.classList.remove('d-none');
                    submitBtn.disabled = true;
                    
                    // Effectuer la suppression
                    fetch(`{{ route('admin.trainings.remove-image', '__IMAGE_ID__') }}`.replace('__IMAGE_ID__', imageId), {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const imageElement = document.getElementById('image-' + imageId);
                            if (imageElement) {
                                imageElement.remove();
                            }
                            
                            const modal = bootstrap.Modal.getInstance(deleteImageModal);
                            if (modal) {
                                modal.hide();
                            }
                            
                            if (typeof showSuccessToast === 'function') {
                                showSuccessToast('{{ __("admin/trainings.messages.image_deleted_success") }}');
                            }
                        } else {
                            throw new Error(data.message || '{{ __("admin/trainings.messages.image_delete_error") }}');
                        }
                    })
                    .catch(error => {
                        if (typeof showErrorToast === 'function') {
                            showErrorToast('{{ __("admin/trainings.messages.image_delete_error") }}');
                        } else {
                            alert('{{ __("admin/trainings.messages.image_delete_error") }}');
                        }
                    })
                    .finally(() => {
                        btnText.classList.remove('d-none');
                        btnLoading.classList.add('d-none');
                        submitBtn.disabled = false;
                    });
                });
            }
        }

        
        // Initialiser Flatpickr pour les champs de dates existants
        document.querySelectorAll('[data-provider="flatpickr"]').forEach(function(element) {
            if (typeof flatpickr !== 'undefined') {
                flatpickr(element, {
                    mode: 'multiple',
                    dateFormat: 'Y-m-d',
                    conjunction: ', ',
                    locale: 'fr'
                });
            }
        });

        // Mise à jour initiale des titres et affichage du message
        updateSessionTitles();
        toggleNoSessionsMessage();

        
        // ===============================
        // GESTION DE LA SUPPRESSION DES FICHIERS
        // ===============================
        const filesToDelete = new Set();

        document.addEventListener('click', function(e) {
            if (e.target.closest('.open-delete-file-modal')) {
                const button = e.target.closest('.open-delete-file-modal');
                const fileId = button.getAttribute('data-file-id');
                const fileName = button.getAttribute('data-file-name');
                const sessionIndex = button.getAttribute('data-session-index');
                const modal = document.getElementById('deleteFileModal');
                
                if (modal && fileId) {
                    const deleteForm = modal.querySelector('#delete-form-deleteFileModal');
                    if (deleteForm) {
                        deleteForm.setAttribute('data-file-id', fileId);
                        deleteForm.setAttribute('data-session-index', sessionIndex);
                    }
                    
                    const itemNameElement = modal.querySelector('#item-name-text-deleteFileModal');
                    if (itemNameElement) {
                        itemNameElement.textContent = fileName;
                    }
                }
            }
        }); 
        const deleteFileModal = document.getElementById('deleteFileModal');
        if (deleteFileModal) {
            const deleteForm = deleteFileModal.querySelector('#delete-form-deleteFileModal');
            if (deleteForm) {
                deleteForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const fileId = this.getAttribute('data-file-id');
                    const sessionIndex = this.getAttribute('data-session-index');
                    if (!fileId) return;
                    
                    const submitBtn = this.querySelector('button[type="submit"]');
                    const btnText = submitBtn.querySelector('.btn-text');
                    const btnLoading = submitBtn.querySelector('.btn-loading');
                    
                    // AJOUTER : Afficher le spinner
                    btnText.classList.add('d-none');
                    btnLoading.classList.remove('d-none');
                    submitBtn.disabled = true;
                    
                    const sessionItem = document.querySelector(`.session-item[data-session-index="${sessionIndex}"]`);
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = `sessions[${sessionIndex}][delete_files][]`;
                    input.value = fileId;
                    sessionItem.appendChild(input);
                    
                    const fileElement = document.getElementById('file-' + fileId);
                    if (fileElement) {
                        fileElement.remove();
                    }
                    
                    const modal = bootstrap.Modal.getInstance(deleteFileModal);
                    if (modal) {
                        modal.hide();
                    }
                    
                    // AJOUTER : Masquer le spinner
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    submitBtn.disabled = false;
                    
                    if (typeof showSuccessToast === 'function') {
                        showSuccessToast('{{ __("admin/trainings.sessions.files.delete_success") }}');
                    }
                });
            }
        }        
        

    });
</script>
@endpush