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

{% block title %}Interface administrateur{% endblock %}

{% block body %}
    <div class="">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Dashboard</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Dashboard v1</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid ">
                <!-- Small boxes (Stat box) -->
                <div class="row">
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3>{{ nbInscris }}</h3>

                                <p>Personnes inscrites</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person"></i>
                            </div>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-6">
                        <!-- small box -->
                        <div class="small-box bg-success">
                            <div class="inner">
                                <h3>{{ nbTire }}</h3>

                                <p>Tiré au sort aujourd'hui</p>
                            </div>
                        </div>
                    </div>
                    {% if inscription.isActive %}
                        <div class="col-lg-3 col-6">
                            <h4>Les inscriptions sont actuellement ouvertes</h4>
                            <button type="button" class="btn btn-block btn-warning btn-lg changeInscription">Fermer inscriptions</button>
                        </div>
                    {% else %}
                        <div class="col-lg-3 col-6">
                            <h4>Les inscriptions sont actuellement fermées</h4>
                            <button type="button" class="btn btn-block btn-warning btn-lg changeInscription">Ouvrir inscriptions</button>
                        </div>
                    {% endif %}
                    <div class="col-md-3">
                        <button type="button" class="btn btn-block btn-danger btn-lg" id="resetBase">Reinitialiser la base</button>
                        <button type="button" class="btn btn-block btn-success btn-lg mt-3" id="tirageBtn">Tirer au sort</button>
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
        {% include 'admin/datatable_tirage.html.twig' %}
        {% include 'admin/datatable.html.twig' %}
    </div>
    <div class="overlay">
        <canvas id="world"></canvas>
        <h1 id="winner"></h1>
        <svg id="close" aria-hidden="true" data-prefix="far" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-times fa-w-10 fa-3x"><path fill="white" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" class=""></path></svg>
    </div>

{% endblock %}
{% block javascripts %}
    <script>
        $(function () {
            $('#data1').DataTable({
                columnDefs: [{ targets: 0, visible: false }],
                rowReorder: {
                    selector: 'td:first-child'
                },
                searching: false,
                language: {
                    url: '//cdn.datatables.net/plug-ins/2.0.0/i18n/fr-FR.json',
                },
            });
        });
    </script>
    <script>
        $(function () {
            $('#data2').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                language: {
                    url: '//cdn.datatables.net/plug-ins/2.0.0/i18n/fr-FR.json',
                },
            });
        });
    </script>
    <script>
        $('.deleteEntry').click(function() {
            var cabs = $(this).val()
            if(confirm("Voulez-vous vraiment supprimer cette ligne ?"))
            {
                $.ajax({
                    url: "{{ path('admin_musique_delete') }}",
                    type: "GET",
                    dataType: "JSON",
                    data: {
                        "id": cabs
                    },
                    success: function () {
                        location.reload()
                    },
                })
            }
        });
    </script>
    <script>
        $('.deleteEntryTire').click(function() {
            var cabs = $(this).val()
            if(confirm("Voulez-vous vraiment supprimer cette ligne ?"))
            {
                $.ajax({
                    url: "{{ path('admin_musique_delete_tire') }}",
                    type: "GET",
                    dataType: "JSON",
                    data: {
                        "id": cabs
                    },
                    success: function () {
                        location.reload()
                    },
                })
            }
        });
    </script>
    <script>
        $('#resetBase').click(function() {
            if(confirm("Voulez-vous vraiment vider la base de donnée ?"))
            {
                $.ajax({
                    url: "{{ path('admin_reset_base') }}",
                    type: "GET",
                    dataType: "JSON",
                    success: function () {
                        location.reload()
                    },
                })
            }
        });
    </script>
    <script>
        $('.changeInscription').click(function() {
            {
                $.ajax({
                    url: "{{ path('admin_change_inscription') }}",
                    type: "GET",
                    dataType: "JSON",
                    success: function () {
                        location.reload()
                    },
                })
            }
        });
    </script>
    <script>
        function test(names) {
            $("#pick").click(function() {
                // Get a random name, the winner

                winner = "🎉" + " " + winner + " " + "🎉";

                // Display winner
                $("#world").addClass("open");
                $("#winner").addClass("open");
                $("#close").addClass("open");
                $("#winner").text(winner);
            });

            $("#close").click(function() {
                $("#world").removeClass("open");
                $("#winner").removeClass("open");
                $("#close").removeClass("open");
            });

            // Confetti
            (function() {
                var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;

                NUM_CONFETTI = 350;

                COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];

                PI_2 = 2 * Math.PI;

                canvas = document.getElementById("world");

                context = canvas.getContext("2d");

                window.w = 0;

                window.h = 0;

                resizeWindow = function() {
                    window.w = canvas.width = window.innerWidth;
                    return window.h = canvas.height = window.innerHeight;
                };

                window.addEventListener('resize', resizeWindow, false);

                window.onload = function() {
                    return setTimeout(resizeWindow, 0);
                };

                range = function(a, b) {
                    return (b - a) * Math.random() + a;
                };

                drawCircle = function(x, y, r, style) {
                    context.beginPath();
                    context.arc(x, y, r, 0, PI_2, false);
                    context.fillStyle = style;
                    return context.fill();
                };

                xpos = 0.5;

                document.onmousemove = function(e) {
                    return xpos = e.pageX / w;
                };

                window.requestAnimationFrame = (function() {
                    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
                        return window.setTimeout(callback, 1000 / 60);
                    };
                })();

                Confetti = class Confetti {
                    constructor() {
                        this.style = COLORS[~~range(0, 5)];
                        this.rgb = `rgba(${this.style[0]},${this.style[1]},${this.style[2]}`;
                        this.r = ~~range(2, 6);
                        this.r2 = 2 * this.r;
                        this.replace();
                    }

                    replace() {
                        this.opacity = 0;
                        this.dop = 0.03 * range(1, 4);
                        this.x = range(-this.r2, w - this.r2);
                        this.y = range(-20, h - this.r2);
                        this.xmax = w - this.r;
                        this.ymax = h - this.r;
                        this.vx = range(0, 2) + 8 * xpos - 5;
                        return this.vy = 0.7 * this.r + range(-1, 1);
                    }

                    draw() {
                        var ref;
                        this.x += this.vx;
                        this.y += this.vy;
                        this.opacity += this.dop;
                        if (this.opacity > 1) {
                            this.opacity = 1;
                            this.dop *= -1;
                        }
                        if (this.opacity < 0 || this.y > this.ymax) {
                            this.replace();
                        }
                        if (!((0 < (ref = this.x) && ref < this.xmax))) {
                            this.x = (this.x + this.xmax) % this.xmax;
                        }
                        return drawCircle(~~this.x, ~~this.y, this.r, `${this.rgb},${this.opacity})`);
                    }

                };

                confetti = (function() {
                    var j, ref, results;
                    results = [];
                    for (i = j = 1, ref = NUM_CONFETTI; (1 <= ref ? j <= ref : j >= ref); i = 1 <= ref ? ++j : --j) {
                        results.push(new Confetti);
                    }
                    return results;
                })();

                window.step = function() {
                    var c, j, len, results;
                    requestAnimationFrame(step);
                    context.clearRect(0, 0, w, h);
                    results = [];
                    for (j = 0, len = confetti.length; j < len; j++) {
                        c = confetti[j];
                        results.push(c.draw());
                    }
                    return results;
                };

                step();

            }).call(this);
        }

        $('#tirageBtn').click(function() {
            {
                $.ajax({
                    url: "{{ path('admin_tirage_musique') }}",
                    type: "GET",
                    dataType: "JSON",
                    success: function () {
                        location.reload()
                    },
                })
            }
        });
    </script>
{% endblock %}