@extends('website.desktop.layouts.app-payment') 
@section('title') Successfull Transaction - Gradding @endsection
@section('main')
    {{-- {{dd($order_detail[0]->transaction_id)}} --}}
    {{-- <section class="registration-successful">
                <div class="container">
                    <div class="registration-card">
                        <lottie-player src="{{ asset('/') }}frontend/assets-desktop/js/success_icon.json"  background="transparent"  speed="1" loop autoplay style="
                        width: 140px;
                        margin: auto;
                    " defer></lottie-player>
                        <h2>Payment Successful</h2>
                        <p>Your Order has been Successful placed with Gradding</p>
                        <a href="Javascript:;" class="explore-button">Explore More</a>
                        <h1 align="center">Transation Id is : {{$order_detail[0]->transaction_id}}</h1>
                        <h1 align="left">Amount Paid : {{$order_detail[0]->amount}}</h1>
                        <h1 align="left">Total Orders : {{count(array($order_detail[0]->cadidate_id))}}</h1>
                        <a href="Javascript:;" class="explore-button">Explore More</a>
                        <h1 align="center">Transation Id is : #tyrshxjasagh</h1>
                        <h1 align="left">Amount Paid : 14000</h1>
                        <h1 align="left">Total Orders : 1</h1>
                    </div>
                    
                </div>
            </section> --}}

    <section class="transaction-sucess-section container">
        <div class="transaction-sucess">
            <lottie-player src="{{ asset('/') }}frontend/assets-desktop/images/start-journey/payment-success.json"
                class="successful-lottie" speed="1" loop autoplay defer></lottie-player>
            <h2>Transaction Successful</h2>
            <p>Your order has been successfully placed with Gradding, World’s most trusted study abroad platform.</p>
            <hr>
            <div class="transaction-detail">
                <div class="trans-id">
                    <h4>Transaction ID</h4>
                    <div class="textLink-div">
                        <input class="textLink" id="text" type="text" name="shortlink" value="{{$order_detail[0]->transaction_id}}"
                            id="copy-link" readonly="">
                        <span class="copyLink" id="copy" tooltip="Copy to clipboard">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <path
                                    d="M6.00044 6.12787L6 15.75C6 17.7382 7.5473 19.3651 9.50344 19.492L9.75 19.5L16.3716 19.5011C16.0624 20.3744 15.2293 21 14.25 21H9C6.51472 21 4.5 18.9853 4.5 16.5V8.25C4.5 7.27017 5.12631 6.43663 6.00044 6.12787ZM17.25 3C18.4926 3 19.5 4.00736 19.5 5.25V15.75C19.5 16.9926 18.4926 18 17.25 18H9.75C8.50736 18 7.5 16.9926 7.5 15.75V5.25C7.5 4.00736 8.50736 3 9.75 3H17.25ZM17.25 4.5H9.75C9.33579 4.5 9 4.83579 9 5.25V15.75C9 16.1642 9.33579 16.5 9.75 16.5H17.25C17.6642 16.5 18 16.1642 18 15.75V5.25C18 4.83579 17.6642 4.5 17.25 4.5Z"
                                    fill="#212121" />
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="amount-div">
                    <h4>Amount Paid</h4>
                    <span>₹ {{ number_format($order_detail[0]->amount,2) }} /-</span>
                </div>
            </div>
            <a href="{{ url("/") }}" class="continue btn-primary">Continue</a>
        </div>
    </section>
@endsection

@section('css')
    <link rel="stylesheet"
        href="{{ asset('frontend') }}/assets-desktop/css/registration-success.css?v={{ env('ASSETS_VERSION') }}">
@endsection

@section('script')
    {{-- <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> --}}
    <script src="{{ asset('frontend') }}/assets-desktop/js/lottie-player.js?v={{env('ASSETS_VERSION')}}"></script>
    <script>
        const input = document.getElementById("text");
        const copyButton = document.getElementById("copy");
    
        const copyText = (e) => {
            // window.getSelection().selectAllChildren(textElement);
            input.select(); //select input value
            document.execCommand("copy");
            e.currentTarget.setAttribute("tooltip", "Copied!");
        };
    
        const resetTooltip = (e) => {
            e.currentTarget.setAttribute("tooltip", "Copy to clipboard");
        };
    
        copyButton.addEventListener("click", (e) => copyText(e));
        copyButton.addEventListener("mouseover", (e) => resetTooltip(e));
    </script>
@endsection