@extends('back.layout.app')
@section('title', config('app.name') . ' - Suivi des plans Média')

@php $breadcrumb = 'plan-media.manage'; @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-1">
            <h1 class="text-xl font-medium leading-none text-mono">Suivi des plans Média</h1>
        </div>
    </div>
</div>

<div class="kt-container-fixed">

    {{-- Onglets --}}
    <div class="kt-tabs kt-tabs-line mb-5" data-kt-tabs="true">
        <button class="kt-tab-toggle active py-3 flex items-center gap-2" data-kt-tab-toggle="#tab_active">
            En cours
            <span class="kt-badge kt-badge-xs kt-badge-primary">{{ $activeProposals->count() }}</span>
        </button>
        <button class="kt-tab-toggle py-3 flex items-center gap-2" data-kt-tab-toggle="#tab_archived">
            Archivés
            <span class="kt-badge kt-badge-xs kt-badge-mono">{{ $archivedProposals->count() }}</span>
        </button>
    </div>

    {{-- Onglet En cours --}}
    <div id="tab_active">
        <div class="kt-card">
            <div class="kt-card-header min-h-16 flex-wrap gap-3">
                <input type="text" placeholder="{{ __('ui.datatable.search') }}" class="kt-input sm:w-48"
                    data-kt-datatable-search="#dt_plan_media" />
                <form method="GET" action="{{ route('admin.plan-media.manage') }}"
                    class="flex items-center gap-2 ms-auto">
                    <select name="status" class="kt-select kt-select-sm w-44" onchange="this.form.submit()">
                        <option value="">Tous les statuts</option>
                        <option value="draft" {{ request('status')==='draft' ? 'selected' : '' }}>Brouillon</option>
                        <option value="send_to_customer" {{ request('status')==='send_to_customer' ? 'selected' : '' }}>
                            Envoyé</option>
                    </select>
                    @if (request('status'))
                    <a href="{{ route('admin.plan-media.manage') }}" class="kt-btn kt-btn-sm kt-btn-ghost">
                        Réinitialiser
                    </a>
                    @endif
                </form>
            </div>

            <div id="dt_plan_media" class="kt-card-table" data-kt-datatable="true" data-kt-datatable-page-size="25"
                data-kt-datatable-state-save="false" data-kt-datatable-info="{{ __('ui.datatable.info') }}"
                data-kt-datatable-info-empty="{{ __('ui.datatable.info_empty') }}">

                <div class="kt-table-wrapper kt-scrollable">
                    <table class="kt-table" data-kt-datatable-table="true">
                        <thead>
                            <tr>
                                <th scope="col" class="w-28" data-kt-datatable-column="date">
                                    <span class="kt-table-col">
                                        <span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Date</span>
                                        <span class="kt-table-col-sort"></span>
                                    </span>
                                </th>
                                <th scope="col" data-kt-datatable-column="client">
                                    <span class="kt-table-col">
                                        <span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Client</span>
                                        <span class="kt-table-col-sort"></span>
                                    </span>
                                </th>
                                <th scope="col" class="w-36" data-kt-datatable-column="statut">
                                    <span class="kt-table-col">
                                        <span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Statut</span>
                                        <span class="kt-table-col-sort"></span>
                                    </span>
                                </th>
                                <th scope="col" class="w-52" data-kt-datatable-column="reference">
                                    <span class="kt-table-col">
                                        <span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Référence</span>
                                    </span>
                                </th>
                                <th scope="col" class="w-24 text-center" data-kt-datatable-column="offres">
                                    <span class="kt-table-col justify-center">
                                        <span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Offres</span>
                                        <span class="kt-table-col-sort"></span>
                                    </span>
                                </th>
                                <th scope="col" class="w-20 text-center" data-kt-datatable-column="vues">
                                    <span class="kt-table-col justify-center">
                                        <span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Vues</span>
                                        <span class="kt-table-col-sort"></span>
                                    </span>
                                </th>
                                <th scope="col" class="w-28 text-center" data-kt-datatable-column="selection">
                                    <span class="kt-table-col justify-center">
                                        <span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Sélection
                                            client</span>
                                        <span class="kt-table-col-sort"></span>
                                    </span>
                                </th>
                                <th scope="col" class="w-20" data-kt-datatable-column="actions"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($activeProposals as $proposal)
                            @php
                            $statusLabel = match($proposal->status) {
                            'send_to_customer' => 'Envoyé',
                            default => 'Brouillon',
                            };
                            $statusBadge = match($proposal->status) {
                            'send_to_customer' => 'kt-badge-outline kt-badge-success',
                            default => 'kt-badge-outline kt-badge-secondary',
                            };
                            @endphp
                            <tr>
                                {{-- Date --}}
                                <td data-kt-datatable-value="{{ $proposal->getRawOriginal('created_at') }}">
                                    <span class="text-xs text-secondary-foreground">
                                        {{
                                        \Carbon\Carbon::parse($proposal->getRawOriginal('created_at'))->format('d/m/Y')
                                        }}
                                    </span>
                                </td>

                                {{-- Client --}}
                                <td data-kt-datatable-value="{{ $proposal->customer?->name }}">
                                    <a href="{{ route('admin.crm.clients.show',$proposal->customer) }}"
                                        class="text-xs font-semibold text-primary">
                                        {{ $proposal->customer?->name ?? '—' }}
                                    </a>
                                </td>

                                {{-- Statut --}}
                                <td data-kt-datatable-value="{{ $statusLabel }}">
                                    <span class="kt-badge kt-badge-xs {{ $statusBadge }}">
                                        {{ $statusLabel }}
                                        @if($proposal->status === 'send_to_customer' && $proposal->sent_at)
                                        — le {{ \Carbon\Carbon::parse($proposal->sent_at)->format('d/m/Y') }}
                                        @endif
                                    </span>
                                </td>

                                {{-- Référence + copier URL --}}
                                <td>
                                    @if($proposal->operations_count > 0 && $proposal->operations_with_period_count ===
                                    $proposal->operations_count)
                                    <div class="flex items-center gap-2">
                                        <span class="kt-badge kt-badge-mono kt-badge-xs truncate max-w-32"
                                            title="{{ $proposal->reference }}">
                                            {{ Str::limit($proposal->reference, 12) }}
                                        </span>
                                        <button type="button" class="kt-btn kt-btn-xs kt-btn-icon kt-btn-ghost shrink-0"
                                            title="Copier l'URL" x-data x-on:click="
                                                navigator.clipboard.writeText('{{ url('/plan-media/' . $proposal->reference) }}');
                                                KTToast.show({ message: 'URL de l\'offre copiée', variant: 'success' });
                                            ">
                                            <i class="ki-outline ki-copy"></i>
                                        </button>
                                    </div>
                                    @else
                                    <div class="flex flex-col gap-0.5">
                                        <span class="text-xs text-secondary-foreground">URL non disponible</span>
                                        @if($proposal->operations_count === 0)
                                        <span class="text-xs text-destructive">Aucune opération</span>
                                        @else
                                        <span class="text-xs text-destructive">{{
                                            $proposal->operations_with_period_count }}/{{ $proposal->operations_count }}
                                            périodes définies</span>
                                        @endif
                                    </div>
                                    @endif
                                </td>

                                {{-- Offres --}}
                                <td class="text-center">
                                    <span style="display:none">{{ str_pad($proposal->operations_count, 6, '0',
                                        STR_PAD_LEFT) }}</span>
                                    <span class="kt-badge kt-badge-sm kt-badge-mono rounded-full">{{
                                        $proposal->operations_count }}</span>
                                </td>

                                {{-- Vues --}}
                                <td class="text-center">
                                    <span style="display:none">{{ str_pad($proposal->viewer, 6, '0', STR_PAD_LEFT)
                                        }}</span>
                                    <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-primary rounded-full">{{
                                        $proposal->viewer }}</span>
                                </td>

                                {{-- Sélection client --}}
                                <td class="text-center">
                                    @php $selected = $proposal->countSelectedPeriods(); @endphp
                                    <span style="display:none">{{ str_pad($selected, 6, '0', STR_PAD_LEFT) }}</span>
                                    <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-success rounded-full">{{
                                        $selected }}</span>
                                </td>

                                {{-- Actions --}}
                                <td class="text-end">
                                    <div class="inline-flex items-center justify-end gap-2">
                                        @if($proposal->operations_with_period_count > 0)
                                        @can('view-plan-media-proposals')
                                        <a href="{{ route('admin.plan-media.proposal.show', $proposal) }}"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                            data-kt-tooltip="#tt_show_{{ $proposal->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-eye"></i>
                                        </a>
                                        <div id="tt_show_{{ $proposal->id }}" class="kt-tooltip">Consulter</div>
                                        @endcan
                                        @else
                                        @can('edit-plan-media-proposals')
                                        <a href="{{ route('admin.plan-media.proposal.periods', $proposal) }}"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                            data-kt-tooltip="#tt_periods_{{ $proposal->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-pencil text-primary"></i>
                                        </a>
                                        <div id="tt_periods_{{ $proposal->id }}" class="kt-tooltip">Éditer les périodes
                                        </div>
                                        @endcan
                                        @endif


                                        @canany(['send-plan-media-proposals', 'edit-plan-media-proposals',
                                        'archive-plan-media-proposals'])
                                        <div class="kt-menu" data-kt-menu="true">
                                            <div class="kt-menu-item kt-menu-item-dropdown"
                                                data-kt-menu-item-offset="0, 10px"
                                                data-kt-menu-item-placement="bottom-end"
                                                data-kt-menu-item-toggle="dropdown" data-kt-menu-item-trigger="click">
                                                <button
                                                    class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline kt-menu-toggle"
                                                    data-kt-tooltip="#tt_more_{{ $proposal->id }}"
                                                    data-kt-tooltip-placement="bottom">
                                                    <i class="ki-outline ki-dots-vertical"></i>
                                                </button>
                                                <div id="tt_more_{{ $proposal->id }}" class="kt-tooltip">Plus d'actions</div>
                                                <div class="kt-menu-dropdown kt-menu-default w-48"
                                                    data-kt-menu-dismiss="true">
                                                    @can('send-plan-media-proposals')
                                                    <div class="kt-menu-item">
                                                        <button type="button" class="kt-menu-link w-full text-start"
                                                            data-kt-modal-toggle="#modal_send_plan_{{ $proposal->id }}">
                                                            <span class="kt-menu-icon"><i
                                                                    class="ki-outline ki-paper-plane text-secondary-foreground text-xs"></i></span>
                                                            <span class="kt-menu-title">Envoyer le plan média</span>
                                                        </button>
                                                    </div>
                                                    <div class="kt-menu-separator"></div>
                                                    @endcan
                                                    @canany(['edit-plan-media-proposals',
                                                    'archive-plan-media-proposals'])
                                                    <div class="kt-menu-item kt-menu-item-dropdown"
                                                        data-kt-menu-item-placement="left-start"
                                                        data-kt-menu-item-toggle="dropdown"
                                                        data-kt-menu-item-trigger="hover">
                                                        <button type="button" class="kt-menu-link w-full text-start">
                                                            <span class="kt-menu-icon"><i
                                                                    class="ki-outline ki-switch text-secondary-foreground text-xs"></i></span>
                                                            <span class="kt-menu-title">Changer le statut</span>
                                                            <span class="kt-menu-arrow"></span>
                                                        </button>
                                                        <div class="kt-menu-dropdown kt-menu-default w-44"
                                                            data-kt-menu-dismiss="true">
                                                            @can('edit-plan-media-proposals')
                                                            @if($proposal->status !== 'draft')
                                                            <div class="kt-menu-item">
                                                                <form method="POST"
                                                                    action="{{ route('admin.plan-media.proposal.draft', $proposal) }}">
                                                                    @csrf @method('PATCH')
                                                                    <button type="submit"
                                                                        class="kt-menu-link w-full text-start">
                                                                        <span class="kt-menu-icon"><i
                                                                                class="ki-outline ki-pencil text-secondary-foreground text-xs"></i></span>
                                                                        <span class="kt-menu-title">Brouillon</span>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                            @endif
                                                            @endcan
                                                            @can('archive-plan-media-proposals')
                                                            @if($proposal->status !== 'archived')
                                                            <div class="kt-menu-item">
                                                                <form method="POST"
                                                                    action="{{ route('admin.plan-media.proposal.archive', $proposal) }}">
                                                                    @csrf @method('PATCH')
                                                                    <button type="submit"
                                                                        class="kt-menu-link w-full text-start">
                                                                        <span class="kt-menu-icon"><i
                                                                                class="ki-outline ki-archive text-secondary-foreground text-xs"></i></span>
                                                                        <span class="kt-menu-title">Archiver</span>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                            @endif
                                                            @endcan
                                                        </div>
                                                    </div>
                                                    @endcanany
                                                </div>
                                            </div>
                                        </div>
                                        @endcanany

                                        @can('delete-plan-media-proposals')
                                        <button type="button" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                            data-kt-modal-toggle="#modal_confirm_delete"
                                            data-confirm-url="{{ route('admin.plan-media.proposal.destroy', ['planMediaProposal' => $proposal]) }}"
                                            data-confirm-name="{{ $proposal->customer?->name }}"
                                            data-kt-tooltip="#tt_delete_{{ $proposal->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-trash text-destructive"></i>
                                        </button>
                                        <div id="tt_delete_{{ $proposal->id }}" class="kt-tooltip">Supprimer</div>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="kt-datatable-toolbar">
                    <div class="kt-datatable-length">
                        {{ __('ui.datatable.show') }}
                        <select class="kt-select kt-select-sm w-16" name="perpage"
                            data-kt-datatable-size="true"></select>
                        {{ __('ui.datatable.per_page') }}
                    </div>
                    <div class="kt-datatable-info">
                        <span data-kt-datatable-info="true"></span>
                        <div class="kt-datatable-pagination" data-kt-datatable-pagination="true"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>{{-- /tab_active --}}

    @can('send-plan-media-proposals')
    @foreach($activeProposals as $proposal)
    @include('back.modules.sales.plan_media.partials.modal_send_plan', [
    'planMediaProposal' => $proposal,
    'modalId' => 'modal_send_plan_' . $proposal->id,
    ])
    @endforeach
    @endcan

    {{-- Onglet Archivés --}}
    <div id="tab_archived" class="hidden">
        <div class="kt-card">
            <div class="kt-card-header min-h-16">
                <input type="text" placeholder="{{ __('ui.datatable.search') }}" class="kt-input sm:w-48"
                    data-kt-datatable-search="#dt_plan_media_archived" />
            </div>
            <div id="dt_plan_media_archived" class="kt-card-table" data-kt-datatable="true"
                data-kt-datatable-page-size="25" data-kt-datatable-state-save="false"
                data-kt-datatable-info="{{ __('ui.datatable.info') }}"
                data-kt-datatable-info-empty="{{ __('ui.datatable.info_empty') }}">
                <div class="kt-table-wrapper kt-scrollable">
                    <table class="kt-table" data-kt-datatable-table="true">
                        <thead>
                            <tr>
                                <th scope="col" class="w-28" data-kt-datatable-column="date">
                                    <span class="kt-table-col"><span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Date</span><span
                                            class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" data-kt-datatable-column="client">
                                    <span class="kt-table-col"><span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Client</span><span
                                            class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-24 text-center" data-kt-datatable-column="offres">
                                    <span class="kt-table-col justify-center"><span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Offres</span><span
                                            class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-20 text-center" data-kt-datatable-column="vues">
                                    <span class="kt-table-col justify-center"><span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Vues</span><span
                                            class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-28 text-center" data-kt-datatable-column="selection">
                                    <span class="kt-table-col justify-center"><span
                                            class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Sélection
                                            client</span><span class="kt-table-col-sort"></span></span>
                                </th>
                                <th scope="col" class="w-20" data-kt-datatable-column="actions"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($archivedProposals as $proposal)
                            <tr>
                                <td data-kt-datatable-value="{{ $proposal->getRawOriginal('created_at') }}">
                                    <span class="text-xs text-secondary-foreground">
                                        {{
                                        \Carbon\Carbon::parse($proposal->getRawOriginal('created_at'))->format('d/m/Y')
                                        }}
                                    </span>
                                </td>
                                <td data-kt-datatable-value="{{ $proposal->customer?->name }}">
                                    <span class="text-xs font-semibold text-primary">{{ $proposal->customer?->name ??
                                        '—' }}</span>
                                </td>
                                <td class="text-center">
                                    <span style="display:none">{{ str_pad($proposal->operations_count, 6, '0',
                                        STR_PAD_LEFT) }}</span>
                                    <span class="kt-badge kt-badge-sm kt-badge-mono rounded-full">{{
                                        $proposal->operations_count }}</span>
                                </td>
                                <td class="text-center">
                                    <span style="display:none">{{ str_pad($proposal->viewer, 6, '0', STR_PAD_LEFT)
                                        }}</span>
                                    <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-primary rounded-full">{{
                                        $proposal->viewer }}</span>
                                </td>
                                <td class="text-center">
                                    @php $selected = $proposal->countSelectedPeriods(); @endphp
                                    <span style="display:none">{{ str_pad($selected, 6, '0', STR_PAD_LEFT) }}</span>
                                    <span class="kt-badge kt-badge-sm kt-badge-outline kt-badge-success rounded-full">{{
                                        $selected }}</span>
                                </td>
                                <td class="text-end">
                                    <div class="inline-flex items-center justify-end gap-2">
                                        <a href="{{ route('admin.plan-media.proposal.show', $proposal) }}"
                                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                            data-kt-tooltip="#tt_arch_show_{{ $proposal->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-eye"></i>
                                        </a>
                                        <div id="tt_arch_show_{{ $proposal->id }}" class="kt-tooltip">Consulter</div>
                                        {{-- <button type="button" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                            data-kt-modal-toggle="#modal_confirm_delete"
                                            data-confirm-url="{{ route('admin.plan-media.proposal.destroy', ['planMediaProposal' => $proposal]) }}"
                                            data-confirm-name="{{ $proposal->customer?->name }}"
                                            data-kt-tooltip="#tt_arch_del_{{ $proposal->id }}"
                                            data-kt-tooltip-placement="bottom">
                                            <i class="ki-outline ki-trash text-destructive"></i>
                                        </button>
                                        <div id="tt_arch_del_{{ $proposal->id }}" class="kt-tooltip">Supprimer</div>
                                        --}}
                                    </div>
                                </td>
                            </tr>
                            @empty
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="kt-datatable-toolbar">
                    <div class="kt-datatable-length">
                        {{ __('ui.datatable.show') }}
                        <select class="kt-select kt-select-sm w-16" name="perpage"
                            data-kt-datatable-size="true"></select>
                        {{ __('ui.datatable.per_page') }}
                    </div>
                    <div class="kt-datatable-info">
                        <span data-kt-datatable-info="true"></span>
                        <div class="kt-datatable-pagination" data-kt-datatable-pagination="true"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>{{-- /tab_archived --}}

</div>


@endsection