@extends('back.layout.app')
@section('title', config('app.name') . ' - ' . $type->name)

@php $breadcrumb = 'parameters.type_media'; @endphp

@section('content')

<div class="kt-container-fixed">
    <div class="flex flex-wrap items-center justify-between gap-5 pb-7.5">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.medias.type') }}" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline">
                <i class="ki-outline ki-arrow-left"></i>
            </a>
            <h1 class="text-xl font-medium leading-none text-mono">{{ $type->name }}</h1>
            <span class="kt-badge kt-badge-secondary">{{ $type->medias->count() }} média(s)</span>
        </div>
    </div>
</div>

<div class="kt-container-fixed">
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-5">

        {{-- Renommer --}}
        <div class="col-span-1">
            <div class="kt-card p-5">
                <h3 class="text-sm font-semibold text-mono mb-4">Renommer le type</h3>
                <form method="POST" action="{{ route('admin.medias.type.rename', $type) }}" class="flex flex-col gap-3">
                    @csrf
                    <input type="text" name="name" class="kt-input @error('name') border-destructive @enderror"
                        value="{{ old('name', $type->name) }}" required>
                    @error('name')
                    <span class="text-xs text-destructive">{{ $message }}</span>
                    @enderror
                    <button type="submit" class="kt-btn kt-btn-primary w-full justify-center">
                        <i class="ki-outline ki-save-2 text-sm"></i>
                        Enregistrer
                    </button>
                </form>
            </div>
        </div>

        {{-- Médias liés --}}
        <div class="xl:col-span-2">
            <div class="kt-card">
                <div class="kt-card-header">
                    <div class="kt-card-heading">
                        <h3 class="kt-card-title">Médias associés</h3>
                    </div>
                </div>

                @if ($type->medias->isEmpty())
                <div class="px-5 pb-5">
                    <div class="kt-alert kt-alert-light kt-alert-info kt-alert-sm">
                        <div class="kt-alert-title">Aucun média associé à ce type.</div>
                    </div>
                </div>
                @else
                <form method="POST" action="{{ route('admin.medias.type.sync-all', $type) }}">
                    @csrf @method('PUT')
                    <div class="flex flex-col divide-y divide-border">
                        @foreach ($type->medias as $media)
                        @php $selectedTypeIds = $media->types->pluck('id')->map(fn($id) => (string) $id)->implode(',');
                        @endphp
                        <div class="flex items-center gap-4 px-5 py-3">
                            <a href="{{ route('admin.crm.media.show', [$media->id, 'overview']) }}"
                                class="text-sm font-semibold text-mono hover:text-primary w-100 ">
                                {{ $media->name }}
                            </a>
                            <select id="select_type_{{ $media->id }}" name="types[{{ $media->id }}][]" multiple
                                class="kt-select flex-1" data-kt-select="true" data-kt-select-multiple="true"
                                data-kt-select-tags="true" data-kt-select-enable-search="true"
                                data-kt-select-search-placeholder="Rechercher..."
                                data-kt-select-placeholder="Sélectionner des types..." @if($selectedTypeIds)
                                data-kt-select-pre-selected="{{ $selectedTypeIds }}" @endif>
                                @foreach ($allTypes as $t)
                                <option value="{{ $t->id }}">{{ $t->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        @endforeach
                    </div>
                    <div class="px-5 py-4 border-t border-border flex justify-end">
                        <button type="submit" class="kt-btn kt-btn-primary">
                            <i class="ki-outline ki-save-2 text-sm"></i>
                            Enregistrer
                        </button>
                    </div>
                </form>
                @endif
            </div>
        </div>

    </div>
</div>

@endsection