@extends('dev.layout')
@php $showNav = true; @endphp
@section('title', 'Stuck Orders')

@section('content')
<div class="page">
    <div class="page-header">
        <h1>⏳ Stuck Orders</h1>
        <p>Orders that have been in <code style="color:#e3b341">pending</code> status for more than {{ $thresholdHours }} hours — Yoco session likely expired or webhook was never received.</p>
    </div>

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

    @if($stuck->isEmpty())
        <div class="card">
            <p style="font-size:.8rem;"><span class="dot dot-green"></span> <strong style="color:#3fb950">No stuck orders.</strong></p>
        </div>
    @else
        <div class="alert alert-warning">{{ $stuck->count() }} order{{ $stuck->count() > 1 ? 's' : '' }} stuck in pending.</div>

        @foreach($stuck as $order)
        <div class="card">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.75rem;">
                <div>
                    <div style="font-size:.85rem;font-weight:600;color:#e6edf3;">
                        Order #{{ $order->id }}
                        <span style="font-size:.72rem;color:#8b949e;font-weight:400;margin-left:.5rem;">
                            {{ $order->created_at->diffForHumans() }}
                            ({{ $order->created_at->format('d M Y H:i') }})
                        </span>
                    </div>
                    <div style="font-size:.78rem;color:#8b949e;margin-top:.3rem;">
                        {{ $order->shipping_first_name }} {{ $order->shipping_last_name }}
                        &nbsp;·&nbsp; {{ $order->shipping_email }}
                        &nbsp;·&nbsp; <strong style="color:#e6edf3;">R {{ number_format($order->total_incl, 2) }}</strong>
                    </div>
                    @if($order->yoco_checkout_id)
                    <div style="font-size:.72rem;color:#8b949e;margin-top:.2rem;">
                        Yoco ID: <code style="color:#79c0ff;">{{ $order->yoco_checkout_id }}</code>
                    </div>
                    @endif
                    <div style="margin-top:.6rem;">
                        @foreach($order->items as $item)
                        <div style="font-size:.73rem;color:#8b949e;">
                            {{ $item->qty }} × {{ $item->product_name }}
                        </div>
                        @endforeach
                    </div>
                </div>

                <div style="display:flex;flex-direction:column;gap:.5rem;min-width:200px;">
                    {{-- Cancel --}}
                    <form method="POST" action="{{ route('dev.stuck-orders.cancel', $order->id) }}"
                        onsubmit="return confirm('Cancel order #{{ $order->id }}?')">
                        @csrf
                        <button type="submit" class="btn btn-outline" style="width:100%;border-color:#da3633;color:#ff7b72;">
                            Cancel Order
                        </button>
                    </form>

                    {{-- Mark Paid --}}
                    <form method="POST" action="{{ route('dev.stuck-orders.paid', $order->id) }}"
                        onsubmit="return confirm('Mark order #{{ $order->id }} as PAID?')"
                        style="display:flex;gap:.4rem;">
                        @csrf
                        <input type="number"
                            name="amount_paid"
                            step="0.01"
                            min="0"
                            value="{{ number_format($order->total_incl, 2, '.', '') }}"
                            style="width:100px;font-size:.78rem;"
                            placeholder="Amount">
                        <button type="submit" class="btn btn-primary" style="flex:1;">
                            Mark Paid
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    @endif
</div>
@endsection