@extends('guest.layout.main')
@section('body_main_guests')
    <section class="section py-5 bg-light text-center">
    <div class="container">
        <div class="card shadow-lg p-4 mx-auto" style="max-width: 600px;">
            <div class="mb-4">
                <img src="{{ asset('gambar/success.svg') }}" alt="Success" style="width: 100px;">
            </div>
            <h3 class="text-success mb-3">Pesanan Anda Berhasil!</h3>
            <p class="lead">Terima kasih atas pesanan Anda. Kami akan segera menyiapkannya dan menghubungi Anda jika diperlukan.</p>
            <hr class="my-4">
            <p class="text-muted">Simpan Nomor Order Anda untuk memantau status pesanan secara berkala. Hubungi kami jika ada pertanyaan.</p>
            <p>No Order : <strong id="noOrderText">{{ $no_order }}</strong>
                <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyNoOrder()">
                    <i class="fa fa-copy"></i> Salin
                </button>
            </p>
            <a href="{{ $back_href ?? '/' }}" class="btn btn-success mt-3"><i class="fa fa-home me-1"></i> Kembali ke Beranda</a>
        </div>
    </div>
</section>
@endsection
<script>
    document.addEventListener('DOMContentLoaded', () => {
        $("#cartButton").addClass('d-none');
    })
    function copyNoOrder() {
        const text = document.getElementById('noOrderText').innerText;
        navigator.clipboard.writeText(text).then(() => {
            Swal.fire({
                icon: 'success',
                title: 'Disalin!',
                text: 'Nomor order berhasil disalin: ' + text,
                showConfirmButton: false,
                timer: 1500
            });
        }).catch(err => {
            console.error('Gagal menyalin: ', err);
             Swal.fire({
                icon: 'warning',
                text: 'Gagal menyalin teks: ' + text,
                showConfirmButton: false,
                timer: 2000
            });
        });
    }
</script>