{{-- Orders Overview Partial --}}
<div class="row g-4">
    {{-- Orders List --}}
    <div class="col-12">
        <div class="card card-bordered shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <x-ui.nicon name="cart" class="me-2"/>
                    {{ __('Commandes de leads') }}
                </h6>
                <button 
                    type="button" 
                    class="btn btn-sm btn-primary"
                    x-on:click="$wire.emit('showModal', 'modals.api.save-lead-order-modal')"
                >
                    <x-ui.nicon name="plus" class="me-1"/>
                    {{ __('Nouvelle commande') }}
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="min-height: 40vh">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="small fw-semibold">{{ __('Commande') }}</th>
                                <th class="small fw-semibold">{{ __('Clé API') }}</th>
                                <th class="small fw-semibold text-center">{{ __('Statut') }}</th>
                                <th class="small fw-semibold text-center">{{ __('Statistiques') }}</th>
                                <th class="small fw-semibold text-end">{{ __('Budget') }}</th>
                                <th class="small fw-semibold">{{ __('Période') }}</th>
                                <th class="text-end">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($this->leadOrders as $order)
                                @php
                                    $stats = $order->getConversionStats();
                                    $progress = $order->ordered_quantity > 0 
                                        ? min(100, ($stats['total'] / $order->ordered_quantity) * 100)
                                        : null;
                                @endphp
                                <tr 
                                    class="cursor-pointer {{ $selectedOrderId === $order->id ? 'table-primary' : '' }}"
                                    wire:click="selectOrder({{ $order->id }})"
                                    x-data="{ hover: false }"
                                    x-on:mouseenter="hover = true"
                                    x-on:mouseleave="hover = false"
                                >
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-rounded-full bg-info-dim me-2">
                                                <x-ui.nicon name="package" class="text-info"/>
                                            </div>
                                            <div>
                                                <span class="fw-medium" x-bind:class="{ 'text-primary': hover }">
                                                    {{ $order->name }}
                                                </span>
                                                <span class="d-block small text-muted">
                                                    #{{ $order->id }}
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <x-api.order-api-key-info :order="$order"/>
                                    </td>
                                    <td class="text-center">
                                        <x-api.order-status-badge :status="$order->status"/>
                                    </td>
                                    <td class="text-center" style="min-width: 180px;">
                                        @if($stats['total'] > 0)
                                            <div class="d-flex align-items-center justify-content-center gap-2">
                                                <div class="d-flex flex-column align-items-start" style="min-width: 85px;">
                                                    <div class="d-flex align-items-center gap-1 fs-12px">
                                                        <span class="text-success fw-medium">{{ $stats['billable'] }}</span>
                                                        <span class="text-soft">/</span>
                                                        <span class="text-danger">{{ $stats['rejected'] }}</span>
                                                        <span class="text-soft">/ {{ $stats['total'] }}</span>
                                                        @if($order->ordered_quantity)
                                                            <span class="text-muted">({{ number_format($order->ordered_quantity) }})</span>
                                                        @endif
                                                    </div>
                                                    <div class="text-soft fs-11px">
                                                        {{ __('Taux') }}: <span class="fw-medium {{ $stats['rate'] >= 50 ? 'text-success' : ($stats['rate'] >= 25 ? 'text-warning' : 'text-danger') }}">{{ $stats['rate'] }}%</span>
                                                    </div>
                                                </div>
                                                <div class="progress" style="width: 50px; height: 5px;">
                                                    <div 
                                                        class="progress-bar bg-success" 
                                                        role="progressbar" 
                                                        style="width: {{ $stats['rate'] }}%"
                                                    ></div>
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-soft fst-italic fs-12px">{{ __('Aucun lead') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <span class="fw-medium">{{ number_format($stats['total_spent'], 2) }} €</span>
                                        @if($order->planned_investment)
                                            <span class="text-muted">/ {{ number_format($order->planned_investment, 2) }} €</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="small">
                                            @if($order->starts_at)
                                                <span class="text-muted">{{ $order->starts_at->format('d/m/Y') }}</span>
                                            @endif
                                            @if($order->ends_at)
                                                <x-ui.nicon name="arrow-right" class="mx-1 text-muted"/>
                                                <span class="text-muted">{{ $order->ends_at->format('d/m/Y') }}</span>
                                            @endif
                                            @if(!$order->starts_at && !$order->ends_at)
                                                <span class="text-muted">-</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="text-end" x-on:click.stop>
                                        <div class="dropdown">
                                            <button class="btn btn-icon btn-sm btn-trigger" data-bs-toggle="dropdown">
                                                <x-ui.nicon name="more-h"/>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a 
                                                    class="dropdown-item"
                                                    href="javascript:void(0)"
                                                    wire:click="viewOrderDetails({{ $order->id }})"
                                                >
                                                    <x-ui.nicon name="eye" class="me-2"/>
                                                    {{ __('Voir détails') }}
                                                </a>
                                                <a 
                                                    class="dropdown-item"
                                                    href="javascript:void(0)"
                                                    x-on:click="Livewire.emit('showModal', 'modals.api.lead-logs-modal', {{ $order->id }})"
                                                >
                                                    <x-ui.nicon name="reports" class="me-2"/>
                                                    {{ __('Voir l\'historique') }}
                                                </a>
                                                <a 
                                                    class="dropdown-item"
                                                    href="javascript:void(0)"
                                                    wire:click="selectOrder({{ $order->id }})"
                                                >
                                                    <x-ui.nicon name="users" class="me-2"/>
                                                    {{ __('Voir les leads') }}
                                                </a>
                                                <div class="dropdown-divider"></div>
                                                <a 
                                                    class="dropdown-item"
                                                    href="javascript:void(0)"
                                                    x-on:click="$wire.emit('showModal', 'modals.api.save-lead-order-modal', {{ $order->api_key_id }}, {{ $order->id }})"
                                                >
                                                    <x-ui.nicon name="edit" class="me-2"/>
                                                    {{ __('Modifier') }}
                                                </a>
                                                @if($order->status->canPause())
                                                    <a 
                                                        class="dropdown-item text-warning"
                                                        href="javascript:void(0)"
                                                        wire:click="pauseOrder({{ $order->id }})"
                                                        wire:confirm="{{ __('Voulez-vous mettre cette commande en pause ?') }}"
                                                    >
                                                        <x-ui.nicon name="pause" class="me-2"/>
                                                        {{ __('Mettre en pause') }}
                                                    </a>
                                                @endif
                                                @if($order->status->canResume())
                                                    <a 
                                                        class="dropdown-item text-success"
                                                        href="javascript:void(0)"
                                                        wire:click="resumeOrder({{ $order->id }})"
                                                    >
                                                        <x-ui.nicon name="play" class="me-2"/>
                                                        {{ __('Réactiver') }}
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4 text-muted">
                                        <x-ui.nicon name="cart" class="d-block mx-auto mb-2 tw-text-3xl tw-opacity-50"/>
                                        {{ __('Aucune commande trouvée') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Order Stats Cards when an order is selected --}}
{{-- @if($selectedOrderId)
    @php
        $selectedOrder = $this->leadOrders->firstWhere('id', $selectedOrderId);
    @endphp
    @if($selectedOrder)
        <div class="row g-4 mt-2">
            <div class="col-12">
                <div class="card card-bordered shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <x-ui.nicon name="activity" class="me-2"/>
                            {{ __('Détails de la commande') }}: {{ $selectedOrder->name }}
                        </h6>
                        <button 
                            type="button" 
                            class="btn btn-sm btn-outline-secondary"
                            wire:click="selectOrder(null)"
                        >
                            <x-ui.nicon name="cross" class="me-1"/>
                            {{ __('Fermer') }}
                        </button>
                    </div>
                    <div class="card-body">
                        <x-api.order-quick-stats :order="$selectedOrder"/>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endif --}}