@if (session('success') && request()->segment(4) === 'informations')
    <div class="kt-alert kt-alert-light kt-alert-success mb-5">
        {{ session('success') }}
    </div>
@endif

<form method="POST"
    action="{{ route('admin.crm.media.informations.update', $media) }}"
    enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <div class="kt-card">
        <div class="kt-card-content p-5">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">

                {{-- Colonne 1 --}}
                <div class="flex flex-col gap-5">
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Type de média</label>
                        <select name="media_type_id" class="kt-select"
                            data-kt-select="true"
                            data-kt-select-placeholder="Choisir un type">
                            <option value=""></option>
                            @foreach ($types as $type)
                                <option value="{{ $type->id }}" {{ old('media_type_id', $media->media_type_id) == $type->id ? 'selected' : '' }}>
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Nom du média <span class="text-destructive">*</span></label>
                        <input name="name" type="text"
                            class="kt-input @error('name') border-destructive @enderror"
                            value="{{ old('name', $media->name) }}" autocomplete="off">
                        @error('name') <span class="text-xs text-destructive">{{ $message }}</span> @enderror
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Groupe média</label>
                        <select name="media_group_id" class="kt-select"
                            data-kt-select="true"
                            data-kt-select-placeholder="Choisir un groupe"
                            data-kt-select-enable-search="true"
                            data-kt-select-search-placeholder="Search...">
                            <option value=""></option>
                            @foreach ($groups as $group)
                                <option value="{{ $group->id }}" {{ old('media_group_id', $media->media_group_id) == $group->id ? 'selected' : '' }}>
                                    {{ $group->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Thème média</label>
                        <select name="mediatheme_id" class="kt-select"
                            data-kt-select="true"
                            data-kt-select-placeholder="Choisir un thème">
                            <option value=""></option>
                            @foreach ($themes as $theme)
                                <option value="{{ $theme->id }}" {{ old('mediatheme_id', $media->mediatheme_id) == $theme->id ? 'selected' : '' }}>
                                    {{ $theme->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Cible(s)</label>
                        @php $selectedTargets = old('targets', $media->targets->pluck('id')->toArray()); @endphp
                        <select name="targets[]" class="kt-select"
                            multiple
                            data-kt-select="true"
                            data-kt-select-placeholder="Sélectionner des cibles..."
                            data-kt-select-multiple="true"
                            data-kt-select-tags="true"
                            data-kt-select-enable-search="true"
                            data-kt-select-search-placeholder="Search..."
                            @if($selectedTargets) data-kt-select-pre-selected="{{ implode(',', array_map('strval', $selectedTargets)) }}" @endif>
                            @foreach ($targets as $family)
                                @if ($family->children->isNotEmpty())
                                    <optgroup label="{{ $family->name }}">
                                        @foreach ($family->children as $child)
                                            <option value="{{ $child->id }}">{{ $child->name }}</option>
                                        @endforeach
                                    </optgroup>
                                @else
                                    <option value="{{ $family->id }}">{{ $family->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                                        <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Logo</label>
                        <input type="file" name="logo" accept="image/*" class="kt-input">
                    </div>


                </div>

                {{-- Colonne 2 --}}
                <div class="flex flex-col gap-5">
                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Audience</label>
                        <input name="audience" type="text"
                            class="kt-input"
                            value="{{ old('audience', $media->readers?->content) }}"
                            placeholder="Ex : 500 000 lecteurs/mois">
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Chiffres clés</label>
                        <input name="key_metrics" type="text" class="kt-input"
                            value="{{ old('key_metrics', $media->key_metrics) }}" autocomplete="off">
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Profils</label>
                        <input name="socio_category" type="text" class="kt-input"
                            value="{{ old('socio_category', $media->socio_category) }}" autocomplete="off">
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Informations</label>
                        <textarea name="informations" rows="4" class="kt-textarea">{{ old('informations', $media->informations) }}</textarea>
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Apport du média</label>
                        <textarea name="contribution" rows="4" class="kt-textarea">{{ old('contribution', $media->contribution) }}</textarea>
                    </div>

                </div>

                {{-- Colonne 3 : Adresse --}}
                <div class="flex flex-col gap-5">

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Adresse</label>
                        <input name="adress_1" type="text" class="kt-input mb-2"
                            value="{{ old('adress_1', $media->adress_1) }}" placeholder="Ligne 1">
                        <input name="adress_2" type="text" class="kt-input"
                            value="{{ old('adress_2', $media->adress_2) }}" placeholder="Ligne 2">
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Code postal</label>
                            <input name="zipcode" type="text" class="kt-input"
                                value="{{ old('zipcode', $media->zipcode) }}" placeholder="75001">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Ville</label>
                            <input name="city" type="text" class="kt-input"
                                value="{{ old('city', $media->city) }}" placeholder="Paris">
                        </div>
                    </div>

                    <div class="flex flex-col gap-1">
                        <label class="kt-label mb-2">Téléphone</label>
                        <input name="phone" type="tel" class="kt-input"
                            value="{{ old('phone', $media->phone) }}" placeholder="01 00 00 00 00">
                    </div>

                </div>

            </div>
        </div>

        <div class="kt-card-footer justify-end gap-3">
            @can('edit-media')
            <x-ui.loading-button type="submit" class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
                {{ __('ui.actions.save') }}
            </x-ui.loading-button>
            @endcan
        </div>
    </div>

</form>