{% extends 'base.html.twig' %}

{% block title %}Tchala - 2KBES{% endblock %}

{% block css_style %}
    {#<link rel="stylesheet" href="{{ asset('assets/css/main.css') }}">#}
    {#<link rel="stylesheet" href="{{ asset('assets/css/util.css') }}">#}

    <link href="{{ asset('assets/plugins/jtable/themes/redmond/jquery-ui-1.8.16.custom.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/plugins/jtable/scripts/jtable/themes/metro/green/jtable.css') }}" rel="stylesheet" type="text/css" />

    {#<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">#}
{% endblock %}

{% block body %}
    <div class="page-title-container">
        <div class="container">
            {#<div class="page-title pull-left">#}
                {#<h2 class="entry-title">Termes et Conditions</h2>#}
            {#</div>#}
            {#<ul class="breadcrumbs pull-right">#}
                <div class="with-icon pull-right" style="margin-top: 12px;">
                    <input class="input-text full-width" id="search_tchala" name="search" placeholder="Rechercher" type="text">
                    <button id="search_button" class="icon green-bg white-color"><i class="soap-icon-search"></i></button>
                </div>
            {#</ul>#}
        </div>
    </div>
    <section id="content">
        <div class="container">
            <div id="main">
                <div class="row">
                    <div class="col-md-12">
                        <div id="TchalaTableContainer" style="width: 100%;"></div>
                        {#<table id="myTable">#}
                        {#<thead>#}
                        {#<tr class="table100-head">#}
                        {#<tr>#}
                        {#<th class="column4"></th>#}
                        {#<th class="column1">Tchala</th>#}
                        {#<th class="column2">Lottos</th>#}
                        {#<th class="column3">Description</th>#}
                        {#</tr>#}
                        {#</thead>#}
                        {#<tbody>#}
                        {#{% for tchala in tchalas %}#}
                        {#<tr>#}
                        {#<td class="column1">{{ tchala.label }}</td>#}
                        {#<td class="column2">{{ tchala.numbers }}</td>#}
                        {#<td class="column3">{{ tchala.description }}</td>#}
                        {#</tr>#}
                        {#{% endfor %}#}

                        {#<tr>#}
                        {#<td class="column1">2017-09-28 05:57</td>#}
                        {#<td class="column1">200397</td>#}
                        {#<td class="column2">Samsung S8 Black</td>#}
                        {#<td class="column3">$756.00</td>#}
                        {#</tr>#}
                        {#</tbody>#}
                        {#</table>#}
                    </div>
                </div>
            </div>
         </div>
    </section>
{% endblock %}
{% block js_script_ %}
    <script src="{{ asset('assets/plugins/jtable/scripts/jquery-1.6.4.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/jtable/scripts/jquery-ui-1.8.16.custom.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/plugins/jtable/scripts/jtable/jquery.jtable.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            //Prepare jTable
            $('#TchalaTableContainer').jtable({
                title: 'Liste tchala',
                paging: true,
                pageSize: 30,
                sorting: true,
                searching: true,
                defaultSorting: 'label ASC',
                actions: {
                    listAction: '{{ path("tchala_list") }}',
//                    createAction: 'PersonActionsPagedSorted.php?action=create',
//                    updateAction: 'PersonActionsPagedSorted.php?action=update',
//                    deleteAction: 'PersonActionsPagedSorted.php?action=delete'
                },
                fields: {
                    id: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    label: {
                        title: 'Tchala',
                        width: '40%'
                    },
                    numbers: {
                        title: 'Numeros',
                        width: '20%'
                    },
                    description: {
                        title: 'Description',
                        width: '20%'
                    }
//                    ,
//                    RecordDate: {
//                        title: 'Record date',
//                        width: '30%',
//                        type: 'date',
//                        create: false,
//                        edit: false
//                    }
                }
            });

            //Load person list from server
//            $('#TchalaTableContainer').jtable('load');

            //Re-load records when user click 'load records' button.
            $('#search_button').click(function (e) {
//                e.preventDefault();
                $('#TchalaTableContainer').jtable('load', {
                    search: $('#search_tchala').val()
                });
            });

            $('#search_tchala').change(function (e) {
                if($('#search_tchala').val() == "")
                    $('#TchalaTableContainer').jtable('load', {
                        search: $('#search_tchala').val()
                    });
            });

            $('#search_tchala').keypress(function(e) {
                if(e.which == 13) {
                    $('#TchalaTableContainer').jtable('load', {
                        search: $('#search_tchala').val()
                    });
                }
            });
            //Load all records when page is first shown
            $('#search_button').click();

            

        });

    </script>
    {#<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>#}
    {#<script>#}
        {#tjq(document).ready( function () {#}
            {#tjq('#myTable').DataTable();#}
        {#} );#}
    {#</script>#}
{% endblock %}