@extends('admin.layouts.app')
@section('title', 'Order #'.$order->id)
@section('heading', 'Order #'.$order->id)

@section('content')
<div class="page-actions">
    <a href="{{ route('admin.orders.index') }}" class="adm-btn adm-btn-ghost"><i class="fa-solid fa-arrow-left"></i> Back to orders</a>
    <div class="page-actions-buttons">
        <span style="font-family:monospace; font-size:.85rem; color:#6366f1; background:#eff6ff; padding:.35rem .85rem; border-radius:8px; border:1px solid #bfdbfe;">
            {{ $order->tracking_id }}
        </span>
        <span class="order-status-badge status-{{ $order->status }} adm-btn">
            @if($order->status === 'pending')   <i class="fa-solid fa-clock"></i>
            @elseif($order->status === 'confirmed') <i class="fa-solid fa-hammer"></i>
            @elseif($order->status === 'shipped')   <i class="fa-solid fa-truck"></i>
            @elseif($order->status === 'complete')  <i class="fa-solid fa-circle-check"></i>
            @endif
            {{ ucfirst($order->status) }}
        </span>
    </div>
</div>

{{-- 4-Step Status Flow --}}
@php
    $flow = [
        ['key'=>'pending',   'icon'=>'fa-clock',        'label'=>'Pending',      'sub'=>'Order placed'],
        ['key'=>'confirmed', 'icon'=>'fa-hammer',       'label'=>'Confirmed',    'sub'=>'In production'],
        ['key'=>'shipped',   'icon'=>'fa-truck',        'label'=>'Shipped',      'sub'=>'On the way'],
        ['key'=>'complete',  'icon'=>'fa-circle-check', 'label'=>'Complete',     'sub'=>'Delivered'],
    ];
    $idx = ['pending'=>0,'confirmed'=>1,'shipped'=>2,'complete'=>3];
    $cur = $idx[$order->status] ?? 0;
@endphp
<div class="status-flow">
    @foreach($flow as $i => $step)
        <div class="status-flow-step {{ $cur >= $i ? 'done' : '' }} {{ $cur === $i ? 'current' : '' }}">
            <div class="sfs-icon"><i class="fa-solid {{ $step['icon'] }}"></i></div>
            <div class="sfs-info"><strong>{{ $step['label'] }}</strong><small>{{ $step['sub'] }}</small></div>
        </div>
        @if($i < count($flow)-1)
            <div class="sfs-line {{ $cur > $i ? 'active' : '' }}"></div>
        @endif
    @endforeach
</div>

@if(session('success'))
    <div style="background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; padding:.85rem 1rem; border-radius:10px; margin:1rem 0; font-size:.9rem;">
        <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
    </div>
@endif

<div style="display:grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-top:1.5rem;">
    {{-- LEFT: Items + notes --}}
    <div>
        <div class="card">
            <h3 style="margin-bottom:1rem;"><i class="fa-solid fa-box"></i> Items ({{ $order->items->count() }})</h3>
            <table class="data-table">
                <thead><tr><th>Image</th><th>Product</th><th>Size</th><th>Qty</th><th>Price</th><th>Total</th></tr></thead>
                <tbody>
                    @foreach($order->items as $it)
                        <tr>
                            <td><img src="{{ asset($it->image) }}" class="thumb"></td>
                            <td><strong>{{ $it->product_name }}</strong></td>
                            <td>{{ $it->size ?? 'N/A' }}</td>
                            <td>{{ $it->qty }}</td>
                            <td>Rs {{ number_format($it->price, 0) }}</td>
                            <td><strong>Rs {{ number_format($it->price * $it->qty, 0) }}</strong></td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr><td colspan="5" style="text-align:right; color:#64748b;">Subtotal</td><td>Rs {{ number_format($order->subtotal, 0) }}</td></tr>
                    <tr><td colspan="5" style="text-align:right; color:#64748b;">Shipping</td><td>{{ $order->shipping == 0 ? 'FREE' : 'Rs '.number_format($order->shipping, 0) }}</td></tr>
                    <tr><td colspan="5" style="text-align:right; font-weight:700;">TOTAL</td><td><strong>Rs {{ number_format($order->total, 0) }}</strong></td></tr>
                </tfoot>
            </table>
        </div>

        @if($order->customer_notes)
        <div class="card" style="background:#fffbeb; border-color:#fde68a;">
            <h3 style="margin-bottom:.75rem; color:#92400e;"><i class="fa-solid fa-ruler"></i> Customer Size / Measurement Notes</h3>
            <p style="line-height:1.7; white-space:pre-line;">{{ $order->customer_notes }}</p>
        </div>
        @endif
    </div>

    {{-- RIGHT: Customer, address, actions --}}
    <div>
        {{-- Customer info --}}
        <div class="card">
            <h3 style="margin-bottom:.75rem;"><i class="fa-solid fa-user"></i> Customer</h3>
            <p><strong>{{ $order->name }}</strong></p>
            <p class="muted" style="margin:.2rem 0;">{{ $order->email }}</p>
            <p>{{ $order->phone }}</p>
            @if($order->user_id && $order->user)
                <p style="margin-top:.7rem;"><a href="{{ route('admin.users.show', $order->user) }}" class="adm-btn adm-btn-ghost"><i class="fa-solid fa-arrow-right"></i> View account</a></p>
            @endif
        </div>

        {{-- Delivery address --}}
        <div class="card">
            <h3 style="margin-bottom:.75rem;"><i class="fa-solid fa-location-dot"></i> Delivery Address</h3>
            <p>{{ $order->address }}</p>
            <p>{{ $order->city }}@if($order->state), {{ $order->state }}@endif @if($order->zip) {{ $order->zip }}@endif</p>
            @if($order->notes)
                <p style="margin-top:.5rem; padding:.65rem; background:#f1f5f9; border-radius:6px; font-size:.875rem;"><strong>Notes:</strong> {{ $order->notes }}</p>
            @endif
        </div>

        {{-- Status actions --}}
        <div class="card">
            <h3 style="margin-bottom:.75rem;"><i class="fa-solid fa-rotate"></i> Update Status</h3>
            <p style="font-size:.85rem; color:#64748b; margin-bottom:1rem;">
                Current: <span class="order-status-badge status-{{ $order->status }}">{{ ucfirst($order->status) }}</span>
            </p>

            <div style="display:flex; flex-direction:column; gap:.75rem; margin-bottom:1rem;">

                {{-- PENDING → CONFIRMED --}}
                @if($order->status === 'pending')
                    <form method="POST" action="{{ route('admin.orders.status', $order) }}">
                        @csrf <input type="hidden" name="status" value="confirmed">
                        <button class="adm-btn adm-btn-success" style="width:100%; justify-content:center;">
                            <i class="fa-solid fa-hammer"></i> Confirm Order (Start Production)
                        </button>
                        <p style="font-size:.77rem; color:#64748b; margin:.4rem 0 0; text-align:center;">Email will be sent to customer</p>
                    </form>

                {{-- CONFIRMED → SHIPPED --}}
                @elseif($order->status === 'confirmed')
                    <form method="POST" action="{{ route('admin.orders.status', $order) }}">
                        @csrf <input type="hidden" name="status" value="shipped">
                        <div class="form-field" style="margin-bottom:.5rem;">
                            <label style="font-size:.8rem; color:#64748b; font-weight:600;">Courier <small style="color:#94a3b8;">(optional)</small></label>
                            <input type="text" name="courier" placeholder="e.g. TCS, Leopard, Trax" value="{{ old('courier', $order->courier) }}"
                                   style="width:100%; padding:.6rem .75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:.875rem;">
                        </div>
                        <div class="form-field" style="margin-bottom:.75rem;">
                            <label style="font-size:.8rem; color:#64748b; font-weight:600;">Tracking URL <small style="color:#94a3b8;">(optional)</small></label>
                            <input type="url" name="tracking_url" placeholder="https://tcs.com.pk/tracking/..." value="{{ old('tracking_url', $order->tracking_url) }}"
                                   style="width:100%; padding:.6rem .75rem; border:1px solid #e2e8f0; border-radius:8px; font-size:.875rem;">
                        </div>
                        <button class="adm-btn adm-btn-primary" style="width:100%; justify-content:center; background:#1d4ed8;">
                            <i class="fa-solid fa-truck"></i> Mark as Shipped
                        </button>
                        <p style="font-size:.77rem; color:#64748b; margin:.4rem 0 0; text-align:center;">Shipping email with Tracking ID will be sent</p>
                    </form>

                {{-- SHIPPED → COMPLETE --}}
                @elseif($order->status === 'shipped')
                    <form method="POST" action="{{ route('admin.orders.status', $order) }}">
                        @csrf <input type="hidden" name="status" value="complete">
                        <button class="adm-btn" style="width:100%; justify-content:center; background:#16a34a; color:#fff;">
                            <i class="fa-solid fa-circle-check"></i> Mark as Delivered (Complete)
                        </button>
                        <p style="font-size:.77rem; color:#64748b; margin:.4rem 0 0; text-align:center;">Delivery confirmation email will be sent</p>
                    </form>

                {{-- COMPLETE --}}
                @elseif($order->status === 'complete')
                    <div style="text-align:center; padding:.75rem; background:#f0fdf4; border-radius:8px; color:#166534; font-size:.9rem;">
                        <i class="fa-solid fa-circle-check"></i> Order delivered successfully!
                    </div>
                @endif
            </div>

            {{-- Manual override --}}
            <details style="font-size:.85rem;">
                <summary style="cursor:pointer; color:#64748b; margin-bottom:.75rem;">Manual status override</summary>
                <form method="POST" action="{{ route('admin.orders.status', $order) }}">
                    @csrf
                    <div class="form-field">
                        <select name="status">
                            @foreach($statuses as $s)
                                <option value="{{ $s }}" @selected($order->status === $s)>{{ ucfirst($s) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="adm-btn adm-btn-ghost" style="width:100%; justify-content:center; margin-top:.5rem;">Save</button>
                </form>
            </details>
        </div>

        {{-- Tracking Info Card --}}
        <div class="card" style="background:#eff6ff; border-color:#bfdbfe;">
            <h3 style="margin-bottom:.75rem; color:#1e40af;"><i class="fa-solid fa-qrcode"></i> Tracking Info</h3>
            @if($order->tracking_id)
                <p style="font-size:.82rem; color:#64748b; margin-bottom:.5rem;">Tracking ID:</p>
                <p style="font-family:monospace; font-size:1.05rem; font-weight:700; letter-spacing:.06em; color:#1e40af; background:#dbeafe; padding:.4rem .75rem; border-radius:6px; display:inline-block;">{{ $order->tracking_id }}</p>
                @if($order->courier)
                    <p style="font-size:.875rem; margin-top:.5rem;"><strong>Courier:</strong> {{ $order->courier }}</p>
                @endif
                @if($order->shipped_at)
                    <p style="font-size:.875rem; margin-top:.3rem;"><strong>Shipped:</strong> {{ $order->shipped_at->format('d M Y, h:i A') }}</p>
                @endif
                @if($order->tracking_url)
                    <p style="margin-top:.75rem;">
                        <a href="{{ $order->tracking_url }}" target="_blank" class="adm-btn adm-btn-ghost" style="font-size:.8rem;">
                            <i class="fa-solid fa-arrow-up-right-from-square"></i> Track on Courier Site
                        </a>
                    </p>
                @endif
                <p style="margin-top:.75rem;">
                    <a href="{{ route('track.show', $order->tracking_id) }}" target="_blank" class="adm-btn adm-btn-ghost" style="font-size:.8rem;">
                        <i class="fa-solid fa-eye"></i> Customer Tracking Page
                    </a>
                </p>
            @else
                <p style="font-size:.875rem; color:#64748b; font-style:italic;">
                    <i class="fa-solid fa-circle-info"></i>
                    This order was placed before the tracking system was added. New orders will have a Tracking ID automatically.
                </p>
            @endif
        </div>

        {{-- Meta --}}
        <div class="card">
            <p class="muted" style="font-size:.82rem;"><i class="fa-solid fa-calendar"></i> Placed: {{ $order->created_at->format('M d, Y · H:i') }}</p>
            <p class="muted" style="font-size:.82rem; margin-top:.3rem;"><i class="fa-solid fa-credit-card"></i> Payment: {{ strtoupper($order->payment_method) }}</p>
        </div>
    </div>
</div>
@endsection