<?php
    $this->Html->script( 'jquery.maphilight', array( 'inline' => false ) );
    echo $this->element( 'filter-start' );
    echo $this->element( 'Pages/quick-jump-menu', array(
        'geographic_filter' => 'province',
        'geographic_values' => $list_provinces,
        'geographic_slugs'  => $provinces,
    ) );
?>
<hr>
<?php
    echo $this->element( 'Pages/filters' );
    echo $this->element( 'filter-end' );
?>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="frontend-content">
                <?php echo $this->element('Pages/map-nav', array('current_entities' => 'people')); ?>

                <?php
                    $locationType = !empty( $this->request->query['filter_location_type'] ) ? $this->request->query['filter_location_type'] : 0;
                    echo $this->Html->image(
                        'icon-chart.png',
                        array(
                            'url'   => array(
                                'controller' => 'pages',
                                'action' => 'chartPeopleRegion',
                                'admin' => false,
                                $region['Region']['id'],
                                '?' => array(
                                    'filter_location_type' => $locationType,
                                ),
                            ),
                            'title' => __( 'ดูแผนภาพ' ),
                            'class' => 'icon-for-chart pull-right padding-left-10'
                        )
                    );
                    ?>
                    <?php echo $this->Html->image('service07.gif', array(
                            'url' => 'javascript:window.print()',
                            'class' => 'pull-right icon-for-chart',
                            'title' => __('พิมพ์แผนที่')
                        )); ?>
                <h2 class="frontend-content-title text-center"><?php echo $region['Region']['name']; ?></h2>
                <!-- map areas START -->
                <div class="map-size">
                    <?php echo $this->Html->image( 'thailand.png', array( 'usemap' => '#Map', 'class' => 'map') ); ?>
                    <map name="Map" id="map-provinces">
                        <?php foreach( $provinces_colors as $idProvince => $vProvinceColor ) : ?>
                            <?php
                                $title = $provinces[$idProvince]['name'];
                                $title .= ' (' . $vProvinceColor[0] . ')';
                            ?>
                            <area class="<?php echo $idProvince; ?>" shape="poly" usemap="#Map" href="<?php echo $this->Html->url( array( 'controller' => 'pages', 'action' => 'peopleMapProvinces', $provinces[$idProvince]['slug'] ) ); ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>" data-maphilight='{"alwaysOn": true, "fillOpacity": 0.7, "stroke": false, "fillColor":"<?php echo $vProvinceColor[1]; ?>"}' coords="<?php echo $provinces[$idProvince]['coords'] ?>" />
                        <?php endforeach; ?>

                        <?php foreach( $provinces_gray as $idProvince => $vProvinceGray ) : ?>
                            <area class="<?php echo $idProvince; ?>" shape="poly" usemap="#Map" alt="<?php echo $provinces[$idProvince]['name']; ?>" title="<?php echo $provinces[$idProvince]['name'] ?>" data-maphilight='{"alwaysOn": true, "fillOpacity": 0.7, "stroke": false, "fillColor":"<?php echo $color_gray; ?>"}' coords="<?php echo $provinces[$idProvince]['coords'] ?>" />
                        <?php endforeach; ?>
                    </map>
                </div>
                <!-- map areas END -->

                <div class="pull-right icon-for-chart icon-for-color">
                   <?php $map_color = Configure::read('MAP_COLORS');?>
                    <ul>
                        <li><div style="background-color: #<?php echo $map_color[4] ?>;"></div>มากที่สุด</li>
                        <li><div style="background-color: #<?php echo $map_color[3] ?>;"></div>มาก</li>
                        <li><div style="background-color: #<?php echo $map_color[2] ?>;"></div>ปานกลาง</li>
                        <li><div style="background-color: #<?php echo $map_color[1] ?>;"></div>น้อย</li>
                        <li><div style="background-color: #<?php echo $map_color[0] ?>;"></div>น้อยที่สุด</li>
                    </ul>                 
                </div>

            </div>
        </div>
        <div class="col-md-6">
            <div class="frontend-content">
                <h2 class="frontend-content-title text-center"><?php echo __('จำนวนสมาชิกเครือข่ายทั้งหมด'); ?></h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th><?php echo __('จังหวัด'); ?></th>
                           <!--  <th class="text-center"><?php echo __('จำนวน<br>เครือข่ายองค์กร'); ?></th> -->
                            <th class="text-center"><?php echo __('จำนวน<br>เครือข่ายบุคคล'); ?></th>
                            <!-- <th class="text-center"><?php echo __('จำนวน<br>กิจกรรม'); ?></th> -->
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ( $list_provinces as $kProvince => $vProvince) : ?>
                            <tr>
                                <td class="text-left"><?php echo $vProvince; ?></td>
                               <!--  <td class="text-center"><?php echo isset($rest_total[$kProvince]) ? $rest_total[$kProvince] : 0; ?></td> -->
                                <td class="text-center"><?php echo $provinces_colors[$kProvince][0]; ?></td>
                                <!-- <td class="text-center">99</td> -->
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div><!-- .col-md-6 -->
    </div><!-- .row -->
</div><!-- .container -->

<script>
    $(function() {
        $('.map').maphilight();
    });
</script>