<?php 
if(isset($report_type) && $report_type == "map"){
    echo $map['js']; 
}
?>
<style>
    #user_list tr.selected{
        background-color: #f6f6f6;
    }
</style>
<div class="row grid-margin">
    <input type="hidden" id="user_id" value="<?=$user_id?>">
	<?php
        $level = $this->session->userdata('level');
        if (isset($level) && $level != 3) {?>
		<div class="col-lg-3">
			<div class="card">
				<div class="card-body">
					<h4 class="card-title">Users</h4>
					<div class="table-responsive">
						<table class="table table-hover" id="user_list">
							<thead>
								<tr>
									<th>No</th>
									<th>User</th>
								</tr>
							</thead>
							<tbody>
								<?php
                                    foreach ($users as $user) {
                                        if($user_id == $user['id']){
                                            echo "<tr onclick='getPinsOfUser({$user['id']})' class='selected'>";
                                        }else{
                                            echo "<tr onclick='getPinsOfUser({$user['id']})'>";
                                        }
                                        echo "<td>{$user["id"]}</td>";
                                        echo "<td>{$user["user_name"]}</td>";
                                        echo "</tr>";
                                    }
                                ?>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<?php }?>
		<div <?php if (isset($level) && $level !=3 ) { echo "class='col-lg-9'"; } else { echo "class='col-lg-12'"; } ?>>
			<div class="card">
				<div class="card-body" style="height:500px">
					<div class="row">
                        <div style="display: flex; border: solid 1px #dddddd; border-radius: 2px; padding: 5px 10px 0px 10px;">
                            <div class="icheck-flat">
                                <input type="radio" id="is_map" name="report_type"  value="map" onclick="getPins()"
                                <?php 
                                    if(isset($report_type) && $report_type =="map"){
                                        echo "checked";
                                    }
                                ?>
                                />
                                <label for="is_map">Map</label>
                            </div>
                            <div class="icheck-flat" style="margin-left: 20px">
                                <input type="radio" id="is_list" name="report_type" value="list" onclick="getPins()"
                                <?php 
                                    if(isset($report_type) && $report_type =="list"){
                                        echo "checked";
                                    }
                                ?>/>
                                <label for="is_list">List</label>
                            </div>
                        </div>          

                        <div style="display: flex; border: solid 1px #dddddd; border-radius: 2px; padding: 5px 10px 0px 10px; margin-left:20px">  
                            <div class="icheck-flat">
                                <input type="radio" id="is_day" name="date_type" value="day" onclick="changeDateType('day')"
                                <?php 
                                    if(isset($date_type) && $date_type =="day"){
                                        echo "checked";
                                    }
                                ?>/>
                                <label for="is_list">Day</label>
                            </div>
                            <div class="icheck-flat" style="margin-left: 20px">
                                <input type="radio" id="is_week" name="date_type" value="week" onclick="changeDateType('week')"
                                <?php 
                                    if(isset($date_type) && $date_type =="week"){
                                        echo "checked";
                                    }
                                ?>/>
                                <label for="is_list">Week</label>
                            </div>
                            <div class="icheck-flat" style="margin-left: 20px">
                                <input type="radio" id="is_month" name="date_type" value="month" onclick="changeDateType('month')"
                                <?php 
                                    if(isset($date_type) && $date_type =="month"){
                                        echo "checked";
                                    }
                                ?>/>
                                <label for="is_list">Month</label>
                            </div>
                            <div class="icheck-flat" style="margin-left: 20px">
                                <input type="radio" id="is_period" name="date_type" value="period" onclick="changeDateType('period')"
                                <?php 
                                    if(isset($date_type) && $date_type =="period"){
                                        echo "checked";
                                    }
                                ?>/>
                                <label for="is_list">Custom Period</label>
                            </div>
                        </div>
					</div>
                    <div class="row" style="padding:10px">
                        <div class="col-md-2" id="col_year">
                            <select class="form-control" id="year" onchange="setWeekOptions()">
                                <?php 
                                    $year = date('Y');
                                    for($i = $year; $i < $year + 5; $i++){
                                        echo "<option value='{$i}'>{$i}</option>";
                                    }
                                ?>
                            </select>  
                        </div>
                        <div class="col-md-2" id="col_month">
                            <select class="form-control" id="month" onchange="setWeekOptions()">
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">Auguest</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>   
                        </div>
                        <div class="col-md-2" id="col_week">
                            <select class="form-control" id="week">
                            </select>
                        </div>
                        <div class="col-md-1 col_date" style="line-height: 30px">
                            <span>Date:<span>
                        </div>
                        <div class="col-md-3 col_date">
                            <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
                                <input type="text" class="form-control" id="date">
                                <div class="input-group-addon">
                                    <i class="icon-calendar"></i>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3" id="col_start">
                        <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
                                <input type="text" class="form-control" id="start">
                                <div class="input-group-addon">
                                    <i class="icon-calendar"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1 col_end" style="text-align:center; line-height: 30px">
                            ~
                        </div>
                        <div class="col-md-3 col_end">
                        <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
                                <input type="text" class="form-control" id="end">
                                <div class="input-group-addon">
                                    <i class="icon-calendar"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-success" onclick="getPins()">Show</button>
                        </div>

                    </div>
                    <?php 
                        if(isset($report_type) && $report_type == "map"){
                            echo $map['html']; 
                        }else{
                    ?>
                        <table class="table table-stripe" id="tbl_report">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Location</th>
                                    <th>Pinned Time</th>
                                </tr>
                                <tbody>
                                    <?php 
                                        $i = 1;
                                        foreach($list as $row){
                                            echo "<tr>";
                                            echo "<td>{$i}</td>";
                                            echo "<td>{$row["user_name"]}</td>";
                                            echo "<td>{$row["description"]}</td>";
                                            echo "<td>{$row["lat"]},{$row["lng"]}</td>";
                                            echo "<td>{$row["created_date"]}</td>";
                                            echo "</tr>";
                                            $i++;
                                        }
                                    ?>
                                </tbody>
                            </thead>
                        </table>
                    <?php }?>
				</div>
			</div>
		</div>
