@php
$opStatusColors = [
    'waiting_deal'             => 'kt-badge-destructive',
    'waiting_signature'        => 'kt-badge-primary',
    'signature_reminder'       => 'kt-badge-warning',
    'waiting_element'          => 'kt-badge-warning',
    'requested_elements'       => 'kt-badge-success',
    'waiting_draft'            => 'kt-badge-warning',
    'waiting_draft_walidation' => 'kt-badge-warning',
    'draft_reminder'           => 'kt-badge-warning',
    'waiting_proof'            => 'kt-badge-info',
    'waiting_billing'          => 'kt-badge-warning',
    'billing_done'             => 'kt-badge-success',
    'wining_list_receipt'      => 'kt-badge-success',
    'proof_sended'             => 'kt-badge-success',
    'on_reclamation'           => 'kt-badge-destructive',
    'closed'                   => 'kt-badge-secondary',
];
@endphp

<div class="kt-card-header min-h-14 pt-3">
    <input type="text" placeholder="{{ __('ui.datatable.search') }}" class="kt-input sm:w-48"
        data-kt-datatable-search="#dt_customer_operations" />
</div>

<div id="dt_customer_operations" class="kt-card-table"
    data-kt-datatable="true"
    data-kt-datatable-page-size="10"
    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" 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 scope="col" data-kt-datatable-column="name">
                        <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Opération</span><span class="kt-table-col-sort"></span></span>
                    </th>
                    <th scope="col" class="w-44" data-kt-datatable-column="status">
                        <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-12" data-kt-datatable-column="actions"></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($operations as $op)
                <tr>
                    <td>
                        <span style="display:none">{{ $op->getRawOriginal('publish_date') }}</span>
                        <span class="text-xs text-secondary-foreground">{{ $op->publish_date }}</span>
                    </td>
                    <td data-kt-datatable-value="{{ $op->type?->name }}">
                        @if ($op->type)
                            <span class="kt-badge kt-badge-xs kt-badge-mono">{{ $op->type->name }}</span>
                        @else
                            <span class="text-xs text-secondary-foreground">—</span>
                        @endif
                    </td>
                    <td data-kt-datatable-value="{{ $op->name }}">
                        <a href="{{ route('admin.operations.show', $op) }}"
                            class="text-[13px] font-semibold text-mono hover:text-primary">
                            {{ $op->name }}
                        </a>
                        @if ($op->media)
                            <span class="text-xs text-gray-400 block">{{ $op->media->name }}</span>
                        @endif
                    </td>
                    <td data-kt-datatable-value="{{ \App\Models\Operation::STATUSES[$op->status] ?? $op->status }}">
                        <span class="kt-badge kt-badge-xs kt-badge-outline {{ $opStatusColors[$op->status] ?? 'kt-badge-secondary' }}">
                            {{ \App\Models\Operation::STATUSES[$op->status] ?? $op->status }}
                        </span>
                    </td>
                    <td class="text-end">
                        @can('view-operations')
                        <a href="{{ route('admin.operations.show', $op) }}"
                            class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline">
                            <i class="ki-outline ki-eye"></i>
                        </a>
                        @endcan
                    </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>