@extends('base')

@section('content')
    @include('partials.step_navigation')

<style>
    .etat-centrales { padding: 0 15px 30px; }
    .etat-centrales .entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 10px 0 18px; padding-bottom: 10px; border-bottom: 3px solid #28a745; }
    .etat-centrales .entete h2 { font-size: 1.5rem; font-weight: 700; margin: 0; color: #28a745; }
    .etat-centrales .entete .sous-titre { color: #5d665f; font-size: .9rem; }
    .etat-centrales .resume { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .etat-centrales .filtre-etat { border: 1px solid #28a745; background: #fff; border-radius: 999px; padding: 4px 14px; font-weight: 600; font-size: .9rem; color: #218838; cursor: pointer; }
    .etat-centrales .filtre-etat:hover { background: #dff0d8; }
    .etat-centrales .filtre-etat.actif { background: #28a745; border-color: #28a745; color: #fff; }
    .etat-centrales .filtre-etat .nb { font-variant-numeric: tabular-nums; margin-left: 4px; opacity: .75; }

    .etat-centrales .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
    .etat-centrales .tuile { background: #fff; border: 1px solid #d3d8d2; border-radius: 8px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
    .etat-centrales .tuile.deconnectee, .etat-centrales .tuile.jamais { border-color: #b3261e; box-shadow: inset 4px 0 0 #b3261e; }
    .etat-centrales .tuile-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .etat-centrales .tuile-nom { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
    .etat-centrales .tuile-ville { color: #5d665f; font-size: .85rem; }
    .etat-centrales .pastille { flex: none; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
    .etat-centrales .pastille.connectee { background: #dcefe2; color: #1f7a3d; }
    .etat-centrales .pastille.deconnectee, .etat-centrales .pastille.jamais { background: #f8dcda; color: #b3261e; }
    .etat-centrales .communication { font-size: .85rem; color: #5d665f; }
    .etat-centrales .tuile.deconnectee .communication, .etat-centrales .tuile.jamais .communication { color: #b3261e; font-weight: 600; }
    .etat-centrales .volume { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
    .etat-centrales .volume small { font-size: .85rem; font-weight: 600; color: #5d665f; }
    .etat-centrales .versions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; border-top: 1px solid #e9ebe7; padding-top: 8px; }
    .etat-centrales .version { font-family: Consolas, monospace; font-size: .72rem; background: #f3f4f2; border-radius: 3px; padding: 1px 6px; color: #1d221f; }
    .etat-centrales .version-absente { font-size: .78rem; color: #8a938c; font-style: italic; }
    .etat-centrales .vide { color: #5d665f; padding: 30px; text-align: center; grid-column: 1 / -1; }
</style>

<div class="etat-centrales">
    <div class="entete">
        <div>
            <h2>État des centrales</h2>
            <div class="sous-titre">
                Déconnectée au-delà de {{ $seuil_minutes }} min sans communication · volume livré aujourd'hui, BL annulés exclus ·
                actualisé à <span id="heure_actualisation">--:--</span>
            </div>
        </div>
        <div class="resume">
            <button type="button" class="filtre-etat actif" data-etat="toutes">Toutes<span class="nb" id="nb_toutes">0</span></button>
            <button type="button" class="filtre-etat" data-etat="connectee">Connectées<span class="nb" id="nb_connectee">0</span></button>
            <button type="button" class="filtre-etat" data-etat="deconnectee">Déconnectées<span class="nb" id="nb_deconnectee">0</span></button>
            <a href="{{ url('centrale') }}" class="btn btn-sm btn-success">Liste des centrales</a>
        </div>
    </div>

    <div class="grille" id="grille_centrales">
        <div class="vide">Chargement des centrales…</div>
    </div>
</div>

<script>
    $(function() { // Dom ready

        $('title').text("ÉTAT DES CENTRALES - SMART CENTRAL");

        var filtre = 'toutes';
        var centrales = [];

        var libelles_etat = {
            connectee: 'Connectée',
            deconnectee: 'Déconnectée',
            jamais: 'Jamais connectée'
        };

        function echapper(texte) {
            return $('<div>').text(texte == null ? '' : texte).html();
        }

        function formater_volume(volume) {
            return Number(volume).toLocaleString('fr-FR', { minimumFractionDigits: 0, maximumFractionDigits: 1 });
        }

        function tuile(c) {
            var communication;
            if (c.etat === 'jamais') {
                communication = 'Aucune communication reçue';
            } else if (c.etat === 'deconnectee') {
                communication = 'Silencieuse ' + echapper(c.depuis) + ' (' + echapper(c.derniere_communication) + ')';
            } else {
                communication = 'Dernière communication ' + echapper(c.depuis);
            }

            var versions = [
                ['Gestion', c.version_gestion],
                ['Process', c.version_process],
                ['Automate', c.version_automate],
                ['Trans CM web', c.version_trans_cm_web],
                ['BHP', c.version_bhp]
            ].filter(function (v) { return v[1]; })
             .map(function (v) { return '<span class="version" title="' + v[0] + '">' + v[0] + ' ' + echapper(v[1]) + '</span>'; })
             .join('');

            return '<div class="tuile ' + c.etat + '">' +
                '<div class="tuile-haut">' +
                    '<div><div class="tuile-nom">' + echapper(c.code) + ' ' + echapper(c.nom) + '</div>' +
                    '<div class="tuile-ville">' + echapper(c.ville) + '</div></div>' +
                    '<span class="pastille ' + c.etat + '">' + libelles_etat[c.etat] + '</span>' +
                '</div>' +
                '<div class="communication">' + communication + '</div>' +
                '<div class="volume">' + formater_volume(c.volume_jour) + ' <small>m³ · ' + c.nb_bl_jour + ' BL</small></div>' +
                '<div class="versions">' + (versions || '<span class="version-absente">Versions non transmises</span>') + '</div>' +
            '</div>';
        }

        function afficher() {
            var liste = centrales.filter(function (c) {
                if (filtre === 'toutes') return true;
                if (filtre === 'connectee') return c.etat === 'connectee';
                return c.etat !== 'connectee';
            });

            $('#grille_centrales').html(
                liste.length ? liste.map(tuile).join('') : '<div class="vide">Aucune centrale dans cet état.</div>'
            );
        }

        function charger() {
            $.getJSON('{{ url('centrale/etat_connexion/donnees') }}', function (retour) {
                centrales = retour.centrales;
                // Les centrales déconnectées en premier, pour qu'elles sautent aux yeux
                centrales.sort(function (a, b) {
                    return (a.etat === 'connectee') - (b.etat === 'connectee');
                });

                var nb_connectee = centrales.filter(function (c) { return c.etat === 'connectee'; }).length;
                $('#nb_toutes').text(centrales.length);
                $('#nb_connectee').text(nb_connectee);
                $('#nb_deconnectee').text(centrales.length - nb_connectee);
                $('#heure_actualisation').text(retour.heure);

                afficher();
            });
        }

        $('.filtre-etat').click(function (e) {
            e.preventDefault();
            $('.filtre-etat').removeClass('actif');
            $(this).addClass('actif');
            filtre = $(this).data('etat');
            afficher();
        });

        charger();
        setInterval(charger, 60000);
    });
</script>

@endsection