{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="full-container lattan " style="position: relative; background-color: white;">
    <!-- <div class="mobile-nav text-white">
        <a href="/back" class="back-button">
            <span class="material-symbols-outlined">
                arrow_back_ios
            </span>
        </a>
        <h4>{{centerTitle}}</h4>
    </div> -->

    <div class="result-section-lattan-result">
        <form method="POST" action="{{url_for('user_webview_direct.appointmentBook')}}">
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Ask for</label>
                <input type="hidden" name="userID" value="{{userReqData['id']}}">
                <select class="form-select form-select-lg" aria-label="Asking for" id="questionerType"
                    name="questionerType">
                    <option value="1" selected>myself</option>
                    <option value="2">other</option>
                </select>
            </div>
            <div class="mb-3 row">
                <label for="staticName" class="col-sm-3 col-form-label">Name:</label>
                <div class="col-sm-9">
                    <input type="text" readonly class="form-control form-control-lg" id="staticName"
                        value="{{userReqData['name']}}">
                </div>
            </div>
            <div class="mb-3 row">
                <label for="staticName" class="col-sm-3 col-form-label">Birth date:</label>
                <div class="col-sm-9">
                    <input id="birthDate" name="birthDate" type="hidden" value="{{userReqData['birth_date']}}">
                    <input type="text" readonly class="form-control form-control-lg" id="staticDate" value="">
                </div>
            </div>
            <div class="mb-3 row">
                <label for="staticName" class="col-sm-3 col-form-label">Gender:</label>
                <div class="col-sm-9">
                    <input type="text" name="gender" readonly class="form-control form-control-lg" id="gender"
                        value="{{userReqData['gender']}}">
                    <select class="form-select form-select-lg d-none" aria-label="Asking for" id="staticGender"
                        name="staticGender">
                        <option value="Male" selected>Male</option>
                        <option value="Female">Female</option>
                    </select>
                </div>
            </div>
            <div class="form-check mb-3">
                <input type="hidden" id="yadayaCheck" name="yadayabox" value="false">
                <input class="form-check-input" type="checkbox" id="yadayabox">
                <label class="form-check-label" for="yadayabox">
                    Yadaya (additional charges may apply)
                </label>
            </div>

            <hr>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Appointment</label>
                <input type="text" class="form-control form-control-lg" id="appDate" placeholder="appointment date"
                    required min="" name="appDate" value="" hidden>
                <input type="date" class="form-control" placeholder="appointment date" id="appDateMod" required min=""
                    value="2022-12-06">
            </div>
            <div class="mb-3 position-relative">
                <input type="hidden" name="appTimeID" value="" id="appTimeID" required>
                <div class="text-danger mb-2 d-none" id="appTimeError">
                    Please choose session.
                </div>
                <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-secondary disabled timeButton"
                            sid="{{t['id']}}">
                            <script>
                                document.write(moment('{{t['start_session']}}', 'HH:mm:ss').format('hh:mm a'));
                            </script>
                        </button>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <hr>
            <div class="form-check mb-3">
                <input type="hidden" id="promoCheck" name="promobox" value="false">
                <input type="hidden" name="promoVal" value="" id="promoVal">
                <input type="hidden" name="promoID" value="" id="promoID">
                <input type="hidden" name="promoAm" value="" id="promoAm">
                <input type="hidden" name="promoType" value="" id="promoType">
                <input class="form-check-input" type="checkbox" id="promobox">
                <label class="form-check-label" for="promobox">
                    Promo code
                </label>
            </div>
            <div id="promo-input" class="mb-4 position-relative" style="display: none;">
                <input type="text" class="form-control form-control-lg " name="promoCode" id="promoCode"
                    placeholder="promo code" maxlength="6">
            </div>
            <div class="mb-3">
                <div class="card" id="voucher">
                    <input type="hidden" name="payableAmount" id="payableAmount" value="">
                    <div class="card-header">
                        <h5 class="mb-0">Payable amount</h5>
                    </div>
                    <div class="card-body">
                        <ul></ul>
                        <hr>
                        <div class="row justify-content-between">
                            <div class="col-auto"><b>Total Price:</b></div>
                            <div class="col-auto"><b id="am-total">0 mmk</b></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">Payment method</label>
                <select class="form-select form-select-lg" aria-label="Asking for" id="paymentType" required
                    name="paymentType">
                    <option disabled selected>Choose payment method</option>
                    {% for x in paymentProvider %}
                    <option value="{{x['id']}}">{{x['provider_name']}}</option>
                    {% endfor %}
                </select>
            </div>

            <div id="paymentMethod" class="mb-3" style="display: none;">
                <input type="hidden" name="paymentAccount" id="paymentAccount" value="">
                <input type="hidden" name="paymentMethod" id="paymentMethod1" value="">
                <div class="card">
                    <div class="card-header" id="paymentHeader">
                    </div>
                    <div class="card-body">

                    </div>
                </div>
            </div>
            <div class="mb-3">
                <p>If you have any problem, please contact us from our official facebook messenger or viber,
                    telegram etc.</p>
            </div>
            <div class="d-grid gap-2 col-8 mx-auto">
                <button type="button" id="submit-btn" class="btn btn-primary btn-lg">Submit</button>
            </div>
        </form>
    </div>

</div>
<div class="preloader">
    <center>
        <lottie-player src="{{url_for('user_webview_hawsartan.static', filename='images/Logo.json')}}" speed="1.2"
            style="width: 80px; height: 80px;" loop autoplay></lottie-player>
    </center>
</div>
<div class="submitloader">
    <center>
        <lottie-player src="{{url_for('user_webview_hawsartan.static', filename='images/Logo.json')}}" speed="1.2"
            style="width: 80px; height: 80px;" loop autoplay></lottie-player>
    </center>
</div>
<script>
    $(window).on('load', function () {
        $('body').css('overflow', 'hidden');
        $('.preloader').hide();
        $('body').css('overflow', 'unset');
    })
</script>
<script>
    $(document).ready(function () {
        var height = $(window).height()
        $('.content-section').css('height', height);
        $('.result-section-lattan').css('height', height);
    })
</script>
<script>
    $(document).ready(function () {
        var bDate = $('#birthDate').val();
        $('#staticDate').val(moment(bDate).format("dddd, MMMM Do YYYY"))
    })
</script>
{% endblock %}