</div>

<script>
    <?php 
        if(isset($date_type)) {
            echo "changeDateType('{$date_type}');";
        }else{
            echo "changeDateType('');";
        }
        if(!isset($year)) {
            $year = date('Y');
        }

        if(!isset($month)) {
            $month = date('n');
        }

        if(!isset($date)) {
            $date = date('Y-m-d');
        }

        if(!isset($week)) {
            $week = 1;
        }

        if(!isset($start)) {
            $start = date('Y-m-d');
        }

        if(!isset($end)) {
            $end = date('Y-m-d');
        }
        echo "$('#year').val('{$year}');";
        echo "$('#month').val('{$month}');";
        echo "$('#week').val('{$week}');";
        echo "$('#date').val('{$date}');";
        echo "$('#start').val('{$start}');";
        echo "$('#end').val('{$end}');";

    ?>
	function getPinsOfUser(user_id) {
	    $("#user_id").val(user_id)
        getPins();
	}

    function weekCount(year, month_number) {

        // month_number is in the range 1..12

        var firstOfMonth = new Date(year, month_number-1, 1);
        var lastOfMonth = new Date(year, month_number, 0);

        var used = firstOfMonth.getDay() + lastOfMonth.getDate();
        console.log(firstOfMonth);
        return Math.ceil( used / 7);
    }

    function changeDateType(type){
        switch(type){
            case "day":
                $(".col_date").show();
                $("#col_year").hide();
                $("#col_month").hide();
                $("#col_week").hide();
                $("#col_start").hide();
                $(".col_end").hide();
                break;
            case "week":
                setWeekOptions();
                $(".col_date").hide();
                $("#col_year").show();
                $("#col_month").show();
                $("#col_week").show();
                $("#col_start").hide();
                $(".col_end").hide();
                break;
            case "month":
                $(".col_date").hide();
                $("#col_year").show();
                $("#col_month").show();
                $("#col_week").hide();
                $("#col_start").hide();
                $(".col_end").hide();
                break;
            case "period":
                $(".col_date").hide();
                $("#col_year").hide();
                $("#col_month").hide();
                $("#col_week").hide();
                $("#col_start").show();
                $(".col_end").show();
                break;
            default:
                $(".col_date").hide();
                $("#col_year").hide();
                $("#col_month").hide();
                $("#col_week").hide();
                $("#col_start").hide();
                $(".col_end").hide();
        }
    }

    function setWeekOptions(){
        $('#week').empty();
        var nWeeks = weekCount($("#year").val(), $("#month").val());
        for(var i=1; i< nWeeks+1; i++){
            $("#week").append("<option value='"+ i +"'>Week "+ i +"</option>");
        }
    }

    function getPins()
    {
        var user_id = $("#user_id").val();
        var reportType = $("#is_map").is(":checked") ? "map" : "list";

        if($("#is_day").is(":checked")){
            if($("#date").val() == "") {
                alert("Please select a date");
                return;
            }
            location.href = '<?=site_url("pins/get_pins_of_day/")?>' + user_id + "/" + reportType + "/" + $("#date").val();
        }else if($("#is_week").is(":checked")){
            location.href = '<?=site_url("pins/get_pins_of_week/")?>' + user_id + "/" + reportType + "/" + $("#year").val() + "/" + $("#month").val() + "/" + $("#week").val();
        }else if($("#is_month").is(":checked")){
            location.href = '<?=site_url("pins/get_pins_of_month/")?>' + user_id + "/" + reportType + "/" + $("#year").val() + "/" + $("#month").val();
        }else if($("#is_period").is(":checked")){
            if($("#start").val() == "" || $("#end").val() == "" || $("#end").val() < $("#start").val()) {
                alert("Please select valid period");
                return;
            }
            location.href = '<?=site_url("pins/get_pins_of_period/")?>' + user_id + "/" + reportType + "/" + $("#start").val() + "/" + $("#end").val();
        }else{
            location.href = '<?=site_url("pins/get_pins_of_user/")?>' + user_id + "/" + reportType;
        }
		
    }

</script>
