@extends('pages.layouts.panel')
@section('head')
    @include('pages.layouts.style')
@endsection

@section('body')
    <div class="container mt-4">
        <!-- Back Button -->
        <div class="mb-4">
            <a href="{{ route('user.order') }}" class="btn-back">
                <i class="fas fa-arrow-left me-2"></i>
                Kembali ke Daftar Pesanan
            </a>
        </div>

        <!-- Order Header Card -->
        <div class="order-card mb-4 fade-in">
            <div class="order-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h3 class="mb-2">
                            <i class="fas fa-receipt me-2"></i>
                            Detail Pesanan #{{ $order->orders_id }}
                        </h3>
                        <p class="mb-0 opacity-75">
                            <i class="fas fa-calendar me-2"></i>
                            {{ $order->created_at->locale('id')->translatedFormat('d F Y H:i') }} WIB
                        </p>
                    </div>
                    <div class="col-md-4 text-md-end">
                        <span class="status-badge bg-success">
                            <i class="fas fa-check-circle me-1"></i>
                            {{ ucfirst($order->status) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Order Info -->
            <div class="p-4">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-row">
                            <strong>No. Pesanan:</strong>
                            <span class="text-primary">{{ $order->invoice }}</span>
                        </div>
                        <div class="info-row">
                            <strong>Tanggal Order:</strong>
                            {{ $order->created_at->locale('id')->translatedFormat('d F Y H:i') }} WIB
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-row">
                            <strong>Nama Customer:</strong>
                            {{ $order->username }}
                        </div>
                        <div class="info-row">
                            <strong>No. Telepon:</strong>
                            {{ $order->phone }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Products Section -->
        <div class="card order-card mb-4 fade-in">
            <div class="card-header bg-light">
                <h5 class="mb-0">
                    <i class="fas fa-shopping-bag me-2"></i>
                    Detail Produk
                </h5>
            </div>
            <div class="card-body">
                <div class="product-section">
                    @foreach ($order->items as $item)
                        <div class="product-row">
                            <div class="row mb-3">
                                <div class="col-md-2 ">
                                    @if ($item->product && $item->product->image)
                                        <img src="/images/product/{{ $item->product->image }}" alt="{{ $item->title }}"
                                            class="product-thumb-detail" loading="lazy">
                                    @else
                                        <div
                                            class="product-thumb-detail d-flex align-items-center justify-content-center bg-light">
                                            <i class="fas fa-image text-muted"></i>
                                        </div>
                                    @endif
                                </div>
                                <div class="col-md-10">
                                    <h5 class="mb-2">{{ $item->title }}</h5>
                                    @if ($item->product)
                                        <p class="text-muted mb-2">{{ $item->product->description }}</p>
                                        <div class="d-flex align-items-center">
                                            <span
                                                class="badge {{ $item->product->status == 1 ? 'bg-success' : 'bg-secondary' }} me-2">
                                                {{ $item->product->status == 1 ? 'Active' : 'Non Active' }}
                                            </span>
                                            <small class="text-muted">
                                                Dibuat: {{ $item->product->created_at->format('d M Y') }}
                                            </small>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="product-pricing">
                                <div class="row mb-2">
                                    <div class="col-md-8">
                                        <span>Harga Satuan:</span>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <span class="price-highlight">Rp
                                            {{ number_format($item->final_price, 0, ',', '.') }}</span>
                                    </div>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-md-8">
                                        <span>Berat:</span>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <span>{{ $item->qty }} KG</span>
                                    </div>
                                </div>

                                <hr class="my-2">

                                <div class="row">
                                    <div class="col-md-8">
                                        <strong>Subtotal Produk:</strong>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <strong class="price-highlight">Rp
                                            {{ number_format($item->item_total, 0, ',', '.') }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if (!$loop->last)
                            <hr class="product-divider">
                        @endif
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Summary Section -->
        <div class="card order-card fade-in">
            <div class="card-header bg-light">
                <h5 class="mb-0">
                    <i class="fas fa-calculator me-2"></i>
                    Rincian Pembayaran
                </h5>
            </div>
            <div class="card-body">
                <div class="total-section">
                    <!-- Breakdown per produk -->
                    @foreach ($order->items as $item)
                        <div class="row mb-2">
                            <div class="col-md-8">
                                <span>{{ $item->title }} ({{ $item->qty }} KG)</span>
                            </div>
                            <div class="col-md-4 text-end">
                                <span>Rp {{ number_format($item->item_total, 0, ',', '.') }}</span>
                            </div>
                        </div>
                    @endforeach

                    <!-- Subtotal -->
                    <hr>
                    <div class="row mb-2">
                        <div class="col-md-8">
                            <strong>Subtotal:</strong>
                        </div>
                        <div class="col-md-4 text-end">
                            <strong>Rp {{ number_format($order->calculated_subtotal, 0, ',', '.') }}</strong>
                        </div>
                    </div>

                    <!-- Total Berat -->
                    <div class="row mb-2">
                        <div class="col-md-8">
                            <strong>Total Berat:</strong>
                        </div>
                        <div class="col-md-4 text-end">
                            <strong>{{ number_format($order->weight ?? $order->calculated_weight, 0, ',', '.') }}
                                KG</strong>
                        </div>
                    </div>

                    <hr>

                    <!-- Grand Total -->
                    <div class="row">
                        <div class="col-md-8">
                            <h4 class="mb-0">
                                <strong>Total Pembayaran:</strong>
                            </h4>
                        </div>
                        <div class="col-md-4 text-end">
                            <h4 class="mb-0">
                                <span class="price-highlight" style="font-size: 1.5rem;">
                                    Rp {{ number_format($order->grand_total ?? $order->calculated_subtotal, 0, ',', '.') }}
                                </span>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add fade-in animation to elements when they come into view
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('fade-in');
                        observer.unobserve(entry.target); // Stop observing once animated
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            });

            // Observe all order cards
            document.querySelectorAll('.order-card').forEach((el) => {
                observer.observe(el);
            });

            // Add loading state on back button click
            document.querySelector('.btn-back')?.addEventListener('click', function() {
                document.querySelectorAll('.order-card').forEach(card => {
                    card.classList.add('loading');
                });
            });

            // Smooth scroll for any anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });
        });
    </script>

    <!-- Additional CSS for the new layout -->
    <style>
        .product-section {
            background: #f8f9fa;
            border-radius: 2px;
            padding: 1rem;
        }

        .product-row {
            background: #ffffff;
            margin-bottom: 1rem;
        }

        .product-row:last-child {
            margin-bottom: 0;
        }

        .product-thumb-detail {
            width: 130px;
            height: 90px;
            object-fit: cover;
            border-radius: 4px;
            border: 2px solid #e9ecef;
        }

        .product-pricing {
            background: #f8f9fa;
            border-radius: 6px;
            padding: 1rem;
            margin-top: 1rem;
        }

        .product-divider {
            margin: 2rem 0;
            border-color: #dee2e6;
        }

        .product-pricing .row {
            margin-bottom: 0.5rem;
        }

        .product-pricing .row:last-child {
            margin-bottom: 0;
        }

        .product-pricing hr {
            margin: 0.75rem 0;
            border-color: #dee2e6;
        }
    </style>
@endsection