@extends('layouts.app')
@section('title', 'Detail Pesanan')
@section('content')
<div x-data class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('buyer.orders') }}" class="text-gray-400 hover:text-gray-600">
            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ $order->order_number }}</h1>
            <p class="text-sm text-gray-400">{{ $order->created_at->format('d M Y, H:i') }}</p>
        </div>
        <span class="ml-auto px-3 py-1 text-xs font-medium rounded-full
            @switch($order->status)
                @case('pending') bg-gray-100 text-gray-600 @break
                @case('awaiting_payment') bg-amber-100 text-amber-700 @break
                @case('paid') bg-blue-100 text-blue-700 @break
                @case('processing') bg-teal-100 text-teal-700 @break
                @case('shipped') bg-cyan-100 text-cyan-700 @break
                @case('delivered') bg-teal-100 text-teal-700 @break
                @case('completed') bg-green-100 text-green-700 @break
                @case('cancelled') bg-red-100 text-red-600 @break
                @default bg-gray-100 text-gray-600
            @endswitch
        ">
            @switch($order->status)
                @case('pending') Menunggu @break
                @case('awaiting_payment') Menunggu Pembayaran @break
                @case('paid') Sudah Dibayar @break
                @case('processing') Sedang Diproses @break
                @case('shipped') Sedang Dikirim @break
                @case('delivered') Terkirim @break
                @case('completed') Selesai @break
                @case('cancelled') Dibatalkan @break
                @default {{ $order->status }}
            @endswitch
        </span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-4">
            {{-- Order Items --}}
            <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-50">
                    <h2 class="font-semibold text-gray-800">Produk Dipesan</h2>
                </div>
                <div class="divide-y divide-gray-50">
                    @foreach($order->items as $item)
                    <div class="flex gap-4 px-6 py-4">
                        <div class="w-16 h-16 rounded-xl bg-gray-100 overflow-hidden shrink-0">
                            @if($item->product_thumbnail)
                                <img src="{{ Storage::url($item->product_thumbnail) }}" class="w-full h-full object-cover">
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-gray-800">{{ $item->product_name }}</p>
                            @if($item->variant_name)
                                <p class="text-xs text-gray-400 mt-0.5">{{ $item->variant_name }}</p>
                            @endif
                            <p class="text-sm text-gray-500 mt-1">{{ $item->quantity }}x · Rp {{ number_format($item->price, 0, ',', '.') }}</p>
                            @if($item->product_type === 'digital')
                                <span class="inline-block mt-1 px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">Digital</span>
                            @endif

                            @if($order->status === 'completed')
                                @if($item->review)
                                    <div class="mt-2 flex items-center gap-1 text-xs font-medium text-amber-600 bg-amber-50 px-2 py-1 rounded-lg w-max">
                                        <svg class="w-3 h-3 fill-current text-amber-500" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                        Ulasanmu: {{ $item->review->rating }}/5
                                    </div>
                                    @if($item->review->comment)
                                        <p class="text-xs text-gray-500 mt-1 italic">"{{ $item->review->comment }}"</p>
                                    @endif
                                @else
                                    <button
                                        @click="$dispatch('open-review-modal', { itemId: {{ $item->id }}, productName: '{{ addslashes($item->product_name) }}' })"
                                        class="mt-2 px-3 py-1 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold rounded-lg transition"
                                    >
                                        Beri Ulasan
                                    </button>
                                @endif
                            @endif
                        </div>
                        <p class="font-semibold text-gray-800 shrink-0">Rp {{ number_format($item->total, 0, ',', '.') }}</p>
                    </div>
                    @endforeach
                </div>
                <div class="px-6 py-4 bg-gray-50/50 border-t border-gray-100 space-y-2">
                    <div class="flex justify-between text-sm text-gray-600">
                        <span>Subtotal</span>
                        <span>Rp {{ number_format($order->subtotal, 0, ',', '.') }}</span>
                    </div>
                    @if($order->shipping_cost > 0)
                    <div class="flex justify-between text-sm text-gray-600">
                        <span>Ongkos Kirim</span>
                        <span>Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
                    </div>
                    @endif
                    @if($order->discount > 0)
                    <div class="flex justify-between text-sm text-green-600">
                        <span>Diskon</span>
                        <span>-Rp {{ number_format($order->discount, 0, ',', '.') }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between font-semibold text-gray-800 pt-2 border-t border-gray-100">
                        <span>Total</span>
                        <span>Rp {{ number_format($order->total, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>

            {{-- Payment Info --}}
            @if($order->payment)
            <div class="bg-white rounded-2xl border border-gray-100 p-6">
                <h2 class="font-semibold text-gray-800 mb-4">Informasi Pembayaran</h2>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Metode</span>
                        <span class="font-medium text-gray-700">
                            @switch($order->payment->method)
                                @case('manual_transfer') Transfer Manual @break
                                @case('midtrans') Midtrans @break
                                @case('xendit') Xendit @break
                                @default {{ $order->payment->method }}
                            @endswitch
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Status</span>
                        <span class="font-medium {{ $order->payment->status === 'paid' ? 'text-green-600' : 'text-gray-700' }}">
                            @switch($order->payment->status)
                                @case('pending') Menunggu @break
                                @case('paid') Lunas @break
                                @case('failed') Gagal @break
                                @case('expired') Kedaluwarsa @break
                                @case('refunded') Dikembalikan @break
                            @endswitch
                        </span>
                    </div>
                    @if($order->payment->bank_name)
                    <div class="flex justify-between">
                        <span class="text-gray-500">Bank</span>
                        <span class="font-medium text-gray-700">{{ $order->payment->bank_name }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">No. Rekening</span>
                        <span class="font-medium text-gray-700">{{ $order->payment->account_number }} ({{ $order->payment->account_name }})</span>
                    </div>
                    @endif
                    @if($order->payment->paid_at)
                    <div class="flex justify-between">
                        <span class="text-gray-500">Dibayar</span>
                        <span class="font-medium text-gray-700">{{ $order->payment->paid_at->format('d M Y, H:i') }}</span>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            {{-- Shipment Info --}}
            @if($order->shipment)
            <div class="bg-white rounded-2xl border border-gray-100 p-6">
                <h2 class="font-semibold text-gray-800 mb-4">Informasi Pengiriman</h2>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Kurir</span>
                        <span class="font-medium text-gray-700">{{ strtoupper($order->shipment->courier) }} - {{ $order->shipment->service }}</span>
                    </div>
                    @if($order->shipment->tracking_number)
                    <div class="flex justify-between">
                        <span class="text-gray-500">No. Resi</span>
                        <div class="flex items-center gap-2">
                            <span class="font-medium text-gray-700">{{ $order->shipment->tracking_number }}</span>
                            @if($order->shipment->tracking_url)
                                <a href="{{ $order->shipment->tracking_url }}" target="_blank" class="text-teal-600 text-xs hover:underline">Lacak</a>
                            @endif
                        </div>
                    </div>
                    @endif
                    <div class="flex justify-between">
                        <span class="text-gray-500">Status</span>
                        <span class="font-medium text-gray-700">{{ Str::title(str_replace('_', ' ', $order->shipment->status)) }}</span>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <div class="space-y-4">
            {{-- Shipping Address --}}
            @if($order->address)
            <div class="bg-white rounded-2xl border border-gray-100 p-6">
                <h2 class="font-semibold text-gray-800 mb-3">Alamat Pengiriman</h2>
                <div class="text-sm text-gray-600 space-y-1">
                    <p class="font-medium text-gray-800">{{ $order->address->recipient_name }}</p>
                    <p>{{ $order->address->phone }}</p>
                    <p>{{ $order->address->address }}</p>
                    <p>{{ $order->address->district }}, {{ $order->address->city }}</p>
                    <p>{{ $order->address->province }} {{ $order->address->postal_code }}</p>
                </div>
            </div>
            @endif

            {{-- Notes --}}
            @if($order->notes)
            <div class="bg-white rounded-2xl border border-gray-100 p-6">
                <h2 class="font-semibold text-gray-800 mb-2">Catatan</h2>
                <p class="text-sm text-gray-600">{{ $order->notes }}</p>
            </div>
            @endif

            {{-- Pay Action --}}
            @if($order->payment && $order->payment->status === 'pending')
            <div class="bg-white rounded-2xl border border-gray-100 p-6">
                <a href="{{ route('payment.show', $order->payment) }}"
                   class="block w-full py-3 bg-teal-600 text-white text-sm font-semibold rounded-xl hover:bg-teal-700 transition text-center">
                    Bayar Sekarang
                </a>
                @if($order->payment->expires_at)
                <p class="text-xs text-center text-gray-400 mt-2">Batas waktu: {{ $order->payment->expires_at->format('d M Y, H:i') }}</p>
                @endif
            </div>
            @endif

            {{-- Confirm Received Action --}}
            @if($order->status === 'shipped')
            <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm mb-4">
                <h3 class="font-semibold text-gray-800 mb-2">Konfirmasi Penerimaan</h3>
                <p class="text-xs text-gray-500 mb-4">Apakah barang belanjaanmu sudah sampai dengan aman? Klik tombol di bawah untuk menyelesaikan transaksi.</p>
                <form id="complete-order-form" method="POST" action="{{ route('buyer.orders.complete', $order) }}">
                    @csrf
                    <button type="button" onclick="confirmElegant('Apakah kamu yakin ingin menandai pesanan ini sebagai selesai?', () => document.getElementById('complete-order-form').submit())" class="w-full py-3 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold rounded-xl transition shadow-sm text-center">
                        Pesanan Diterima
                    </button>
                </form>
            </div>
            @endif

            {{-- Actions --}}
            @if($order->canBeCancelled())
            <div class="bg-white rounded-2xl border border-gray-100 p-6">
                <form id="cancel-order-form" method="POST" action="{{ route('buyer.orders.cancel', $order) }}">
                    @csrf @method('PATCH')
                    <button type="button" onclick="confirmElegant('Apakah kamu yakin ingin membatalkan pesanan ini?', () => document.getElementById('cancel-order-form').submit())" class="w-full px-4 py-2.5 text-sm font-medium text-red-600 border border-red-200 rounded-xl hover:bg-red-50 transition">
                        Batalkan Pesanan
                    </button>
                </form>
            </div>
            @endif
    </div>
</div>

<div
    x-data="{ isOpen: false, itemId: null, productName: '', rating: 5, comment: '' }"
    x-on:open-review-modal.window="isOpen = true; itemId = $event.detail.itemId; productName = $event.detail.productName; rating = 5; comment = ''"
    x-show="isOpen"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
>
    <!-- Backdrop -->
    <div class="fixed inset-0 bg-black/40 transition-opacity" @click="isOpen = false"></div>

    <!-- Modal Content -->
    <div class="relative bg-white rounded-2xl max-w-md w-full p-6 shadow-xl space-y-4 z-10">
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-bold text-gray-900">Beri Ulasan</h3>
            <button @click="isOpen = false" class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <div>
            <p class="text-xs text-gray-400">Bagikan pengalamanmu membeli:</p>
            <p class="text-sm font-semibold text-gray-800" x-text="productName"></p>
        </div>

        <form action="{{ route('reviews.store') }}" method="POST" class="space-y-4">
            @csrf
            <input type="hidden" name="order_item_id" :value="itemId">
            
            <!-- Stars Selector -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Rating Produk</label>
                <div class="flex gap-2">
                    <template x-for="star in [1,2,3,4,5]">
                        <button
                            type="button"
                            @click="rating = star"
                            class="text-3xl transition"
                            :class="star <= rating ? 'text-amber-400' : 'text-gray-200'"
                        >
                            ★
                        </button>
                    </template>
                </div>
                <input type="hidden" name="rating" :value="rating">
            </div>

            <!-- Comment Input -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Komentar / Ulasan</label>
                <textarea
                    name="comment"
                    x-model="comment"
                    rows="4"
                    placeholder="Tulis ulasanmu tentang produk ini..."
                    class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-500 text-sm"
                ></textarea>
            </div>

            <div class="flex gap-3 pt-2">
                <button type="button" @click="isOpen = false" class="flex-1 py-2.5 text-sm font-medium border border-gray-200 text-gray-500 rounded-xl hover:bg-gray-50 transition">
                    Batal
                </button>
                <button type="submit" class="flex-1 py-2.5 text-sm font-semibold bg-teal-600 text-white rounded-xl hover:bg-teal-700 transition shadow-sm">
                    Kirim Ulasan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection