{% extends "layout/base.html.twig" %}
{% block content %}
    <div class="widget">
        <div class="widget-body">
            <div class="student">
                <div class="form-group">
                    <label for="email">Bill verification:</label>
                    <br>
                    <br>
                    <label for="email">Enter bill ID (Found on the recieved bill)</label>
                    <input type="text" class="form-control" id="cle" placeholder="Verify bill" name="email">
                </div>
                <button id="verif" class="btn btn-default">Verify</button>

            </div>
        </div>
        <div class="row" id="content"></div>
    </div>
    <div tabindex="-1" role="dialog" aria-labelledby="modalWithForm01" id="popmod" class="modal fade bs-view">
        <div role="document" class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-left">
                        <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
                        <h4 id="modalWithForm01" class=" allredy modal-title hidden">Bill Already Used!</h4>
                        <h4 id="modalWithForm01" class=" success modal-title hidden">Bill Verified Succesfully !</h4>
                        <h4 id="modalWithForm01" class=" error modal-title hidden">Bill doesn’t exist!</h4>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="allredy hidden">
                    <p>This bill is already verified on by the date of:</p>
                    <p id="dateadd">11/05/2020</p>
                    <p>This bill might not be eligible for further use.</p>
                    </div>
                    <div class="error hidden">
                    <p>ID not found in the database. Reasons could be: :</p>
                    <p>- Bill Id entered incorrectly.</p>
                    <p>- Bill is not legal.</p>
                    </div>
                    <div class="success hidden">
                    <p>This bill is successfully verified :</p>
                    <p>and added to the database .</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-raised btn-black">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            $("#verif").click(function(){
                var cle=$("#cle").val();
                var content=false;
                $.ajax({
                    url:"/cleverif/"+cle,
                    method:"GET", //First change type to method here
                    success:function(response) {
                        if(response.resultat=='update')
                        {
                            $("#dateadd").html(response.date)
                            $('.error').addClass('hidden');
                            $('.success').removeClass('hidden');
                            $('.allredy').addClass('hidden');
                            content=true;
                        }
                    else if(response.resultat=='true')
                        {
                            $("#dateadd").html(response.date)
                            $('.error').addClass('hidden');
                            $('.success').addClass('hidden');
                            $('.allredy').removeClass('hidden');
                            content=true;
                        }
                    else {
                            $('.error').removeClass('hidden');
                            $('.success').addClass('hidden');
                            $('.allredy').addClass('hidden');
                        }

                        $('#popmod').modal('show');
                    if(content==true){
                        $.ajax({
                            url:"/cleverifcontent/"+cle,
                            method:"GET", //First change type to method here
                            success:function(response) {
                                $("#content").html(response);
                            },
                            error:function(){
                                alert("error de connexion");
                            }
                        });

                    }

                        // $("#content").html(response);
                    },
                    error:function(){
                        alert("error de connexion");
                    }
                });

            });

        });

    </script>
{% endblock %}