<?php
    require_once("../config.php");
    require_once("../lib/attributes.php");
    require_once("include.php");
    $numLand=5; // NRW
    $numRegbez=(isset($_GET['regbez'])) ? (int)$_GET['regbez'] : 1;
    $numKreis=(isset($_GET['kreis'])) ? (int)$_GET['kreis'] : 1;
    $numGemeinde=(isset($_GET['gemeinde'])) ? (int)$_GET['gemeinde'] : 1;
    $numJahr=2022;

    // Name, Population und Fläche der Gemeinde
    $result= $db->prepare("SELECT * FROM community WHERE ULAND=:land AND UREGBEZ=:regbez AND UKREIS=:kreis AND UGEMEINDE=:gemeinde");
    $result->bindParam(":land",$numLand);
    $result->bindParam(":regbez",$numRegbez);
    $result->bindParam(":kreis",$numKreis);
    $result->bindParam(":gemeinde",$numGemeinde);
    $result->execute();
    if ($row = $result->fetch(PDO::FETCH_ASSOC)) {
        $strName=$row['Name'];
        $numFlaeche=$row['Flaeche'];
        $numPopulation=$row['Einwohner'];
        $numRegbez=$row['UREGBEZ'];
        $numKreis=$row['UKREIS'];
        $numGemeinde=$row['UGEMEINDE'];
    } else {exit;}

    $strLocation=" AND ULAND=$numLand AND UREGBEZ=$numRegbez AND UKREIS=$numKreis AND UGEMEINDE=$numGemeinde ";
    $resultUnfallzahlen = get_unfallzahlen($numJahr,$strLocation);
    $resultUnfallart = get_unfallart($numJahr,$strLocation);
    $resultUnfalltyp = get_unfalltyp($numJahr,$strLocation);
    $resultBeteiligte = get_beteiligte($numJahr,$strLocation);
    $numGesamt=0;

?>
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Fahrrad-Unfallstatistik NRW</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css"/>
        <link rel="stylesheet" href="//cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

        <script src="../js/jquery.min.js"></script>
        <script src="//cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <style>
            .rechts {text-align:right;background-color:#eee;}
            .l {border-left: 1px solid black; }
        </style>
    </head>
    <body>
   
   <!--  Navbar -->
   <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Unfallkarte</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
   </button>
        <div class="collapse navbar-collapse" id="navbars">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="../index.php">Karte</a>
                </li>
                </ul>
            
            <div>
             <ul class="navbar-nav mr-auto right">
               <li class="nav-item active">
                    <a class="nav-link" href="index.php">Statistik <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../impressum.php">Impressum</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../datenschutz.php">Datenschutzerklärung</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- Ende Navbar -->

   
    <div class="container" style="margin-top:4em;">  
   <h1>Fahrradunfälle in <?=$strName?></h2>
   Einwohnerzahl:<?=$numPopulation?>&nbsp;&nbsp;  Fläche:<?=$numFlaeche?> km<sup>2</sup>

   <!-- Unfallzahlen        -->
   <h2>Unfallzahlen</h2>
    <div class="row">
        <div class="col-5">
            <table class="table table-sm">
                <?php
                 //DEBUG echo "<pre>"; print_r($resultUnfallzahlen);echo "</pre>";
                    $numGesamt=0;
                    foreach ($resultUnfallzahlen as $row) {  
                        echo "<tr><td>".$arrCategory[$row['UKATEGORIE']]."</td><td>".$row['anz']."</td></tr>\n";
                        $numGesamt+=$row['anz']; 
                    }
                    ?>
                    <tr><th>Gesamt</th><td><strong><?=$numGesamt?></strong></td></tr>
                </table>
                <table class="table table-sm">
                    <tr><th>Quote pro Tausend Einwohner</th><td><?= round($numGesamt/$numPopulation*1000,2) ?></td></tr>
                    <tr><th>Quote pro Fläche</th><td><?= round($numGesamt/$numFlaeche,1) ?> /km<sup>2</sup></td></tr>
                </table>
        </div>
        <div class="col-1"></div>
        <div class="col-6">
            <div id="c_unfallzahlen"></div>
        </div>
    </div>

    <!-- Unfallbeteilgte -->
    <div class="row">
        <div class="col-5">
            <h4>Unfallbeteiligte</h4>
            <table class='table table-sm'>
                <?php
                  // DEBUG: echo "<pre>"; print_r($resultBeteiligte);echo "</pre>";
                  foreach ($resultBeteiligte as $key => $numCount) {  
                     echo "<tr><td>".$arrBeteiligte[$key]."</td><td>".$numCount."</td></tr>\n"; 
                }
                ?>
            </table> 
        </div>
    </div>

    <!-- Unfalltyp -->
    <div class="row">
        <div class="col-5">
            <h4>Unfalltyp</h4>
            <table class='table table-sm'>
            <?php
                foreach ($resultUnfalltyp as $row) {  
                    echo "<tr><td>".$arrUnfalltyp[$row['UTYP1']]."</td><td>".$row['anz']."</td></tr>\n"; 
                }
            ?>
            </table>
        </div>
        <div class="col-7">
            <div id="c_unfalltyp"></div>
        </div>
    </div>

    <!-- Unfallarten  -->
    <div class="row">
        <div class="col-5">
            <h4>Unfallart</h4>
            <table class='table table-sm'>
            <?php
                foreach ($resultUnfallart as $row) {  
                   echo "<tr><td>".$arrUnfallart[$row['UART']]."</td><td>".$row['anz']."</td></tr>\n";
                }
            ?>  
            </table>     
        </div>
        <div class="col-7">
            <div id="c_unfallarten"></div>
        </div>
    </div>
</div>
</body>
<script>

Highcharts.chart('c_unfallzahlen', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Unfallzahlen',
        align: 'center'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Unfallzahlen',
        colorByPoint: true,
        data: <?= get_series($resultUnfallzahlen,$arrCategory,"UKATEGORIE") ?>
    }]
});


Highcharts.chart('c_unfallarten', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Unfallarten',
        align: 'center'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Unfallarten',
        colorByPoint: true,
        data: <?= get_series($resultUnfallart,$arrUnfallart,"UART") ?>
    }]
});


Highcharts.chart('c_unfalltyp', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Unfalltyp',
        align: 'center'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Unfallarten',
        colorByPoint: true,
        data: <?= get_series($resultUnfalltyp,$arrUnfalltyp,"UTYP1") ?>
    }]
});
</script>
</html>