@extends('back.layout.app')
@section('title', config('app.name') . ' - Consolidation des médias')

@php $breadcrumb = 'crm.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 flex-col gap-2">
            <h1 class="text-xl font-medium leading-none text-mono">Consolidation des médias</h1>
            <div class="flex items-center gap-2 text-sm text-secondary-foreground">
                {{ count($duplicateGroups) }} groupe(s) de doublons détectés
                <span class="text-xs text-muted-foreground">(noms similaires)</span>
            </div>
        </div>
        <a href="{{ route('admin.crm.media') }}" class="kt-btn kt-btn-outline">
            <i class="ki-outline ki-arrow-left"></i> Retour aux médias
        </a>
    </div>
</div>

<div class="kt-container-fixed flex flex-col gap-4">

    @if (session('success'))
    <div class="kt-alert kt-alert-success">
        <i class="ki-outline ki-check-circle text-success"></i>
        {{ session('success') }}
    </div>
    @endif

    @if (count($duplicateGroups) === 0)
    <div class="kt-card p-8 text-center text-secondary-foreground">
        Aucun doublon détecté.
    </div>
    @endif

    @foreach ($duplicateGroups as $index => $group)
    <details class="kt-card" {{ $index === 0 ? 'open' : '' }}>
        <summary class="flex items-center justify-between gap-4 px-5 py-4 cursor-pointer select-none list-none">
            <div class="flex items-center gap-3">
                <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-warning">{{ count($group) }} médias</span>
                <span class="text-sm font-medium text-mono">{{ $group[0]->name }}</span>
            </div>
            <i class="ki-outline ki-down text-secondary-foreground"></i>
        </summary>

        <div class="border-t border-border p-5" x-data="{ master: '{{ $group[0]->id }}' }">

            <form method="POST" action="{{ route('admin.crm.media.consolidation.process') }}">
                @csrf

                @foreach ($group as $media)
                <input type="hidden" name="media_ids[]" value="{{ $media->id }}">
                @endforeach

                <div class="kt-table-wrapper kt-scrollable mb-4">
                    <table class="kt-table">
                        <thead>
                            <tr>
                                <th class="w-16 text-xs uppercase font-semibold text-gray-700">Maître</th>
                                <th class="w-12 text-xs uppercase font-semibold text-gray-700">ID</th>
                                <th class="text-xs uppercase font-semibold text-gray-700">Nom</th>
                                <th class="text-xs uppercase font-semibold text-gray-700">Type(s)</th>
                                <th class="w-24 text-xs uppercase font-semibold text-gray-700 text-center">Images</th>
                                <th class="w-28 text-xs uppercase font-semibold text-gray-700 text-center">Opérations</th>
                                <th class="w-24 text-xs uppercase font-semibold text-gray-700 text-center">Contacts</th>
                                <th class="text-xs uppercase font-semibold text-gray-700 text-center">Contenu</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($group as $media)
                            <tr :class="master == '{{ $media->id }}' ? 'bg-primary/5' : ''">
                                <td class="text-center">
                                    <input type="radio"
                                        name="master_id"
                                        value="{{ $media->id }}"
                                        x-model="master"
                                        class="kt-radio">
                                </td>
                                <td class="text-xs text-secondary-foreground font-mono">{{ $media->id }}</td>
                                <td>
                                    <a href="{{ route('admin.crm.media.show', $media) }}"
                                        class="text-sm font-medium text-mono hover:text-primary"
                                        target="_blank">
                                        {{ $media->name }}
                                    </a>
                                    @if ($media->group)
                                    <div class="text-xs text-gray-400">{{ $media->group->name }}</div>
                                    @endif
                                </td>
                                <td>
                                    @if ($media->types->isNotEmpty())
                                    <div class="flex flex-wrap gap-1">
                                        @foreach ($media->types as $type)
                                        <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-primary">{{ $type->name }}</span>
                                        @endforeach
                                    </div>
                                    @else
                                    <span class="text-xs text-secondary-foreground">—</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="kt-badge kt-badge-sm kt-badge-outline {{ ($media->images_count ?? 0) > 0 ? 'kt-badge-info' : 'kt-badge-secondary' }}">
                                        {{ $media->images_count ?? 0 }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="kt-badge kt-badge-sm kt-badge-outline {{ ($media->operations_count ?? 0) > 0 ? 'kt-badge-primary' : 'kt-badge-secondary' }}">
                                        {{ $media->operations_count ?? 0 }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="kt-badge kt-badge-sm kt-badge-outline {{ ($media->contacts_count ?? 0) > 0 ? 'kt-badge-warning' : 'kt-badge-secondary' }}">
                                        {{ $media->contacts_count ?? 0 }}
                                    </span>
                                </td>
                                <td>
                                    <div class="flex items-center justify-center gap-1.5">
                                        @foreach ([
                                            'KM' => $media->key_metrics,
                                            'Info' => $media->informations,
                                            'Apport' => $media->contribution,
                                            'Présentation' => $media->presentation,
                                            'Audience' => $media->readers?->content,
                                        ] as $label => $value)
                                        <span title="{{ $label }}"
                                            class="inline-flex items-center justify-center w-6 h-6 rounded text-xs font-medium
                                            {{ $value ? 'bg-success/10 text-success' : 'bg-muted text-muted-foreground' }}">
                                            {{ substr($label, 0, 1) }}
                                        </span>
                                        @endforeach
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="flex items-center justify-between">
                    <p class="text-xs text-muted-foreground">
                        Sélectionnez le média maître. Les données des autres médias seront déplacées dans le pivot, puis les doublons supprimés.
                    </p>
                    <button type="submit" class="kt-btn kt-btn-primary kt-btn-sm ms-4 shrink-0"
                        :disabled="!master">
                        <i class="ki-outline ki-arrows-circle"></i>
                        Consolider
                    </button>
                </div>
            </form>
        </div>
    </details>
    @endforeach

</div>

@endsection