{% 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>{{centerTitle}}</h4>
    </div>
    <div class="content-section" style="overflow-y: scroll;
    overflow-x: hidden;">
        <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" disabled>for my friend (coming soon)</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']}}">
                    </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>
                <div class="form-check mb-3">
                    <input type="hidden" id="promoCheck" name="promobox" value="false">
                    <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-3" style="display: none;">
                    <input type="text" class="form-control form-control-lg" name="promoCode" id="promoCode"
                        placeholder="promo code">
                </div>
                <hr>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">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>
                <hr>
                <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 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">

                        </div>
                    </div>
                </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>
<div class="preloader">
    <lottie-player src="https://assets4.lottiefiles.com/packages/lf20_t8hs6wpo.json" background="transparent" speed="1"
        style="width: 60px; height: 60px;" loop autoplay></lottie-player>
</div>
<script>
    $(window).on('load', function () {
        $('body').css('overflow', 'hidden');
        setTimeout(() => {
            $('.preloader').fadeOut('slow');
            $('body').css('overflow', 'unset');
        }, 1000)
    })
</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();
        console.log(bDate)
        $('#staticDate').val(moment(bDate).format("dddd, MMMM Do YYYY"))
    })
</script>
{% endblock %}