<?php $__env->startSection('css'); ?>
<link rel='stylesheet' href='/css/datatables.min.css'>
<link rel='stylesheet' href='/css/stats.css'>
<link rel='stylesheet' href='/css/jquery-jvectormap.css'>
<link rel='stylesheet' href='/css/bootstrap-datetimepicker.min.css'>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div ng-controller="StatsCtrl" class="ng-root">
    <div class="stats-header bottom-padding">
        <h3>Stats</h3>
        <div class="row">
            <div class="col-md-3 col-md-offset-3 link-meta">
                <p>
                    <b>Short Link: </b>
                    <a target="_blank" href="<?php echo e(env('APP_PROTOCOL')); ?>/<?php echo e(env('APP_ADDRESS')); ?>/<?php echo e($link->short_url); ?>">
                        <?php echo e(env('APP_ADDRESS')); ?>/<?php echo e($link->short_url); ?>

                    </a>
                </p>
                <p>
                    <b>Long Link: </b>
                    <a target="_blank" href="<?php echo e($link->long_url); ?>"><?php echo e(str_limit($link->long_url, 50)); ?></a>
                </p>
                <?php /* <p>
                    <em>Tip: Clear the right date bound (bottom box) to set it to the current date and time. New
                    clicks will not show unless the right date bound is set to the current time.</em>
                </p> */ ?>
            </div>
            <div class="col-md-3">
                <form action="" method="GET">
                    <div class="form-group">
                        <div class='input-group date' id='left-bound-picker'>
                            <input type="text" class="form-control" name="left_bound">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class='input-group date' id='right-bound-picker'>
                            <input type="text" class="form-control" name="right_bound">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>

                    <input type="submit" value="Refresh" class="form-control">
                </form>
            </div>
        </div>
    </div>

    <div class="row bottom-padding">
        <div class="col-md-8">
            <h4>Traffic over Time</h4> (total: <?php echo e($link->clicks); ?>)
            <canvas id="dayChart"></canvas>
        </div>
        <div class="col-md-4">
            <h4>Traffic sources</h4>
            <canvas id="refererChart"></canvas>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h4>Map</h4>
            <div id="mapChart"></div>
        </div>
        <div class="col-md-6">
            <h4>Referers</h4>
            <table class="table table-hover" id="refererTable">
                <thead>
                    <tr>
                        <th>Host</th>
                        <th>Clicks</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($referer_stats as $referer): ?>
                        <tr>
                            <td><?php echo e($referer->label); ?></td>
                            <td><?php echo e($referer->clicks); ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>

        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>
<?php /* Load data */ ?>
<script>
// Load data
var dayData = JSON.parse('<?php echo json_encode($day_stats); ?>');
var refererData = JSON.parse('<?php echo json_encode($referer_stats); ?>');
var countryData = JSON.parse('<?php echo json_encode($country_stats); ?>');

// Load datepicker dates
var datePickerLeftBound = '<?php echo e($left_bound); ?>';
var datePickerRightBound = '<?php echo e($right_bound); ?>';
</script>

<?php /* Include extra JS */ ?>
<script src='/js/lodash.min.js'></script>
<script src='/js/chart.bundle.min.js'></script>
<script src='/js/datatables.min.js'></script>
<script src='/js/jquery-jvectormap.min.js'></script>
<script src='/js/jquery-jvectormap-world-mill.js'></script>
<script src='/js/moment.min.js'></script>
<script src='/js/bootstrap-datetimepicker.min.js'></script>
<script src='/js/StatsCtrl.js'></script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.base', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>