@extends('admin.layouts.app')

@section('head', 'Detail Order #' . $order->order_number)

@section('body')
    <div class="main-content">
        <!-- Header Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-1">Detail Order #{{ $order->order_number }}</h2>
                        <p class="text-muted mb-0">{{ $order->created_at->format('d F Y, H:i') }}</p>
                    </div>
                    <div>
                        <a href="{{ route('transaction.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Status and Summary Row -->
        <div class="row mb-4">
            <div class="col-md-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-3">
                                <div class="text-center">
                                    <span class="badge {{ $order->status_badge_class }} fs-6 px-3 py-2">
                                        <i class="red-800 me-1"></i>
                                        {{ $order->status_text }}
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center border-start">
                                    <small class="text-muted d-block">Total Amount</small>
                                    <h4 class="mb-0 text-primary">{{ $order->formatted_total }}</h4>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center border-start">
                                    <small class="text-muted d-block">Payment Method</small>
                                    <span class="fw-medium">{{ $order->payment_method ?? 'Tidak diketahui' }}</span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center border-start">
                                    <small class="text-muted d-block">Items</small>
                                    <span class="fw-medium">{{ $order->orderItems->count() }} Items</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h6 class="card-title mb-3">
                            <i class="fas fa-user me-2"></i>Customer Info
                        </h6>
                        <div class="d-flex align-items-center">
                            <div class="avatar-circle me-3">
                                {{ strtoupper(substr($order->user->name, 0, 1)) }}
                            </div>
                            <div>
                                <div class="fw-medium">{{ $order->user->name }}</div>
                                <small class="text-muted">{{ $order->user->email }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Left Column -->
            <div class="col-lg-8">
                <!-- Order Items -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">
                            <i class="fas fa-shopping-cart me-2"></i>Order Items
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th class="border-0">Produk</th>
                                        <th class="border-0">Harga</th>
                                        <th class="border-0">Qty</th>
                                        <th class="border-0 text-end">Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($order->orderItems as $item)
                                        <tr>
                                            <td class="py-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="product-image me-3">
                                                        <img src="{{ $item->product_image ? asset('storage/' . $item->product_image) : asset('images/default.png') }}"
                                                            alt="{{ $item->product_name }}" class="rounded"
                                                            style="width: 50px; height: 50px; object-fit: cover;">
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-1">{{ $item->product_name }}</h6>
                                                        @if ($item->product)
                                                            <small class="text-muted">SKU:
                                                                {{ $item->product->sku ?? 'N/A' }}</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="py-3">{{ $item->formatted_price }}</td>
                                            <td class="py-3">
                                                <span class="badge bg-light text-dark">{{ $item->quantity }}</span>
                                            </td>
                                            <td class="py-3 text-end">
                                                <strong class="text-primary">{{ $item->formatted_subtotal }}</strong>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Order Total -->
                        <div class="border-top pt-3 mt-3">
                            <div class="row">
                                <div class="col-md-6 offset-md-6">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0">Total:</h5>
                                        <h4 class="mb-0 text-primary">{{ $order->formatted_total }}</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Update Status -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">
                            <i class="fas fa-edit me-2"></i>Update Status Order
                        </h5>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('orders.update-status', $order) }}">
                            @csrf
                            @method('PUT')
                            <div class="row align-items-end">
                                <div class="col-md-8">
                                    <label for="status" class="form-label">Status Order:</label>
                                    <select name="status" id="status" class="form-select">
                                        <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>
                                            Menunggu Pembayaran
                                        </option>
                                        <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>
                                            Sedang Diproses
                                        </option>
                                        <option value="shipped" {{ $order->status == 'shipped' ? 'selected' : '' }}>
                                            Dalam Pengiriman
                                        </option>
                                        <option value="delivered" {{ $order->status == 'delivered' ? 'selected' : '' }}>
                                            Telah Diterima
                                        </option>
                                        <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>
                                            Dibatalkan
                                        </option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="fas fa-save me-2"></i>Update Status
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="col-lg-4">
                <!-- Customer Details -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">
                            <i class="fas fa-user-circle me-2"></i>Customer Details
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="customer-info">
                            <div class="info-item mb-3">
                                <small class="text-muted">Nama</small>
                                <div class="fw-medium">{{ $order->user->name }}</div>
                            </div>
                            <div class="info-item mb-3">
                                <small class="text-muted">Email</small>
                                <div class="fw-medium">{{ $order->user->email }}</div>
                            </div>
                            <div class="info-item mb-3">
                                <small class="text-muted">Phone</small>
                                <div class="fw-medium">{{ $order->user->phone ?? 'Tidak tersedia' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Shipping Address -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">
                            <i class="fas fa-map-marker-alt me-2"></i>Alamat Pengiriman
                        </h5>
                    </div>
                    <div class="card-body">
                        @if (is_array($order->shipping_address))
                            <div class="address-info">
                                <div class="fw-medium mb-2">{{ $order->shipping_address['name'] ?? '' }}</div>
                                <div class="text-muted">
                                    {{ $order->shipping_address['address'] ?? '' }}<br>
                                    {{ $order->shipping_address['city'] ?? '' }},
                                    {{ $order->shipping_address['province'] ?? '' }}<br>
                                    {{ $order->shipping_address['postal_code'] ?? '' }}
                                </div>
                                @if (isset($order->shipping_address['phone']))
                                    <div class="mt-2">
                                        <small class="text-muted">Phone:</small>
                                        <span class="fw-medium">{{ $order->shipping_address['phone'] }}</span>
                                    </div>
                                @endif
                            </div>
                        @else
                            <p class="mb-0">{{ $order->shipping_address }}</p>
                        @endif
                    </div>
                </div>

             <!-- Payment Proof -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-transparent border-0 pb-0">
        <h5 class="mb-0">
            <i class="fas fa-receipt me-2"></i>Bukti Pembayaran
        </h5>
    </div>
    <div class="card-body">
        @if ($order->payment_proof)
            <div class="payment-proof text-center">
                <!-- Menggunakan pola yang sama seperti product image -->
                <img src="{{ $order->payment_proof_url }}" 
                     alt="Bukti Pembayaran"
                     class="img-fluid rounded shadow-sm" 
                     style="max-width: 100%; cursor: pointer;"
                     data-bs-toggle="modal" 
                     data-bs-target="#paymentProofModal"
                     onerror="this.onerror=null; this.src='{{ asset('images/default-payment.png') }}';">
                
                         
                <small class="text-muted d-block mt-2">Klik untuk memperbesar</small>
            </div>
        @else
            <div class="text-center py-4">
                <i class="fas fa-receipt fa-3x text-muted mb-3"></i>
                <p class="text-muted mb-0">Belum ada bukti pembayaran</p>
            </div>
        @endif
    </div>
</div>

<!-- Payment Proof Modal -->
@if ($order->payment_proof)
    <div class="modal fade" id="paymentProofModal" tabindex="-1" aria-labelledby="paymentProofModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentProofModalLabel">Bukti Pembayaran</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <!-- Menggunakan accessor yang sama -->
                    <img src="{{ $order->payment_proof_url }}" 
                         alt="Bukti Pembayaran"
                         class="img-fluid rounded"
                         onerror="this.onerror=null; this.src='{{ asset('images/default-payment.png') }}';">
                </div>
                <div class="modal-footer justify-content-between">
                    <small class="text-muted">{{ $order->payment_proof }}</small>
                    <div>
                            <a href="{{ $order->payment_proof_url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-external-link-alt me-1"></i>Buka di Tab Baru
                            </a>
                            <a href="{{ $order->payment_proof_url }}" download class="btn btn-sm btn-outline-success">
                                <i class="fas fa-download me-1"></i>Download
                            </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
    @push('styles')
        <style>
            .main-content {
                padding: 20px;
            }

            .card {
                border-radius: 12px;
                transition: all 0.3s ease;
            }

            .card:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
            }

            .avatar-circle {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-weight: 600;
                font-size: 16px;
            }

            .product-image img {
                transition: transform 0.3s ease;
            }

            .product-image img:hover {
                transform: scale(1.1);
            }

            .badge {
                font-size: 0.875rem;
                font-weight: 500;
                padding: 0.5rem 0.875rem;
                border-radius: 8px;
            }

            .badge-warning {
                background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%);
                color: #fff;
                box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
            }

            .badge-info {
                background: linear-gradient(135deg, #17a2b8 0%, #1e90ff 100%);
                color: #fff;
                box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
            }

            .badge-primary {
                background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                color: #fff;
                box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
            }

            .badge-success {
                background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
                color: #fff;
                box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
            }

            .badge-danger {
                background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
                color: #fff;
                box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
            }

            .badge-secondary {
                background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
                color: #fff;
                box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
            }

            /* Status Badge Animations */
            .badge {
                position: relative;
                overflow: hidden;
                transition: all 0.3s ease;
            }

            .badge::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                transition: left 0.5s;
            }

            .badge:hover::before {
                left: 100%;
            }

            .badge:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            }

            /* Status Icons Animation */
            .fa-spin {
                animation: spin 2s linear infinite;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            /* Status Colors for other elements */
            .status-pending {
                color: #ffc107;
            }

            .status-processing {
                color: #17a2b8;
            }

            .status-shipped {
                color: #007bff;
            }

            .status-delivered {
                color: #28a745;
            }

            .status-cancelled {
                color: #dc3545;
            }

            .status-unknown {
                color: #6c757d;
            }

            .table-hover tbody tr:hover {
                background-color: #f8f9fa;
            }

            .btn {
                border-radius: 8px;
                font-weight: 500;
                transition: all 0.3s ease;
            }

            .btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            .info-item {
                border-left: 3px solid #e9ecef;
                padding-left: 15px;
            }

            .address-info {
                background: #f8f9fa;
                padding: 15px;
                border-radius: 8px;
                border-left: 4px solid #007bff;
            }

            .payment-proof img {
                transition: transform 0.3s ease;
                border: 2px solid #e9ecef;
            }

            .payment-proof img:hover {
                transform: scale(1.05);
                border-color: #007bff;
            }

            .form-select:focus,
            .form-control:focus {
                border-color: #007bff;
                box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
            }

            .text-primary {
                color: #007bff !important;
            }

            .shadow-sm {
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            }

            @media (max-width: 768px) {
                .main-content {
                    padding: 10px;
                }

                .card-body {
                    padding: 1rem;
                }

                .table-responsive {
                    font-size: 0.875rem;
                }
            }
        </style>
    @endpush
@endsection