@extends('layouts.navfot')

@section('title', 'Pesanan Berhasil Dibuat')

@section('content')
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="mb-4 text-center">
                    <div class="mb-4">
                        <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                    </div>
                    <h2 class="mb-3 text-success">Pesanan Berhasil Dibuat!</h2>
                    <p class="text-muted">Terima kasih telah berbelanja. Pesanan Anda telah berhasil dibuat dan sedang
                        diproses.</p>
                </div>

                <div class="shadow-sm card">
                    <div class="text-white card-header bg-success">
                        <h5 class="mb-0">
                            <i class="fas fa-receipt me-2"></i>
                            Detail Pesanan
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4 row">
                            <div class="col-md-6">
                                <h6 class="text-muted">Tanggal Pesanan</h6>
                                <p class="fw-bold">{{ $order->created_at->format('d F Y, H:i') }}</p>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted">Nomor Pesanan</h6>
                                <p class="fw-bold fs-5 text-primary">{{ $order->order_number }}</p>
                            </div>
                        </div>

                        <div class="mb-4 row">
                            <div class="col-md-6">
                                <h6 class="text-muted">Status Pesanan</h6>
                                <span class="badge {{ $order->status_badge }}">{{ $order->status_label }}</span>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted">Status Pembayaran</h6>
                                <span
                                    class="badge {{ $order->payment_status_badge }}">{{ $order->payment_status_label }}</span>
                            </div>
                        </div>

                        <div class="mb-4 row">
                            <div class="col-md-6">
                                <h6 class="text-muted">Total Pembayaran</h6>
                                <p class="fw-bold fs-4 text-primary">{{ $order->formatted_total }}</p>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted">Metode Pembayaran</h6>
                                <p class="fw-bold">
                                    @switch($order->payment_method)
                                        @case('bank_transfer')
                                            <i class="fas fa-university me-2"></i>Transfer Bank
                                        @break

                                        @case('e_wallet')
                                            <i class="fas fa-mobile-alt me-2"></i>E-Wallet
                                        @break

                                        @case('cod')
                                            <i class="fas fa-hand-holding-usd me-2"></i>COD
                                        @break

                                        @case('credit_card')
                                            <i class="fas fa-credit-card me-2"></i>Kartu Kredit/Debit
                                        @break

                                        @default
                                            {{ $order->payment_method }}
                                    @endswitch
                                </p>
                            </div>
                        </div>

                        {{-- Informasi Rekening Bank --}}
                        @if ($order->payment_method == 'bank_transfer')
                            <div class="mb-4 alert alert-info">
                                <h6 class="alert-heading">
                                    <i class="fas fa-university me-2"></i>
                                    Informasi Rekening Pembayaran
                                </h6>
                                <hr>
                                <div class="row">
                                    <div class="col-md-12">
                                        <p class="mb-2"><strong>Bank:</strong> Mandiri</p>
                                        <p class="mb-2"><strong>Nomor Rekening:</strong>
                                            <span class="fw-bold text-primary fs-5">1660006121479</span>
                                            <button class="btn btn-sm btn-outline-primary ms-2"
                                                onclick="copyToClipboard('1660006121479')" title="Salin Nomor Rekening">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </p>
                                        <p class="mb-2"><strong>Atas Nama:</strong> Aqilla Baidhar Putra</p>
                                        <p class="mb-0"><strong>Jumlah Transfer:</strong>
                                            <span class="fw-bold text-danger fs-5">{{ $order->formatted_total }}</span>
                                            <button class="btn btn-sm btn-outline-danger ms-2"
                                                onclick="copyToClipboard('{{ str_replace(['Rp', '.', ' '], '', $order->formatted_total) }}')"
                                                title="Salin Jumlah">
                                                <i class="fas fa-copy"></i>
                                            </button>
                                        </p>
                                    </div>
                                </div>
                                <hr>
                                <div class="mb-0 alert alert-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <strong>Penting:</strong> Mohon transfer sesuai dengan jumlah yang tertera untuk
                                    mempercepat proses verifikasi pembayaran.
                                </div>
                            </div>
                        @endif

                        <div class="mb-4">
                            <h6 class="text-muted">Informasi Pembeli</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Nama:</strong> {{ $order->customer_name }}</p>
                                    <p class="mb-1"><strong>Email:</strong> {{ $order->customer_email }}</p>
                                    <p class="mb-1"><strong>Telepon:</strong> {{ $order->customer_phone }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Alamat:</strong></p>
                                    <p>{{ $order->customer_address }}</p>
                                </div>
                            </div>
                        </div>

                        @if ($order->notes)
                            <div class="mb-4">
                                <h6 class="text-muted">Catatan</h6>
                                <p>{{ $order->notes }}</p>
                            </div>
                        @endif

                        <div class="mb-4">
                            <h6 class="text-muted">Produk yang Dipesan</h6>
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>Produk</th>
                                            <th>Harga</th>
                                            <th>Qty</th>
                                            <th>Subtotal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($order->orderItems as $item)
                                            <tr>
                                                <td>{{ $item->product_name }}</td>
                                                <td>{{ $item->formatted_price }}</td>
                                                <td>{{ $item->quantity }}</td>
                                                <td>{{ $item->formatted_subtotal }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="3">Total</th>
                                            <th>{{ $order->formatted_total }}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 card">
                    <div class="card-body">
                        <h6 class="card-title">
                            <i class="fas fa-info-circle me-2"></i>
                            Langkah Selanjutnya
                        </h6>
                        <div class="row">
                            <div class="col-md-6">
                                <ul class="list-unstyled">
                                    @if ($order->payment_method == 'bank_transfer')
                                        <li>• Lakukan transfer ke rekening Bank Mandiri di atas</li>
                                        <li>• Transfer sesuai dengan jumlah yang tertera</li>
                                        
                                        
                                    @elseif($order->payment_method == 'e_wallet')
                                        <li>• Link pembayaran akan dikirim ke email Anda</li>
                                        <li>• Lakukan pembayaran dalam 24 jam</li>
                                    @elseif($order->payment_method == 'cod')
                                        <li>• Siapkan uang pas saat barang diantar</li>
                                        <li>• Periksa barang sebelum pembayaran</li>
                                    @else
                                        <li>• Ikuti instruksi pembayaran yang dikirim ke email</li>
                                    @endif
                                    <li>• Pesanan akan diproses setelah pembayaran dikonfirmasi</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <ul class="list-unstyled">
                                  
                                    <li>• Cek status pesanan secara berkala</li>
                                    <li>• Hubungi customer service jika ada pertanyaan</li>
                                    @if ($order->payment_method == 'bank_transfer')
                                        <li>• Batas waktu pembayaran: 24 jam</li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 text-center">
                    <div class="btn-group" role="group">
                        <a href="{{ route('checkout.show', $order->order_number) }}" class="btn btn-primary">
                            <i class="fa-solid fa-upload me-2"></i>
                            Upload Bukti Pembayaran
                        </a>
                        <a href="{{ route('product') }}" class="btn btn-outline-primary">
                            <i class="fas fa-shopping-bag me-2"></i>
                            Lanjut Belanja
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                // Show success notification
                const toast = document.createElement('div');
                toast.className =
                    'toast align-items-center text-bg-success border-0 position-fixed top-0 end-0 m-3';
                toast.style.zIndex = '9999';
                toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">
                    <i class="fas fa-check me-2"></i>
                    Berhasil disalin!
                </div>
                <button type="button" class="m-auto btn-close btn-close-white me-2" data-bs-dismiss="toast"></button>
            </div>
        `;
                document.body.appendChild(toast);

                const bsToast = new bootstrap.Toast(toast);
                bsToast.show();

                // Remove toast element after it's hidden
                toast.addEventListener('hidden.bs.toast', function() {
                    document.body.removeChild(toast);
                });
            }).catch(function(err) {
                console.error('Could not copy text: ', err);
                alert('Gagal menyalin. Silakan salin secara manual.');
            });
        }
    </script>
@endsection