@extends('sur-mesure.layouts.app')

@section('title', __('surmesure.orders_received'))

@section('styles')
    <style>
        .sm-table { width: 100%; border-collapse: collapse; }
        .sm-table th {
            text-align: left; font-size: 12px; text-transform: uppercase;
            letter-spacing: .5px; color: #888; padding: 12px 14px; border-bottom: 1px solid #eee;
        }
        .sm-table td { padding: 14px; border-bottom: 1px solid #f4f4f4; vertical-align: middle; }
        .sm-table tr:last-child td { border-bottom: none; }

        .sm-status {
            font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
            border-radius: 20px; padding: 4px 12px; background: #f1f1f1; color: #555; white-space: nowrap;
        }
        .sm-status-paid { background: #eaf8ee; color: #2c6b3f; }
        .sm-status-pending { background: #fff8e5; color: #8a6d18; }
        .sm-status-cancelled { background: #fff1f1; color: #a12626; }

        .sm-search { display: flex; gap: 10px; margin: 24px 0; }
        .sm-search input { flex: 1; border: 1px solid #ddd; border-radius: 10px; padding: 12px; }

        .sm-empty { text-align: center; padding: 50px 20px; color: #999; }

        .sm-view {
            border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px;
            background: #f3eeda; color: #8a7430; text-decoration: none;
        }
    </style>
@endsection

@section('content')
    <div class="sm-page">
        <div class="sm-card">
            <h3>{{ __('surmesure.orders_received') }}</h3>
            <p class="sm-lead">{{ __('surmesure.orders_intro') }}</p>

            @if(session('success'))
                <div class="sm-alert-success">{{ session('success') }}</div>
            @endif

            <form method="GET" class="sm-search">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('surmesure.orders_search_placeholder') }}">
                <button class="rts-btn btn-primary">{{ __('surmesure.search') }}</button>
            </form>

            @if($orders->isEmpty())
                <div class="sm-empty">{{ __('surmesure.no_order') }}</div>
            @else
                <div style="overflow-x:auto;">
                    <table class="sm-table">
                        <thead>
                            <tr>
                                <th>{{ __('surmesure.order_number') }}</th>
                                <th>{{ __('surmesure.customer') }}</th>
                                <th>{{ __('surmesure.date') }}</th>
                                <th>{{ __('surmesure.items') }}</th>
                                <th>{{ __('surmesure.total') }}</th>
                                <th>{{ __('surmesure.status') }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($orders as $order)
                                @php
                                    $statusClass = match($order->payment_status) {
                                        'paid' => 'sm-status-paid',
                                        'cancelled', 'refunded' => 'sm-status-cancelled',
                                        default => 'sm-status-pending',
                                    };
                                @endphp
                                <tr>
                                    <td><strong>{{ $order->order_number }}</strong></td>
                                    <td>
                                        {{ $order->buyer->name ?? '—' }}
                                        <div style="font-size:12px;color:#999;">{{ $order->buyer->email ?? '' }}</div>
                                    </td>
                                    <td>{{ $order->created_at->format('d/m/Y') }}</td>
                                    <td>{{ $order->items->count() }}</td>
                                    <td>{{ number_format($order->total, 2, ',', ' ') }} €</td>
                                    <td><span class="sm-status {{ $statusClass }}">{{ $order->payment_status }}</span></td>
                                    <td style="text-align:right;">
                                        <a class="sm-view" href="{{ route('sur-mesure.orders.show', $order) }}">{{ __('surmesure.view') }}</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div style="margin-top:24px;">
                    {{ $orders->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection