{% extends "layout/base.html.twig" %}
{% block content %}

    <div class="widget">
        <div class="widget-body">
            <div class="row">
                <div class="col-md-4">
                    <p>Current Wallet State</p>
                    <h2>{{ institution.Wallet }} AED</h2>
                    <br>
                    <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="col-md-8">
                    <table id="product-list" class="table table-hover dt-responsive nowrap">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Course End Date</th>
                            <th>Participants</th>
                            <th>Course income</th>
                        </tr>
                        </thead>
                        <tbody>

                        {% for cource in cources %}
                            <tr>
                                <td>{{ cource.title }}</td>
                                <td>{{ cource.courseEnd ? cource.courseEnd|date('Y-m-d') : '' }}</td>

                                <td>{{ cource.Buy|length }}</td>
                                <td>{{ cource.Buy|length * cource.price }} AED</td>



                            </tr>

                        {% else %}
                            <tr>
                                <td colspan="12">no records found</td>
                            </tr>
                        {% endfor %}

                    </table>

                </div>
            </div>
        </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() {
            $('#product-list').DataTable();
        } );
    </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');

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

            });

        });

    </script>

{% endblock %}