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

@php $breadcrumb = 'operations.billed'; @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 facturées</h1>
            <span class="kt-badge kt-badge-success">{{ $operations->count() }}</span>
        </div>
        <div class="flex items-center gap-2.5">
            <a href="{{ route('admin.operations.billed.export') }}"
                class="kt-btn kt-btn-outline text-green-600">
                <i class="ki-outline ki-exit-down  text-green-600"></i> Exporter
            </a>
        </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_billed_datatable" />

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

                <label class="flex items-center gap-2 text-sm">
                    <span class="text-secondary-foreground whitespace-nowrap">Commercial</span>
                    <select name="user_id" class="kt-select kt-select-sm w-36" onchange="this.form.submit()">
                        <option value="">Tous</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}" {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->firstname }}
                            </option>
                        @endforeach
                    </select>
                </label>

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

        {{-- Datatable --}}
        <div id="kt_operations_billed_datatable" 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-32" 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-36" data-kt-datatable-column="invoice_number">
                                <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">N°Facture</span><span class="kt-table-col-sort"></span></span>
                            </th>
                            <th scope="col" class="w-28" data-kt-datatable-column="invoice_date">
                                <span class="kt-table-col"><span class="kt-table-col-label text-xs uppercase font-semibold text-gray-700">Date Facture</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-24" 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->invoice_number }}">
                                @if ($operation->invoice_number)
                                    <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-primary rounded-full">{{ $operation->invoice_number }}</span>
                                @else
                                    <span class="text-xs text-secondary-foreground">—</span>
                                @endif
                            </td>
                            <td data-kt-datatable-value="{{ $operation->getRawOriginal('invoice_date') }}">
                                <span class="text-xs text-secondary-foreground">{{ $operation->invoice_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>
                            </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">
                                    <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_b_{{ $operation->id }}"
                                        data-kt-tooltip-placement="bottom">
                                        <i class="ki-outline ki-copy"></i>
                                    </button>
                                    <div id="tt_dup_b_{{ $operation->id }}" class="kt-tooltip">Dupliquer</div>
                                    <a href="{{ route('admin.operations.show', $operation) }}"
                                        class="kt-btn kt-btn-sm kt-btn-icon kt-btn-outline"
                                        data-kt-tooltip="#tt_view_b_{{ $operation->id }}"
                                        data-kt-tooltip-placement="bottom">
                                        <i class="ki-outline ki-eye"></i>
                                    </a>
                                    <div id="tt_view_b_{{ $operation->id }}" class="kt-tooltip">Consulter</div>
                                </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