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

@section('content')

{{-- Wrapper pour le drawer d'édition --}}
<div x-data="{ c: { id:'', firstname:'', lastname:'', email:'', phone:'', gsm:'', job:'', mediaIds:[] } }"
     @open-contact-edit.window="c = $event.detail; $nextTick(() => KTDrawer.getInstance(document.querySelector('#drawer_edit_dup_contact'))?.show())">

<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">Doublons — Contacts 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">(même email ou même nom)</span>
            </div>
        </div>
        <a href="{{ route('admin.crm.contacts', 'medias') }}" class="kt-btn kt-btn-outline">
            <i class="ki-outline ki-arrow-left"></i> Retour aux contacts
        </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)
    @php
        $label = $group[0]->firstname . ' ' . $group[0]->lastname;
        if ($group[0]->email) $label .= ' — ' . $group[0]->email;
    @endphp
    <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) }} contacts</span>
                <span class="text-sm font-medium text-mono">{{ $label }}</span>
            </div>
            <i class="ki-outline ki-down text-secondary-foreground"></i>
        </summary>

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

            <form method="POST" action="{{ route('admin.crm.contacts.duplicates.merge') }}">
                @csrf

                <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">Cible</th>
                                <th class="w-20 text-xs uppercase font-semibold text-gray-700">Fusionner</th>
                                <th class="w-14 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">Email</th>
                                <th class="w-32 text-xs uppercase font-semibold text-gray-700">Téléphone</th>
                                <th class="w-32 text-xs uppercase font-semibold text-gray-700">Mobile</th>
                                <th class="text-xs uppercase font-semibold text-gray-700">Médias</th>
                                <th class="w-24 text-xs uppercase font-semibold text-gray-700">Opérations</th>
                                <th class="w-14"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($group as $contact)
                            <tr :class="target == '{{ $contact->id }}' ? 'bg-primary/5' : ''">
                                <td class="text-center">
                                    <input type="radio"
                                        name="target_id"
                                        value="{{ $contact->id }}"
                                        x-model="target"
                                        class="kt-radio">
                                </td>
                                <td class="text-center">
                                    <input type="checkbox"
                                        name="merge_ids[]"
                                        value="{{ $contact->id }}"
                                        :disabled="target == '{{ $contact->id }}'"
                                        class="kt-checkbox">
                                </td>
                                <td class="text-xs text-secondary-foreground font-mono">{{ $contact->id }}</td>
                                <td>
                                    <div class="flex flex-col gap-0.5">
                                        <span class="text-sm font-medium text-mono">{{ $contact->firstname }} {{ $contact->lastname }}</span>
                                        @if ($contact->job)
                                        <span class="text-xs text-gray-400">{{ $contact->job }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="text-xs text-secondary-foreground">{{ $contact->email ?: '—' }}</td>
                                <td class="text-xs text-secondary-foreground font-semibold">{{ $contact->phone ?: '—' }}</td>
                                <td class="text-xs text-secondary-foreground font-semibold">{{ $contact->gsm ?: '—' }}</td>
                                <td>
                                    @if ($contact->medias->isNotEmpty())
                                    <div class="flex flex-wrap gap-1">
                                        @foreach ($contact->medias as $media)
                                        <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-info">{{ $media->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 {{ $contact->operations_count > 0 ? 'kt-badge-primary' : 'kt-badge-secondary' }}">
                                        {{ $contact->operations_count }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <button type="button"
                                        class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                        @click="$dispatch('open-contact-edit', {
                                            id: '{{ $contact->id }}',
                                            firstname: '{{ addslashes($contact->firstname) }}',
                                            lastname: '{{ addslashes($contact->lastname) }}',
                                            email: '{{ $contact->email }}',
                                            phone: '{{ $contact->phone }}',
                                            gsm: '{{ $contact->gsm }}',
                                            job: '{{ addslashes($contact->job) }}',
                                            mediaIds: {{ $contact->medias->pluck('id') }}
                                        })">
                                        <i class="ki-outline ki-pencil text-primary"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="flex items-center justify-between">
                    <p class="text-xs text-muted-foreground">
                        Sélectionnez la cible (contact conservé) et cochez les contacts à fusionner.
                        Les médias et opérations seront transférés vers la cible, puis les doublons supprimés.
                    </p>
                    <button type="submit" class="kt-btn kt-btn-primary kt-btn-sm ms-4 shrink-0">
                        <i class="ki-outline ki-arrows-circle"></i>
                        Fusionner
                    </button>
                </div>
            </form>
        </div>
    </details>
    @endforeach

</div>

{{-- Drawer édition contact --}}
<div id="drawer_edit_dup_contact"
    class="kt-drawer kt-drawer-end hidden w-full max-w-[480px]"
    data-kt-drawer="true">
    <div class="kt-drawer-header">
        <h3 class="kt-drawer-title">Modifier le contact</h3>
        <button class="kt-drawer-close" data-kt-drawer-dismiss="#drawer_edit_dup_contact">
            <i class="ki-outline ki-cross text-lg"></i>
        </button>
    </div>
    <div class="kt-drawer-content kt-scrollable p-5">
        <form id="form_edit_dup_contact" method="POST"
            x-bind:action="`{{ url('admin/crm/contacts') }}/${c.id}`"
            class="flex flex-col gap-5">
            @csrf
            @method('PUT')

            <template x-for="mid in c.mediaIds" :key="mid">
                <input type="hidden" name="medias[]" :value="mid">
            </template>

            <div class="grid grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Prénom</label>
                    <input name="firstname" type="text" class="kt-input" x-model="c.firstname" autocomplete="off">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Nom</label>
                    <input name="lastname" type="text" class="kt-input" x-model="c.lastname" autocomplete="off">
                </div>
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Email</label>
                <input name="email" type="email" class="kt-input" x-model="c.email" autocomplete="off">
            </div>
            <div class="grid grid-cols-2 gap-4">
                <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" x-model="c.phone" autocomplete="off">
                </div>
                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Mobile</label>
                    <input name="gsm" type="tel" class="kt-input" x-model="c.gsm" autocomplete="off">
                </div>
            </div>
            <div class="flex flex-col gap-1">
                <label class="kt-label mb-2">Poste / Fonction</label>
                <input name="job" type="text" class="kt-input" x-model="c.job" autocomplete="off">
            </div>
        </form>
    </div>
    <div class="kt-drawer-footer justify-end gap-3">
        <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive"
            data-kt-drawer-dismiss="#drawer_edit_dup_contact">
            {{ __('ui.actions.cancel') }}
        </button>
        <x-ui.loading-button type="submit" form="form_edit_dup_contact"
            class="kt-btn-primary" loadingText="{{ __('ui.states.saving') }}">
            {{ __('ui.actions.save') }}
        </x-ui.loading-button>
    </div>
</div>

</div>{{-- fin wrapper x-data --}}

@endsection