{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="full-container lattan ">
    <div class="mobile-nav text-white">
        <!-- <a href="/home" class="back-button">
            <span class="material-symbols-outlined">
                arrow_back_ios
            </span>
        </a> -->
        <h4>{{scriptTitle}}</h4>
    </div>
    <div class="content-section" style="overflow-y: scroll;
    overflow-x: hidden;">
        <div class="result-section-lattan-result">
            <div class="card">
                <div class="card-header text-center">
                    <h3 class="mt-3">Success</h3>
                    <span class="material-icons text-success" style="font-size: 100px;">check_circle</span>
                </div>
                <div class="card-body">
                    <div class="row mb-3 justify-content-between">
                        <div class="col-auto">Appointment Date:</div>
                        <div class="col-auto"><b>{{bookData['date']}}</b></div>
                    </div>
                    <div class="row justify-content-between">
                        <div class="col-auto">Appointment Time:</div>
                        <div class="col-auto">
                            <script>
                                document.write(moment('{{curSession['start_session']}}', 'HH:mm:ss').format('hh:mm a'));
                            </script>
                            <b>To</b>
                            <script>
                                document.write(moment('{{curSession['end_session']}}', 'HH:mm:ss').format('hh:mm a'));
                            </script>
                        </div>
                    </div>
                    <hr>
                    <div class="mb-2 row justify-content-between">
                        <div class="col-auto">Amount:</div>
                        <div class="col-auto"><b>{{tranData['amount']}} mmk</b></div>
                    </div>
                    <div class="mb-2 row justify-content-between">
                        <div class="col-auto">Transition ID:</div>
                        <div class="col-auto"><b>{{tranData['transition_num']}}</b></div>
                    </div>
                    <div class="row justify-content-between">
                        <div class="col-auto">Datetime:</div>
                        <div class="col-auto"><b>{{tranData['datetime']}}</b></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-grid gap-2 col-8 mx-auto">
            <button class="btn btn-primary btn-lg" type="button" onclick="window.location.href='/home'">Back To
                Home</button>
        </div>
    </div>

    <!-- <div class="preloader">
        <center>
            <h4>Please wait for your answer...</h4>
        </center>
    </div> -->
</div>
<!-- <script>
    $(window).on('load', function () {
        $('body').css('overflow', 'hidden');
        setTimeout(() => {
            $('.preloader').fadeOut('slow');
            $('body').css('overflow', 'unset');
        }, 3000)
    })
</script> -->
<script>
    $(document).ready(function () {
        var height = $(window).height()
        $('.content-section').css('height', height);
        $('.result-section-lattan').css('height', height);
    })
</script>
{% endblock %}