@php
    $sortUrl = function($col, $defaultDir = 'asc') use ($sortBy, $sortDir) {
        $isCurrentCol = ($sortBy ?? '') === $col;
        $currentDir = $sortDir ?? $defaultDir;
        $newDir = $isCurrentCol && $currentDir === $defaultDir
            ? ($defaultDir === 'asc' ? 'desc' : 'asc')
            : $defaultDir;
        $query = array_merge(
            request()->except('options_sort_by', 'options_sort_dir'),
            ['options_sort_by' => $col, 'options_sort_dir' => $newDir, 'tab' => 'options']
        );

        return url()->current().'?'.http_build_query($query);
    };
@endphp
<form class="row g-3 mb-4" id="lot-options-filter-form">
    <div class="col-md-6">
        <input type="text" name="search_name" id="lot-options-search-name" class="form-control" placeholder="Rechercher par client..." autocomplete="off">
    </div>
    <div class="col-md-4">
        <x-filters.multi-select-dropdown
            id="lot-options-state-filter"
            label="Statut de l'option"
            name="lot_options_state"
            :options="$optionStateFilterOptions ?? []"
            :selected="[]"
            wrapperClass="filter-wrap-10"
            buttonClass="form-select form-select-sm text-start d-flex align-items-center justify-content-between"
            inputClass="form-check-input mt-0 fiscalite-filter-checkbox lot-options-multi-filter"
        />
    </div>
</form>
<div class="table-responsive">
    <table class="table-personnalisee table-hover align-middle mb-0">
        <thead class="table-light">
            <tr>
                <th style="width: 30%;">
                    <a href="{{ $sortUrl('client') }}" class="text-decoration-none sort-link">
                        @if(($sortBy ?? '') === 'client')
                            <i class="fas fa-sort-{{ ($sortDir ?? 'asc') === 'asc' ? 'up' : 'down' }} me-1"></i>
                        @else
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                        @endif
                        Client
                    </a>
                </th>
                <th style="width: 12%;" class="text-center">
                    <a href="{{ $sortUrl('rank', 'asc') }}" class="text-decoration-none sort-link d-inline-block">
                        @if(($sortBy ?? '') === 'rank')
                            <i class="fas fa-sort-{{ ($sortDir ?? 'asc') === 'asc' ? 'up' : 'down' }} me-1"></i>
                        @else
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                        @endif
                        Rang
                    </a>
                </th>
                <th style="width: 18%;">
                    <a href="{{ $sortUrl('created_at', 'desc') }}" class="text-decoration-none sort-link">
                        @if(($sortBy ?? 'created_at') === 'created_at')
                            <i class="fas fa-sort-{{ ($sortDir ?? 'desc') === 'asc' ? 'up' : 'down' }} me-1"></i>
                        @else
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                        @endif
                        Posée le
                    </a>
                </th>
                <th style="width: 15%;">
                    <a href="{{ $sortUrl('date_end') }}" class="text-decoration-none sort-link">
                        @if(($sortBy ?? '') === 'date_end')
                            <i class="fas fa-sort-{{ ($sortDir ?? 'asc') === 'asc' ? 'up' : 'down' }} me-1"></i>
                        @else
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                        @endif
                        Fin
                    </a>
                </th>
                <th style="width: 12%;" class="text-center">
                    <a href="{{ $sortUrl('state') }}" class="text-decoration-none sort-link d-inline-block">
                        @if(($sortBy ?? '') === 'state')
                            <i class="fas fa-sort-{{ ($sortDir ?? 'asc') === 'asc' ? 'up' : 'down' }} me-1"></i>
                        @else
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                        @endif
                        Statut
                    </a>
                </th>
            </tr>
        </thead>
        <tbody id="lot-options-tbody">
            @foreach($options as $option)
                <tr data-client-name="{{ strtolower($option->client?->fullName() ?? '') }}" data-state="{{ $option->state?->value ?? '' }}">
                    <td>
                        <div class="d-flex align-items-center">
                            @if($option->client)
                                <a href="{{ route('partner.clients.show', $option->client) }}" class="text-decoration-none d-flex align-items-center text-navigo text-medium text-dark text-16">
                                    @php
                                        $firstInitial = strtoupper(substr($option->client->firstname ?? '', 0, 1));
                                        $lastInitial = strtoupper(substr($option->client->lastname ?? '', 0, 1));
                                        $initials = $firstInitial . $lastInitial;
                                    @endphp
                                    @if($initials)
                                        <span class="client-avatar me-2">{{ $initials }}</span>
                                    @endif
                                    <span class="text-navigo">{{ $option->client->fullName() }}</span>
                                </a>
                            @else
                                <span class="text-muted">Client inconnu</span>
                            @endif
                        </div>
                    </td>
                    <td class="text-center">
                        @if($option->getRang())
                            <span class="badge">Rang {{ $option->getRang() }}</span>
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    </td>
                    <td>
                        @if($option->created_at)
                            <span class="text-roboto text-medium text-grey text-14">{{ $option->created_at->format('d/m/Y à H:i') }}</span>
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    </td>
                    <td>
                        @if($option->date_end)
                            <span class="text-roboto text-medium text-grey text-14">{{ $option->date_end->format('d/m/Y à H:i') }}</span>
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    </td>
                    <td class="text-center">
                        @if($option->state)
                            <span class="badge option-state-{{ $option->state->value }}" title="{{ $option->state->description() }}">
                                <i class="fas {{ $option->state->icon() }} me-1"></i>{{ $option->state->label() }}
                            </span>
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>