{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="full-container lattan ">
    <div class="mobile-nav text-white">
        <a href="/back" 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">
                {% if bookData['status']=='0' %}
                <div class="card-header text-center">
                    <h3 class="mt-3">Pending</h3>
                    <span class="material-icons text-warning" style="font-size: 100px;">schedule</span>
                </div>
                {% elif bookData['status']=='1' %}
                <div class="card-header text-center">
                    <h3 class="mt-3">Confirmed</h3>
                    <span class="material-icons text-success" style="font-size: 100px;">check_circle</span>
                </div>
                {% elif bookData['status']=='2' %}
                <div class="card-header text-center">
                    <h3 class="mt-3">Canceled</h3>
                    <span class="material-icons text-danger" style="font-size: 100px;">cancel</span>
                </div>
                {% endif %}
                <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">{{curSession['start_session']}} <b>To</b>
                            {{curSession['end_session']}}
                        </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>
        {% if bookData['status']=='0' or
        bookData['status']=='1' %} {% if bookData['date'] > nextDay and bookData['reschedule'] <=0 %} <div
            class="d-grid gap-2 col-8 mx-auto">
            <button class="btn btn-primary btn-lg" type="button" data-bs-toggle="modal"
                data-bs-target="#rescheduleModal">Edit
                Session</button>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="rescheduleModal" tabindex="-1" aria-labelledby="rescheduleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <p class="text-danger">Notice: You can change appointment date and sessions for only ONCE. So please
                        carefully think and confirm.</p>
                    <input type="hidden" name="bookID" id="bookID" value="{{bookData['id']}}">
                    <div class="mb-3">
                        <label for="exampleInputEmail1" class="form-label">Reschedule Appointment</label>
                        <input type="date" class="form-control" id="appDate" placeholder="appointment date" required
                            min="" name="appDate" value="">
                    </div>
                    <div class="mb-3">
                        <input type="hidden" name="appTimeID" value="" id="appTimeID" required>
                        <div class="row row-cols-3 g-3">
                            {% for t in sessionTime %}
                            <div class="col d-grid">
                                <button type="button" id="session-btn-{{t['id']}}"
                                    class="btn btn-outline-primary timeButton" sid="{{t['id']}}">
                                    <script>
                                        document.write(moment('{{t['start_session']}}', 'HH:mm:ss').format('hh:mm a'));
                                    </script>
                                </button>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="save-edit" class="btn btn-primary disabled">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    {% endif %}
    {% endif %}
</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 %}