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

@section('title', __('surmesure.order') . ' ' . $order->order_number)

@section('styles')
    <style>
        .sm-order-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

        .sm-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
        @media (max-width: 991px) { .sm-info-grid { grid-template-columns: 1fr; } }

        .sm-info-box { border: 1px solid #eee; border-radius: 12px; padding: 16px; }
        .sm-info-box h6 {
            font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
            color: #888; margin-bottom: 10px;
        }

        .sm-item { border: 1px solid #eee; border-radius: 14px; padding: 20px; margin-top: 18px; }
        .sm-item-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .sm-item-name { font-size: 17px; font-weight: 700; }

        /* Les réponses du client au configurateur : c'est la fiche de fabrication. */
        .sm-specs { margin-top: 16px; border-top: 1px dashed #e5e5e5; padding-top: 16px; }
        .sm-specs h6 {
            font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
            color: #C3AD66; margin-bottom: 12px;
        }
        .sm-spec-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
        @media (max-width: 767px) { .sm-spec-list { grid-template-columns: 1fr; } }

        .sm-spec { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid #f6f6f6; }
        .sm-spec dt { color: #777; }
        .sm-spec dd { font-weight: 600; margin: 0; text-align: right; }

        .sm-files { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
        .sm-file {
            display: inline-flex; align-items: center; gap: 8px;
            background: #f7f4ea; color: #8a7430; border-radius: 10px;
            padding: 8px 14px; font-size: 13px; text-decoration: none;
        }
        .sm-file:hover { background: #f0ead6; color: #6d5b25; }
    </style>
@endsection

@section('content')
    <div class="sm-page">
        <div class="sm-card">
            <div class="sm-order-head">
                <div>
                    <h3>{{ __('surmesure.order') }} {{ $order->order_number }}</h3>
                    <p class="sm-lead">{{ $order->created_at->format('d/m/Y H:i') }}</p>
                </div>

                @if($order->payment_status === 'paid' && $order->status !== 'shipped')
                    <form action="{{ route('sur-mesure.orders.shipped', $order) }}" method="POST">
                        @csrf
                        <button class="rts-btn btn-primary">{{ __('surmesure.mark_shipped') }}</button>
                    </form>
                @endif
            </div>

            @if(session('success'))
                <div class="sm-alert-success" style="margin-top:20px;">{{ session('success') }}</div>
            @endif

            <div class="sm-info-grid">
                <div class="sm-info-box">
                    <h6>{{ __('surmesure.customer') }}</h6>
                    <div>{{ $order->buyer->name ?? '—' }}</div>
                    <div style="color:#888;font-size:13px;">{{ $order->buyer->email ?? '' }}</div>
                    <div style="color:#888;font-size:13px;">{{ $order->buyer->phone ?? '' }}</div>
                </div>

                <div class="sm-info-box">
                    <h6>{{ __('surmesure.status') }}</h6>
                    <div>{{ __('surmesure.payment') }} : <strong>{{ $order->payment_status }}</strong></div>
                    <div>{{ __('surmesure.shipping') }} : <strong>{{ $order->status }}</strong></div>
                </div>

                <div class="sm-info-box">
                    <h6>{{ __('surmesure.total') }}</h6>
                    <div>{{ __('surmesure.products') }} : {{ number_format($order->products_total, 2, ',', ' ') }} €</div>
                    <div>{{ __('surmesure.shipping_cost') }} : {{ number_format($order->shipping_total, 2, ',', ' ') }} €</div>
                    @if($order->hasOfferedShipping())
                        <div>{{ __('messages.offered_shipping_cost') }} : - {{ number_format($order->offered_shipping_total ?? 0, 2, ',', ' ') }} €</div>
                    @endif
                    <div style="margin-top:6px;font-weight:700;">{{ number_format($order->total, 2, ',', ' ') }} €</div>
                </div>
            </div>

            @foreach($order->items as $item)
                <div class="sm-item">
                    <div class="sm-item-head">
                        <div>
                            <div class="sm-item-name">{{ $item->product_name }}</div>
                            <div style="color:#888;font-size:13px;margin-top:4px;">
                                {{ __('surmesure.quantity') }} : {{ $item->quantity }}
                                @if($item->product?->production_delay_days)
                                    · {{ __('surmesure.production_delay') }} : {{ $item->product->production_delay_days }} {{ __('surmesure.days') }}
                                @endif
                            </div>
                        </div>
                        <div style="text-align:right;">
                            <div style="font-weight:700;">{{ number_format($item->subtotal, 2, ',', ' ') }} {{ $item->currency }}</div>
                            <div style="color:#888;font-size:13px;">{{ number_format($item->unit_price, 2, ',', ' ') }} × {{ $item->quantity }}</div>
                        </div>
                    </div>

                    @if(!empty($item->selected_variants))
                        <div class="sm-specs">
                            <h6>{{ __('surmesure.specs_title') }}</h6>

                            <dl class="sm-spec-list">
                                @foreach($item->selected_variants as $label => $value)
                                    <div class="sm-spec">
                                        <dt>{{ $label }}</dt>
                                        <dd>{{ $value }}</dd>
                                    </div>
                                @endforeach
                            </dl>
                        </div>
                    @endif

                    @if(!empty($item->custom_files))
                        <div class="sm-files">
                            @foreach($item->custom_files as $label => $path)
                                <a class="sm-file" href="{{ asset('storage/' . $path) }}" target="_blank" rel="noopener">
                                    📎 {{ $label }}
                                </a>
                            @endforeach
                        </div>
                    @endif

                    @if($item->delivery_mode)
                        <div style="margin-top:14px;color:#888;font-size:13px;">
                            {{ __('surmesure.delivery_mode') }} : {{ __('messages.' . $item->delivery_mode) }}
                            @if($item->relay_point_name)
                                — {{ $item->relay_point_name }}, {{ $item->relay_point_address }}
                            @endif
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
@endsection