@extends('site.layouts.site-layout')
@section('title', 'جزئیات سفارش ' . $order->order_number)

@section('content')

<div class="bread-crumb pt-3">
    <div class="container-fluid">
        <div class="content-box">
            <div class="container-fluid">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="font-14 text-muted">خانه</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('panel.index') }}" class="font-14 text-muted">پنل کاربری</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('panel.orders.index') }}" class="font-14 text-muted">سفارش‌های من</a></li>
                        <li class="breadcrumb-item active main-color-one-color font-14" aria-current="page">{{ $order->order_number }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="container-fluid">

        <div class="custom-filter d-lg-none d-block">
            <button class="btn btn-filter-float border-0 main-color-two-bg shadow-box px-4 rounded-3 position-fixed"
                style="z-index:999;bottom:80px;" type="button"
                data-bs-toggle="offcanvas" data-bs-target="#panelSideCanvas" aria-controls="panelSideCanvas">
                <i class="bi bi-list font-20 fw-bold text-white"></i>
                <span class="d-block font-14 text-white">منو</span>
            </button>
            <div class="offcanvas offcanvas-start" tabindex="-1" id="panelSideCanvas">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title">منو پنل</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <div class="panel-side">
                        <div class="content-box pb-0">
                            <div class="container-fluid">
                                @include('panel._sidebar')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboard-panel">
            <div class="row gy-3">

                <div class="col-lg-3 d-lg-block d-none">
                    <div class="panel-side">
                        <div class="content-box pb-0">
                            <div class="container-fluid">
                                @include('panel._sidebar')
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-9">

                    @if(session('success'))
                    <div class="alert alert-success rounded-3 font-14 mb-3">{{ session('success') }}</div>
                    @endif

                    {{-- Header --}}
                    <div class="content-box mb-3">
                        <div class="container-fluid">
                            <div class="d-flex align-items-start justify-content-between flex-wrap gap-2">
                                <div class="text-start">
                                    <p class="text-muted font-13 mb-1">شماره سفارش</p>
                                    <h6 class="fw-bold font-14 mb-1" style="direction:ltr;text-align:right;">{{ $order->order_number }}</h6>
                                    <p class="text-muted font-13 mb-0">تاریخ سفارش: {{ $order->shamsi_date }}</p>
                                </div>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <span class="badge rounded-pill bg-{{ $order->statusColor() }} font-13 px-3 py-2">
                                        {{ $order->statusLabel() }}
                                    </span>
                                    @if($order->canShowCancelButton())
                                    <a href="{{ route('panel.orders.return', $order) }}"
                                       class="btn btn-sm btn-secondary rounded-3 font-12">
                                        لغو سفارش
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Products --}}
                    <div class="content-box mb-3">
                        <div class="container-fluid">
                            <div class="title-panel mb-3">
                                <h6 class="font-15">محصولات</h6>
                            </div>
                            <div class="responsive-table p-0">
                                <table class="table main-table rounded-0">
                                    <thead class="text-bg-dark bg-opacity-75">
                                        <tr>
                                            <th>محصول</th>
                                            <th>قیمت</th>
                                            <th>تعداد</th>
                                            <th>جمع</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($order->items as $item)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center gap-2">
                                                    @if($item->product && $item->product->featured_image)
                                                    <a href="{{ route('product.show', $item->product->slug) }}" target="_blank">
                                                        <img src="{{ asset('uploads/products/' . $item->product->featured_image) }}"
                                                             alt="{{ $item->product_title }}"
                                                             class="order-item-thumb">
                                                    </a>
                                                    @endif
                                                    <div>
                                                        @if($item->product)
                                                        <a href="{{ route('product.show', $item->product->slug) }}" class="mb-0 font-13 fw-medium text-dark text-decoration-none" target="_blank">{{ $item->product_title }}</a>
                                                        @else
                                                        <p class="mb-0 font-13 fw-medium">{{ $item->product_title }}</p>
                                                        @endif
                                                        @if($item->variant_title)
                                                        <p class="mb-0 font-12 text-muted">{{ $item->variant_title }}</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                @if($item->final_price < $item->original_price)
                                                <p class="mb-0 font-11 text-muted text-decoration-line-through">{{ number_format($item->original_price) }}</p>
                                                <p class="mb-0 font-13 fw-bold text-danger">{{ number_format($item->final_price) }} تومان</p>
                                                @else
                                                <p class="mb-0 font-13">{{ number_format($item->final_price) }} تومان</p>
                                                @endif
                                            </td>
                                            <td class="font-13">{{ $item->qty }}</td>
                                            <td class="font-13 fw-bold">{{ number_format($item->subtotal) }} تومان</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- Financial summary + address --}}
                    <div class="row gy-3 mb-3">
                        <div class="col-md-6">
                            <div class="content-box h-100">
                                <div class="container-fluid">
                                    <div class="title-panel mb-3">
                                        <h6 class="font-15">خلاصه مالی</h6>
                                    </div>
                                    <div class="order-summary-list">
                                        <div class="order-summary-row">
                                            <span class="text-muted font-13">قیمت اصلی:</span>
                                            <span class="font-13">{{ number_format($order->subtotal) }} تومان</span>
                                        </div>
                                        @if($order->product_discount > 0)
                                        <div class="order-summary-row">
                                            <span class="text-muted font-13">تخفیف محصولات:</span>
                                            <span class="font-13 text-danger">−{{ number_format($order->product_discount) }} تومان</span>
                                        </div>
                                        @endif
                                        @if($order->coupon_discount > 0)
                                        <div class="order-summary-row">
                                            <span class="text-muted font-13">کد تخفیف:</span>
                                            <span class="font-13 text-danger">−{{ number_format($order->coupon_discount) }} تومان</span>
                                        </div>
                                        @endif
                                        <div class="order-summary-row">
                                            <span class="text-muted font-13">هزینه ارسال:</span>
                                            <span class="font-13 {{ $order->shipping_cost === 0 ? 'text-success' : '' }}">
                                                {{ $order->shipping_cost > 0 ? number_format($order->shipping_cost).' تومان' : 'رایگان' }}
                                            </span>
                                        </div>
                                        @if($order->wallet_used > 0)
                                        <div class="order-summary-row">
                                            <span class="text-muted font-13">اعتبار کیف پول:</span>
                                            <span class="font-13 main-color-one-color">−{{ number_format($order->wallet_used) }} تومان</span>
                                        </div>
                                        @endif
                                        <div class="order-summary-row fw-bold">
                                            <span class="font-14">مبلغ پرداختی:</span>
                                            <span class="font-14 main-color-one-color">{{ number_format($order->payable_amount) }} تومان</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="content-box h-100">
                                <div class="container-fluid">
                                    <div class="title-panel mb-3">
                                        <h6 class="font-15">آدرس تحویل</h6>
                                    </div>
                                    @if($order->address_snapshot)
                                    @php $addr = $order->address_snapshot; @endphp
                                    <p class="fw-bold font-13 mb-1">{{ $addr['name'] ?? '' }}</p>
                                    <p class="text-muted font-13 mb-1">{{ ($addr['province'] ?? '') }} — {{ ($addr['city'] ?? '') }}</p>
                                    <p class="text-muted font-13 mb-1">{{ $addr['address'] ?? '' }}</p>
                                    <p class="text-muted font-12 mb-0">کد پستی: {{ $addr['postal_code'] ?? '' }}</p>
                                    @else
                                    <p class="text-muted font-13">اطلاعات آدرس موجود نیست.</p>
                                    @endif
                                    <hr>
                                    <p class="font-13 mb-0">
                                        <span class="text-muted">روش ارسال:</span>
                                        <span class="fw-medium">{{ $order->shipping_method_name ?? '—' }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Tracking code --}}
                    @if($order->tracking_code)
                    <div class="content-box mb-3">
                        <div class="container-fluid">
                            <div class="title-panel mb-3">
                                <h6 class="font-15">
                                    <i class="bi bi-truck me-1 main-color-one-color"></i>
                                    {{ $order->trackingCodeLabel() }}
                                </h6>
                            </div>
                            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <span class="text-muted font-13">{{ $order->trackingCodeLabel() }}:</span>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="fw-bold font-14" id="trackingCodeText" dir="ltr">{{ $order->tracking_code }}</span>
                                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1"
                                            id="copyTrackingBtn" title="کپی کد رهگیری">
                                        <i class="bi bi-clipboard font-14"></i>
                                    </button>
                                </div>
                            </div>
                            <p class="text-muted font-12 mt-2 mb-0">
                                برای پیگیری مرسوله خود می‌توانید از سایت
                                <a href="https://tracking.post.ir" target="_blank" rel="noopener" class="main-color-one-color">tracking.post.ir</a>
                                استفاده کنید.
                            </p>
                        </div>
                    </div>
                    @endif

                    {{-- Transaction info --}}
                    @php $tx = $order->transactions->first(); @endphp
                    @if($tx)
                    <div class="content-box mb-3">
                        <div class="container-fluid">
                            <div class="title-panel mb-3">
                                <h6 class="font-15">اطلاعات پرداخت</h6>
                            </div>
                            <div class="order-summary-list">
                                <div class="order-summary-row">
                                    <span class="text-muted font-13">درگاه:</span>
                                    <span class="font-13">{{ $order->payment_method_name ?? '—' }}</span>
                                </div>
                                @if($tx->track_id)
                                <div class="order-summary-row">
                                    <span class="text-muted font-13">کد رهگیری:</span>
                                    <span class="font-13 fw-bold" dir="ltr">{{ $tx->track_id }}</span>
                                </div>
                                @endif
                                @if($tx->ref_number)
                                <div class="order-summary-row">
                                    <span class="text-muted font-13">شماره مرجع:</span>
                                    <span class="font-13 fw-bold" dir="ltr">{{ $tx->ref_number }}</span>
                                </div>
                                @endif
                                @if($tx->card_number)
                                <div class="order-summary-row">
                                    <span class="text-muted font-13">شماره کارت:</span>
                                    <span class="font-13" dir="ltr">{{ $tx->card_number }}</span>
                                </div>
                                @endif
                                <div class="order-summary-row">
                                    <span class="text-muted font-13">وضعیت:</span>
                                    <span class="font-13">
                                        <span class="badge rounded-pill bg-{{ $tx->status === 'success' ? 'success' : ($tx->status === 'failed' ? 'danger' : 'warning') }}">
                                            {{ ['pending'=>'در انتظار','success'=>'موفق','failed'=>'ناموفق'][$tx->status] ?? $tx->status }}
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Cancel request info --}}
                    @if($cancelRequest)
                    <div class="content-box">
                        <div class="container-fluid">
                            <div class="title-panel mb-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <h6 class="font-15 mb-0">درخواست لغو سفارش</h6>
                                <span class="badge rounded-pill bg-{{ $cancelRequest->statusColor() }} font-12 px-3 py-2">
                                    {{ $cancelRequest->statusLabel() }}
                                </span>
                            </div>
                            <div class="order-summary-list">
                                <div class="order-summary-row">
                                    <span class="text-muted font-13">دلیل لغو:</span>
                                    <span class="font-13">{{ $cancelRequest->reasonLabel() }}</span>
                                </div>
                                <div class="order-summary-row align-items-start">
                                    <span class="text-muted font-13 flex-shrink-0 me-3">توضیحات شما:</span>
                                    <span class="font-13 text-end" style="white-space:pre-wrap">{{ $cancelRequest->description }}</span>
                                </div>
                                <div class="order-summary-row">
                                    <span class="text-muted font-13">تاریخ درخواست:</span>
                                    <span class="font-13">{{ $cancelRequest->shamsiDate() }}</span>
                                </div>
                            </div>

                            @if(in_array($cancelRequest->status, ['approved', 'rejected'], true))
                            <hr>
                            <div class="order-summary-list">
                                <div class="order-summary-row">
                                    <span class="text-muted font-13">تصمیم نهایی:</span>
                                    <span class="font-13 fw-bold">
                                        @if($cancelRequest->status === 'approved')
                                            تأیید لغو سفارش
                                        @else
                                            رد درخواست لغو
                                        @endif
                                    </span>
                                </div>
                                @if($cancelRequest->admin_response)
                                <div class="order-summary-row align-items-start">
                                    <span class="text-muted font-13 flex-shrink-0 me-3">پاسخ ادمین:</span>
                                    <span class="font-13 text-end" style="white-space:pre-wrap">{{ $cancelRequest->admin_response }}</span>
                                </div>
                                @endif
                            </div>
                            @endif
                        </div>
                    </div>
                    @endif

                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@section('styles')
<style>
.order-item-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.order-summary-list { display: flex; flex-direction: column; gap: 0; }
.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}
.order-summary-row:last-child { border-bottom: none; }
</style>
@endsection

@section('scripts')
<script>
$(function () {
    var copyBtn = document.getElementById('copyTrackingBtn');
    if (copyBtn) {
        copyBtn.addEventListener('click', function () {
            var text = document.getElementById('trackingCodeText').textContent.trim();
            navigator.clipboard.writeText(text).then(function () {
                copyBtn.innerHTML = '<i class="bi bi-check-lg font-14 text-success"></i>';
                setTimeout(function () {
                    copyBtn.innerHTML = '<i class="bi bi-clipboard font-14"></i>';
                }, 2000);
            });
        });
    }
});
</script>
@endsection
