@extends('back.layout.app')
@section('title', config('app.name') . ' - Opérations à facturer')

@php
$breadcrumb = 'operations.waiting_billing';
@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 items-center gap-3">
            <h1 class="text-xl font-medium leading-none text-mono">Opérations à facturer</h1>
            <span class="kt-badge kt-badge-primary">{{ $operations->count() }}</span>
        </div>
        <div class="flex items-center gap-2.5">
            @can('export-operations')
            <a href="{{ route('admin.operations.waiting_billing.export') }}" class="kt-btn kt-btn-outline text-green-600">
                <i class="ki-outline ki-exit-down  text-green-600"></i> Exporter
            </a>
            @endcan
        </div>
    </div>
</div>

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

        {{-- Barre de filtres --}}
        <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="#kt_operations_waiting_billing_datatable" />

            <form method="GET" action="{{ route('admin.operations.waiting_billing') }}"
                class="flex flex-wrap items-center gap-4 ms-auto">

                @if (request()->filled('user_id'))
                <a href="{{ route('admin.operations.waiting_billing') }}" class="kt-btn kt-btn-sm kt-btn-ghost">
                    Réinitialiser
                </a>
                @endif
            </form>
        </div>

        {{-- Datatable --}}
        <div id="kt_operations_waiting_billing_datatable" class="kt-card-table" data-kt-datatable="true"
            data-kt-datatable-page-size="20" 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-36" data-kt-datatable-column="num_bdc">
                                <span class="kt-table-col"><span
                                        class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">N°BDC</span><span
                                        class="kt-table-col-sort"></span></span>
                            </th>
                            <th scope="col" class="w-28" data-kt-datatable-column="publish_date">
                                <span class="kt-table-col"><span
                                        class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Date
                                        sortie</span><span class="kt-table-col-sort"></span></span>
                            </th>
                            <th scope="col" class="w-40" 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-28" data-kt-datatable-column="user">
                                <span class="kt-table-col"><span
                                        class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Commercial</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>
                        @foreach ($operations as $operation)
                        <tr>
                            <td data-kt-datatable-value="{{ $operation->num_bdc }}">
                                @if ($operation->num_bdc)
                                <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-secondary rounded-full">{{
                                    $operation->num_bdc }}</span>
                                @endif
                            </td>
                            <td data-kt-datatable-value="{{ $operation->getRawOriginal('publish_date') }}">
                                <span class="text-xs text-secondary-foreground">{{ $operation->publish_date }}</span>
                            </td>
                            <td data-kt-datatable-value="{{ $operation->type?->name }}">
                                @if ($operation->type)
                                <span class="kt-badge kt-badge-xs kt-badge-mono">{{ $operation->type->name }}</span>
                                @else
                                <span class="text-xs text-secondary-foreground">—</span>
                                @endif
                            </td>
                            <td data-kt-datatable-value="{{ $operation->name }}">
                                <a href="{{ route('admin.operations.show', $operation) }}"
                                    class="text-[13px] font-semibold text-mono hover:text-primary">
                                    {{ $operation->name }}
                                </a>
                                @if($operation->media)
                                <span class="text-xs text-gray-400 block">{{ $operation->media->name }}</span>
                                @endif
                            </td>
                            <td data-kt-datatable-value="{{ $operation->user?->firstname }}">
                                <span class="text-xs text-gray-600">{{ $operation->user?->firstname ?? '—' }}</span>
                            </td>
                            <td class="text-end">
                                <span class="inline-flex gap-2">
                                    @can('edit-operations')
                                    <button type="button"
                                        onclick="Livewire.dispatch('open-duplicate-modal', { operationId: {{ $operation->id }} })"
                                        class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                        data-kt-tooltip="#tt_dup_{{ $operation->id }}"
                                        data-kt-tooltip-placement="bottom">
                                        <i class="ki-outline ki-copy"></i>
                                    </button>
                                    <div id="tt_dup_{{ $operation->id }}" class="kt-tooltip">Dupliquer</div>
                                    @endcan

                                    @can('view-operations')
                                    <a href="{{ route('admin.operations.show', $operation) }}"
                                        class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                        data-kt-tooltip="#tt_view_{{ $operation->id }}"
                                        data-kt-tooltip-placement="bottom">
                                        <i class="ki-outline ki-eye"></i>
                                    </a>
                                    <div id="tt_view_{{ $operation->id }}" class="kt-tooltip">Consulter</div>
                                    @endcan
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </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>

@endsection