@extends('checkout.layout')
@section('title' , 'Tebrikler')
@section('content')
    <div class="h-screen w-full flex items-center justify-center lg:px-0 px-6">
        <div class="lg:max-w-2xl w-full flex items-center justify-center flex-col gap-y-10">
            <div class="flex items-center flex-col gap-y-4">
                <div class="p-4 bg-green-100 rounded-full items-center justify-center inline-flex">
                    <i class="icon-shield-tick text-7xl text-green-600"></i>
                </div>
                <h3 class="font-semibold text-3xl mt-5"> Tebrikler </h3>
                <p class="text-lg"> Siparişiniz başarılı bir şekilde oluşturuldu. </p>
            </div>
            <div class="border border-zinc-200 p-10 w-full flex flex-col items-center justify-center rounded-lg">
                <span class="text-center mb-3 text-sm">Sipariş Kodu</span>
                <div class="relative">
                    <input type="text" id="order_id" disabled readonly value="{{ $order_id }}" class="text-2xl bg-transparent border-transparent text-center text-primary-600 transition-colors duration-700">
                    <button id="copy" class="absolute inset-0 w-full h-full"></button>
                </div>
                <small class="text-xs"> Tıklayın ve kodu kopyalayın. </small>
                <a href="" class="mt-4 cursor-pointer block py-2 px-4 rounded-md text-white w-full text-center transition bg-primary-500 hover:bg-primary-600">
                    Sipariş Takibi
                </a>
            </div>
            <a href="{{ site() }}"> Anasayfaya Dön </a>
        </div>
    </div>
    <script>
        let copy_button = document.querySelector('#copy');
        let order_id = document.querySelector('#order_id')

        copy_button.addEventListener('click', event => {
            order_id.classList.remove('text-primary-600');
            order_id.classList.add('text-green-600');
            setTimeout(() => {
                order_id.classList.add('text-primary-600');
                order_id.classList.remove('text-green-600');
            }, 700);
            navigator.clipboard.writeText("{{ $order_id }}");
        })
    </script>
@endsection