@extends('storefront.account.layout')

@section('title', 'Sipariş Detayı #' . $order->order_number . ' | ' . setting('general.site_name', 'Mağaza'))

@section('account_breadcrumb')
<span class="sf-breadcrumb-separator">/</span>
<li class="sf-breadcrumb-item"><a href="{{ route('storefront.account.orders') }}">Siparişlerim</a></li>
<span class="sf-breadcrumb-separator">/</span>
<li class="sf-breadcrumb-current">Sipariş #{{ $order->order_number }}</li>
@endsection

@section('account_content')
<div class="account-card">
    <div class="account-card-header">
        <h2 class="account-card-title">Sipariş Detayı: #{{ $order->order_number }}</h2>
        <div style="font-size: var(--font-size-xs); color: var(--color-text-secondary);">
            {{ $order->created_at->format('d.m.Y H:i') }}
        </div>
    </div>
    <div class="account-card-body">
        <div class="order-detail-grid">
            {{-- Sol Sütun: Sipariş Durumu ve Ürünler --}}
            <div>
                <div class="grid grid-cols-2 gap-4 mb-6" style="margin-bottom: var(--space-6);">
                    <div style="background-color: var(--color-gray-50); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border);">
                        <div style="font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: 2px;">Sipariş Durumu</div>
                        <span class="badge-status status-{{ $order->order_status }}" style="font-size: var(--font-size-sm);">
                            {{ $order->order_status_label }}
                        </span>
                    </div>
                    <div style="background-color: var(--color-gray-50); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border);">
                        <div style="font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: 2px;">Ödeme Durumu</div>
                        <span class="badge-status status-{{ $order->payment_status }}" style="font-size: var(--font-size-sm);">
                            {{ $order->payment_status_label }} ({{ $order->payment_method_label }})
                        </span>
                    </div>
                </div>

                @if(in_array($order->order_status, ['shipped', 'delivered']) && ($order->shipping_carrier || $order->shipping_tracking_number))
                    <div style="background-color: #f0fdf4; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid #bbf7d0; margin-bottom: var(--space-6);">
                        <h4 class="fw-semibold text-sm" style="color: #166534; margin-bottom: var(--space-2); display: flex; align-items: center; gap: 8px;">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 18px; height: 18px; color: #166534;">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.122c.692 0 1.2-.549 1.172-1.241l-.086-2.143a3.75 3.75 0 0 0-2.862-3.486L16.25 7.5H12m-9 9V14.25m12 0v5.25" />
                            </svg>
                            Kargo Takip Bilgileri
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs" style="color: #1b4332;">
                            <div><strong>Kargo Firması:</strong> {{ $order->shipping_carrier ?? '—' }}</div>
                            <div><strong>Takip Numarası:</strong> {{ $order->shipping_tracking_number ?? '—' }}</div>
                            @if($order->shipped_at)
                                <div><strong>Kargoya Verilme Tarihi:</strong> {{ $order->shipped_at->format('d.m.Y H:i') }}</div>
                            @endif
                        </div>
                        @if($order->shipping_tracking_url)
                            <div style="margin-top: var(--space-3);">
                                <a href="{{ $order->shipping_tracking_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm" style="display: inline-flex; align-items: center; gap: 6px; text-decoration: none;">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 14px; height: 14px;">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                                    </svg>
                                    Kargomu Takip Et
                                </a>
                            </div>
                        @endif
                    </div>
                @endif

                <h3 class="fw-semibold text-sm mb-3" style="margin-bottom: var(--space-3);">Sipariş Edilen Ürünler</h3>
                <div class="table-wrapper" style="margin-bottom: var(--space-6);">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Görsel</th>
                                <th>Ürün</th>
                                <th>Fiyat</th>
                                <th>Adet</th>
                                <th>Toplam</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->items as $item)
                                <tr>
                                    <td style="width: 70px;">
                                        @if($item->product && $item->product->images->where('is_main', true)->first())
                                            <img src="{{ Storage::url($item->product->images->where('is_main', true)->first()->path) }}" alt="{{ $item->product_name }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border);">
                                        @else
                                            <div style="width: 50px; height: 50px; background-color: var(--color-gray-100); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 10px;">Görsel Yok</div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="fw-semibold" style="font-size: var(--font-size-sm);">{{ $item->product_name }}</div>
                                        @if($item->variant_label)
                                            <div class="text-xs text-muted" style="margin-top: 2px;">{{ $item->variant_label }}</div>
                                        @endif
                                        <div class="text-xs text-muted" style="margin-top: 2px;">SKU: {{ $item->product_sku }}</div>
                                    </td>
                                    <td>{{ number_format($item->price, 2) }} TL</td>
                                    <td>{{ $item->quantity }}</td>
                                    <td class="fw-semibold">{{ number_format($item->subtotal, 2) }} TL</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mb-4 p-3 bg-light rounded d-flex gap-2 align-items-center flex-wrap">
                    <span class="text-xs text-muted fw-semibold uppercase me-auto">Sipariş İşlemleri:</span>
                    <a href="{{ route('storefront.account.orders.pdf', $order->order_number) }}" class="btn btn-primary btn-sm" id="download-order-pdf-btn">
                        Sipariş PDF İndir
                    </a>
                    <a href="{{ route('storefront.account.tickets.create', ['order_id' => $order->id]) }}" class="btn btn-outline-secondary btn-sm">
                        Destek Talebi Oluştur
                    </a>
                    @if($order->order_status === 'delivered')
                        <a href="{{ route('storefront.account.tickets.create', ['order_id' => $order->id]) }}" class="btn btn-warning btn-sm text-dark">
                            İade / Değişim Talebi Oluştur
                        </a>
                    @endif
                </div>

                @if($order->customer_note)
                    <div style="margin-top: var(--space-4); background-color: #fffbeb; border: 1px solid #fef3c7; padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: #b45309;">
                        <strong>Müşteri Notu:</strong> {{ $order->customer_note }}
                    </div>
                @endif
            </div>

            {{-- Sağ Sütun: Tutar Özetleri ve Adresler --}}
            <div>
                {{-- Finansal Özet --}}
                <div class="account-card" style="margin-bottom: var(--space-6); background-color: var(--color-gray-50);">
                    <div class="account-card-header" style="background-color: transparent;">
                        <h3 class="account-card-title text-sm">Sipariş Özeti</h3>
                    </div>
                    <div class="account-card-body" style="font-size: var(--font-size-sm); display: flex; flex-direction: column; gap: var(--space-2);">
                        <div class="d-flex justify-between" style="justify-content: space-between;">
                            <span>Ara Toplam</span>
                            <span>{{ number_format($order->subtotal, 2) }} TL</span>
                        </div>
                        
                        @if($order->shipping_total > 0)
                            <div class="d-flex justify-between" style="justify-content: space-between;">
                                <span>Kargo ({{ $order->shipping_title }})</span>
                                <span>{{ number_format($order->shipping_total, 2) }} TL</span>
                            </div>
                        @else
                            <div class="d-flex justify-between text-success" style="justify-content: space-between;">
                                <span>Kargo ({{ $order->shipping_title }})</span>
                                <span>Ücretsiz</span>
                            </div>
                        @endif

                        @if($order->payment_fee > 0)
                            <div class="d-flex justify-between" style="justify-content: space-between;">
                                <span>Ödeme Hizmet Bedeli</span>
                                <span>{{ number_format($order->payment_fee, 2) }} TL</span>
                            </div>
                        @endif

                        @if($order->discount_total > 0)
                            <div class="d-flex justify-between text-success" style="justify-content: space-between;">
                                <span>İndirim (Kupon: {{ $order->coupon_code }})</span>
                                <span>-{{ number_format($order->discount_total, 2) }} TL</span>
                            </div>
                        @endif

                        <hr class="sf-dropdown-divider">

                        <div class="d-flex justify-between fw-bold" style="justify-content: space-between; font-size: var(--font-size-base); color: var(--color-text-primary);">
                            <span>Genel Toplam</span>
                            <span>{{ number_format($order->grand_total, 2) }} TL</span>
                        </div>
                    </div>
                </div>

                {{-- Adresler --}}
                <div class="account-card" style="margin-bottom: var(--space-6);">
                    <div class="account-card-header" style="background-color: transparent;">
                        <h3 class="account-card-title text-sm">Teslimat Bilgileri</h3>
                    </div>
                    <div class="account-card-body" style="font-size: var(--font-size-sm); display: flex; flex-direction: column; gap: var(--space-4);">
                        <div>
                            <div class="fw-semibold text-xs text-muted uppercase mb-1">Alıcı</div>
                            <div>{{ $order->customer_name }}</div>
                            <div class="text-xs text-muted" style="margin-top: 2px;">Tel: {{ $order->customer_phone }}</div>
                            <div class="text-xs text-muted">E-posta: {{ $order->customer_email }}</div>
                        </div>
                        <div>
                            <div class="fw-semibold text-xs text-muted uppercase mb-1">Teslimat Adresi</div>
                            <div>{{ $order->shipping_address }}</div>
                            <div>{{ $order->district }} / {{ $order->city }}</div>
                            @if($order->postal_code)
                                <div>Posta Kodu: {{ $order->postal_code }}</div>
                            @endif
                        </div>
                        <div>
                            <div class="fw-semibold text-xs text-muted uppercase mb-1">Fatura Adresi</div>
                            <div>{{ $order->billing_address }}</div>
                            <div>{{ $order->district }} / {{ $order->city }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection