@extends('back.layout.app')
@section('title', config('app.name') . ' - Gestion des opérations Média')

@php $breadcrumb = 'plan-media.index'; @endphp

@section('content')

{{-- Header --}}
<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 uppercase">Gestion des opérations Média</h1>
        </div>
        <div class="flex items-center gap-3">
            <button type="button" id="btn_generate_plan" style="display:none"
                class="kt-btn kt-btn-success"
                data-kt-modal-toggle="#modal_generate_plan">
                <i class="ki-outline ki-document text-sm"></i>
                Générer une proposition de plan Média
            </button>
            <a href="{{ route('admin.plan-media.operations.create') }}" class="kt-btn kt-btn-outline text-primary">
                <i class="ki-outline ki-plus-circle text-primary"></i>
                Créer une opération média
            </a>
        </div>
    </div>
</div>

{{-- Table --}}
<div class="kt-container-fixed">
    <div class="kt-card">

        {{-- Toolbar --}}
        <div class="kt-card-header flex items-center gap-3 min-h-16">
            <input type="text" placeholder="{{ __('ui.datatable.search') }}"
                class="kt-input sm:w-48"
                data-kt-datatable-search="#dt_plan_ops">
            <label class="flex items-center gap-2 text-sm">
                <span class="text-secondary-foreground">Type</span>
                <select id="filter_type" class="kt-select kt-select-sm w-44">
                    <option value="">Tous</option>
                    @foreach($types as $type)
                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                    @endforeach
                </select>
            </label>
            <button type="button" id="filter_reset" style="display:none" class="kt-btn kt-btn-sm kt-btn-ghost">
                <i class="ki-outline ki-cross text-xs"></i>
            </button>
        </div>

        {{-- Table sans pagination --}}
        <div id="dt_plan_ops" class="kt-card-table"
            data-kt-datatable="true"
            data-kt-datatable-page-size="9999"
            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 class="w-10" data-kt-datatable-column="check" data-kt-datatable-sortable="false">
                                <input type="checkbox" class="kt-checkbox" data-kt-datatable-check="true">
                            </th>
                            <th class="w-36" data-kt-datatable-column="type">
                                <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Type</span><span class="kt-table-col-sort"></span></span>
                            </th>
                            <th class="w-28" data-kt-datatable-column="maj">
                                <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Maj</span><span class="kt-table-col-sort"></span></span>
                            </th>
                            <th data-kt-datatable-column="media">
                                <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Média</span><span class="kt-table-col-sort"></span></span>
                            </th>
                            <th data-kt-datatable-column="cible" data-kt-datatable-sortable="false">
                                <span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Cible</span>
                            </th>
                            <th class="w-36" data-kt-datatable-column="periodicite">
                                <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Périodicité</span><span class="kt-table-col-sort"></span></span>
                            </th>
                            <th class="w-32" data-kt-datatable-column="dotation">
                                <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Dotation</span><span class="kt-table-col-sort"></span></span>
                            </th>
                            <th class="w-24" data-kt-datatable-column="actions" data-kt-datatable-sortable="false"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($operations as $op)
                        <tr>
                            <td>
                                <input type="checkbox" class="kt-checkbox plan-op-check" value="{{ $op->id }}">
                            </td>
                            <td data-kt-datatable-value="{{ $op->media?->type?->name }}">
                                <span class="plan-type-id" hidden>{{ $op->media?->media_type_id }}</span>
                                @if($op->media?->type)
                                <span class="kt-badge kt-badge-success kt-badge-xs">{{ $op->media->type->name }}</span>
                                @else
                                <span class="text-xs text-secondary-foreground">—</span>
                                @endif
                            </td>
                            <td data-kt-datatable-value="{{ $op->updated_at?->format('Y-m-d') }}">
                                <span class="text-xs text-secondary-foreground">{{ $op->updated_at?->format('d/m/Y') }}</span>
                            </td>
                            <td data-kt-datatable-value="{{ $op->media?->name }}">
                                @if($op->media)
                                <a href="{{ route('admin.crm.media.show', [$op->media->id, 'overview']) }}"
                                    class="text-xs font-semibold text-primary hover:underline">
                                    {{ $op->media->name }}
                                </a>
                                @else
                                <span class="text-secondary-foreground">—</span>
                                @endif
                            </td>
                            <td>
                                <div class="flex flex-wrap gap-1">
                                    @foreach($op->media?->targets ?? [] as $target)
                                    <span class="kt-badge kt-badge-outline kt-badge-secondary kt-badge-xs">{{ $target->name }}</span>
                                    @endforeach
                                </div>
                            </td>
                            <td data-kt-datatable-value="{{ $op->frequency }}">
                                <span class="kt-badge kt-badge-primary kt-badge-xs">{{ $op->frequency }}</span>
                            </td>
                            <td data-kt-datatable-value="{{ $op->amount }}">
                                <span style="display:none">{{ str_pad((int)($op->amount * 100), 12, '0', STR_PAD_LEFT) }}</span>
                                <span class="kt-badge kt-badge-mono kt-badge-xs">{{ number_format($op->amount, 2, '.', ' ') }} €</span>
                            </td>
                            <td class="text-end">
                                <div class="inline-flex items-center gap-2">
                                    <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.operations.destroy', $op) }}"
                                        data-confirm-name="{{ $op->media?->name }}">
                                        <i class="ki-outline ki-trash text-destructive"></i>
                                    </button>
                                    <a href="{{ route('plan-media.preview', $op) }}"
                                        target="_blank"
                                        class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                        data-kt-tooltip="#tt_view_{{ $op->id }}"
                                        data-kt-tooltip-placement="bottom">
                                        <i class="ki-outline ki-eye"></i>
                                    </a>
                                    <div id="tt_view_{{ $op->id }}" class="kt-tooltip">Consulter</div>
                                    <a href="{{ route('admin.plan-media.operations.edit', $op) }}"
                                        class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                        data-kt-tooltip="#tt_edit_{{ $op->id }}"
                                        data-kt-tooltip-placement="bottom">
                                        <i class="ki-outline ki-pencil text-primary"></i>
                                    </a>
                                    <div id="tt_edit_{{ $op->id }}" class="kt-tooltip">Modifier</div>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-8 text-secondary-foreground">
                                Aucune opération média.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

{{-- Modal génération proposition --}}
<div id="modal_generate_plan" class="kt-modal kt-modal-center hidden" data-kt-modal="true">
    <div class="kt-modal-content max-w-md">
        <div class="kt-modal-header">
            <h3 class="kt-modal-title">Création d'une offre de Plan média</h3>
            <button type="button" class="kt-modal-close" aria-label="Close modal" data-kt-modal-dismiss="#modal_generate_plan">
                <i class="ki-outline ki-cross text-lg"></i>
            </button>
        </div>
        <form id="proposal_form" method="POST" action="{{ route('admin.plan-media.proposal.store') }}">
            @csrf
            <div class="kt-modal-body flex flex-col gap-4">

                <div class="flex flex-col gap-1">
                    <label class="kt-label mb-2">Choix du client</label>
                    <select name="customer_id" class="kt-select"
                        data-kt-select="true"
                        data-kt-select-enable-search="true"
                        data-kt-select-search-placeholder="Rechercher un client..."
                        data-kt-select-placeholder="Sélectionner un client...">
                        <option value=""></option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div id="proposal_plan_inputs"></div>

            </div>
            <div class="kt-modal-footer justify-end gap-3">
                <button type="button" class="kt-btn kt-btn-ghost kt-btn-destructive"
                    data-kt-modal-dismiss="#modal_generate_plan">
                    Annuler
                </button>
                <button type="submit" id="submit_proposal" class="kt-btn kt-btn-primary">
                    Gérer le plan Média
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
(function () {
    var currentType = '';

    function applyFilters() {
        document.querySelectorAll('#dt_plan_ops tbody tr').forEach(function(tr) {
            var typeId = tr.querySelector('.plan-type-id')?.textContent?.trim() ?? '';
            var matchType = !currentType || typeId === currentType;
            tr.style.display = matchType ? '' : 'none';
            if (!matchType) {
                var cb = tr.querySelector('.plan-op-check');
                if (cb && cb.checked) { cb.checked = false; updateButton(); }
            }
        });
    }

    function updateButton() {
        var count = document.querySelectorAll('.plan-op-check:checked').length;
        document.getElementById('btn_generate_plan').style.display = count > 0 ? 'inline-flex' : 'none';
    }

    // Filtre type
    document.addEventListener('change', function(e) {
        if (e.target.id === 'filter_type') {
            currentType = e.target.value;
            document.getElementById('filter_reset').style.display = currentType ? 'inline-flex' : 'none';
            applyFilters();
        }
        if (e.target.classList.contains('plan-op-check')) {
            updateButton();
        }
    });

    document.getElementById('filter_reset')?.addEventListener('click', function() {
        var sel = document.getElementById('filter_type');
        if (sel) { sel.value = ''; sel.dispatchEvent(new Event('change', { bubbles: true })); }
    });

    // Injecte les IDs cochés avant soumission
    document.getElementById('proposal_form')?.addEventListener('submit', function() {
        var container = document.getElementById('proposal_plan_inputs');
        container.innerHTML = '';
        document.querySelectorAll('.plan-op-check:checked').forEach(function(cb) {
            var input = document.createElement('input');
            input.type  = 'hidden';
            input.name  = 'plan[]';
            input.value = cb.value;
            container.appendChild(input);
        });
    });
})();
</script>
@endpush