<?php
    $this->Html->script( 'jquery.maphilight', array( 'inline' => false ) );
    echo $this->element( 'filter-start' );
    echo $this->element( 'Pages/quick-jump-menu', array(
        'geographic_filter' => 'region',
        'geographic_values' => $list_regions,
        'geographic_slugs'  => $regions,
    ) );
?>
<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' => 'organizations')); ?>
                <div class="pull-right padding-left-10 icon-for-chart"><?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' => 'chartCountry',
                                'admin' => false,
                                '?' => array(
                                    'filter_location_type' => $locationType,
                                ),
                            ),
                            'title' => __( 'ดูแผนภาพ' ),
                        )
                    );
                ?></div>
                <?php echo $this->Html->image('icon_red_globe.png', array(
                                        'url' => array('controller' => 'foreign_organizations', 'action' => 'index'),
                                        'class' => 'pull-right padding-left-10 icon-for-chart',
                                        'title' => __('ดูเครือข่ายองค์กรต่างปรเทศ')
                                    )); ?>

                <?php echo $this->Html->image('service07.gif', array(
                    'url' => 'javascript:window.print()',
                    'class' => 'pull-right icon-for-chart',
                    'title' => __('พิมพ์แผนที่')
                )); ?>
                <h2 class="frontend-content-title map-topic text-center"><?php echo __('แผนที่แสดงความหนาแน่นองค์กรเครือข่ายทั่วประเทศ') ?></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_slugs[$idProvince]['name'];
                                $title .= ' (' . $vProvinceColor[0] . ')';
                             ?>
                            <area class="<?php echo $idProvince; ?>" shape="poly" usemap="#Map" href="<?php echo $this->Html->url( array( 'controller' => 'pages', 'action' => 'regions', $regions[$provinces_slugs[$idProvince]['region_id']]['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_slugs[$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> 
                    <?php /*
                    echo $this->Html->image( 'map-colors.jpg', array( 'class' => 'map-caption' ) );
                    */ ?>
                </div>
            </div>

            <?php echo $this->Html->image('icon-rss-feed.png', array(
                'url' => array('controller' => 'pages', 'action' => 'rss_feed'),
                'class' => 'pull-right padding-left-10 icon-for-chart',
                'title' => __('rss feed')
            )); ?>

        </div>
        <div class="col-md-6">
            <div class="frontend-content">
                <h2 class="frontend-content-title text-center"><?php echo __('จำนวนสมาชิกเครือข่ายทั้งหมด'); ?></h2>
                <?php //echo $this->element( 'Pages/summary-count', 'region_s' ); ?>
                <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>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        foreach ( $organizations_for_table as $id => $province) : ?>
                            <tr>
                                <td class="text-left"><?php echo $province['name']; ?></td>
                                <td class="text-center"><?php echo $province['total']; ?></td>
                                <td class="text-center"><?php echo $people_for_table[$id]['total']; ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div><!-- .col-md-6 -->
    </div><!-- .row -->
</div><!-- .container -->

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