@extends('Modules.Admin.layouts.main')
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/fullcalendar.css')}}"/>
<link href="{{URL::to('src/css/flatWeatherPlugin.css')}}" rel="stylesheet" type="text/css" />
<link href="{{URL::to('src/css/jquery-ui.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{URL::to('src/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{URL::to('src/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
    <link rel="icon" href="{{URL::to('src/img/Dairycare.ico') }}">
    
     <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <link href="{{URL::to('src/css/switch/highlight.css')}}" rel="stylesheet">
<link href="{{URL::to('src/css/bootstrap-switch.min.css')}}" rel="stylesheet">
      <link href="{{URL::to('src/css/switch/main.css')}}" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="{{URL::to('src/css/fullcalendar.css')}}"/>
      <link href=" {{URL::to('src/fixed_datatable/css/jquery.dataTables.min.css')}}" rel="stylesheet" />
 <script src="{{URL::to('src/fixed_datatable/js/jquery.dataTables.min.js')}}" type="text/javascript"></script>


<title>Admin Dashboard</title>
<style>

			/* style the container however you please */
			#example {
				position:relative;
                display: block;
				color:#fff; 
				background: #000000;
				padding: 10px;
				margin: 30px auto;
				width: auto;
				border-radius: 1px;
			}

			/* styling for this page only, ignore */
			body {background: #95a5a6; font-family: sans-serif; background: #000000; padding: 0; margin: 0;}

		</style>
        
@section('main-content')
@if(Auth::user()->hasRole('Admin'))
 <link href="{{URL::to('src/css/css/AdminLTE.css') }}" rel="stylesheet" type="text/css" />
<link href=" {{URL::to('src/css/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{URL::to('src/css/jquery-ui.css')}}" rel="stylesheet" type="text/css" /> 
<link href="{{URL::to('src/plugins/iCheck/square/green.css')}}" rel="stylesheet" type="text/css">
<style>
        
       .x_panel{position:relative;width:100%;margin-bottom:10px;padding:10px 17px;display:inline-block;background:#fff;border:1px solid #E6E9ED;-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;column-break-inside:avoid;opacity:1;transition:all .2s ease}.x_title{border-bottom:2px solid #E6E9ED;padding:1px 5px 6px;margin-bottom:10px}.x_title .filter{width:40%;float:right}.x_title h2{margin:5px 0 6px;float:left;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.x_title h2 small{margin-left:10px}.x_title span{color:#BDBDBD}.x_content{padding:0 5px 6px;position:relative;width:100%;float:left;clear:both;margin-top:5px}.x_content h4{font-size:16px;font-weight:500}legend{padding-bottom:7px}.demo-placeholder{height:280px}
       .content-wrapper{
        min-height: 700px !important;
        background-image: url('img/upcomingevents.jpg');
    }
       .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{
           color:#dc3545;
       }
       .dataTables_wrapper .dataTables_info {
           clear: both;
           color: #dc3545;
           float: left;
           padding-top: 0.755em; }
       .dataTables_wrapper .dataTables_paginate {
           float: right;
           text-align: right;
           padding-top: 0.25em; }
       .dataTables_wrapper .dataTables_paginate .paginate_button {
           box-sizing: border-box;
           display: inline-block;
           min-width: 1.5em;
           padding: 0.5em 1em;
           margin-left: 2px;
           text-align: center;
           text-decoration: none !important;
           cursor: pointer;
           *cursor: hand;
           color: #dc3545 !important;
           border: 1px solid transparent;
           border-radius: 2px; }
       .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
           color: #dc3545 !important;
           border: 1px solid #73141d;
           background-color: #f1afb5;
           background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1afb5), color-stop(100%, #dc3545));
           /* Chrome,Safari4+ */
           background: -webkit-linear-gradient(top, #f1afb5 0%, #dc3545 100%);
           /* Chrome10+,Safari5.1+ */
           background: -moz-linear-gradient(top, #f1afb5 0%, #dc3545 100%);
           /* FF3.6+ */
           background: -ms-linear-gradient(top, #f1afb5 0%, #dc3545 100%);
           /* IE10+ */
           background: -o-linear-gradient(top, #f1afb5 0%, #dc3545 100%);
           /* Opera 11.10+ */
           background: linear-gradient(to bottom, #f1afb5 0%, #dc3545 100%);
           /* W3C */ }
       .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
           cursor: default;
           color: #666 !important;
           border: 1px solid transparent;
           background: transparent;
           box-shadow: none; }
       .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
           color: white !important;
           border: 1px solid #111111;
           background-color: #585858;
           background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
           /* Chrome,Safari4+ */
           background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
           /* Chrome10+,Safari5.1+ */
           background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
           /* FF3.6+ */
           background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
           /* IE10+ */
           background: -o-linear-gradient(top, #585858 0%, #111111 100%);
           /* Opera 11.10+ */
           background: linear-gradient(to bottom, #585858 0%, #111111 100%);
           /* W3C */ }
       .dataTables_wrapper .dataTables_paginate .paginate_button:active {
           outline: none;
           background-color: #2b2b2b;
           background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
           /* Chrome,Safari4+ */
           background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
           /* Chrome10+,Safari5.1+ */
           background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
           /* FF3.6+ */
           background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
           /* IE10+ */
           background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
           /* Opera 11.10+ */
           background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
           /* W3C */
           box-shadow: inset 0 0 3px #111; }
   
</style>



 <div class="row">
     <div class="form-group">

     </div>
 </div>
<div class="row">
    <div class="form-group">
        <div class="col-md-4 col-md-12 form-group">
            <div class="form-group"  id="example" style="margin-top: 0px; background-color:purple;min-height: auto;"></div>
        </div>
        <div class="col-md-8 col-sm-12" style="background-color: white;">
            <div class="table-responsive">
                <br>
            <table class="table table-bordered" width='100%' id="user_table" style="font-size: 14px;">
                <thead>
                  <tr>
                    <th style="text-align: center;">User</th>
                    <th style="text-align: center;">Roles</th>
                    <th style="text-align: center;">Last Logged In</th>
                    <th style="text-align: center;">Active</th>
                  </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                  <tr>

                      @if($user->online==1)
                      <td style="text-align: left;"><i class="fa fa-circle text-success"></i>&nbsp;{{$user->name}}</td>
                      @else
                          <td style="text-align: left;"><i class="fa fa-circle text-danger"></i>&nbsp;{{$user->name}}</td>

                      @endif

                    <td style="text-align: center;">{{$user->role}}</td>
                    <td style="text-align: center;">12:00 AM, Thu-1st-Jan-1970</td>
                    @if(Auth::user()->name==$user->name)
                        @if($user->block==1)
                        <td id="{{$user->id.'~'.$user->block}}" style="text-align: center;">
                            <input name="status" id="status" type="checkbox" data-on-color="success" data-off-color="danger"  data-size="mini" value="{{$user->id.'~'.$user->block}}" disabled>
                <!--                            <input type="button" name="status" id="status" onclick="changeStatus(this)" class="btn btn-danger" value="Disabled" /> -->
                        </td>
                        @else
                        <td id="{{$user->id.'~'.$user->block}}" style="text-align: center;">
                            <input name="status" id="status" type="checkbox" data-on-color="success"  data-off-color="danger" checked="unchecked" data-size="mini" value="{{$user->id.'~'.$user->block}}" disabled>
                        </td>
                        @endif
                    @else
                        @if($user->block==1)
                        <td id="{{$user->id.'~'.$user->block}}" style="text-align: center;">
                            <input name="status" id="status" type="checkbox" data-on-color="success" data-off-color="danger"  data-size="mini" value="{{$user->id.'~'.$user->block}}">
                <!--                            <input type="button" name="status" id="status" onclick="changeStatus(this)" class="btn btn-danger" value="Disabled" /> -->
                        </td>
                        @else
                        <td id="{{$user->id.'~'.$user->block}}" style="text-align: center;">
                            <input name="status" id="status" type="checkbox" data-on-color="success"  data-off-color="danger" checked="unchecked" data-size="mini" value="{{$user->id.'~'.$user->block}}">
                        </td>
                        @endif
                    @endif


                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
        </div>

    </div>
</div>
<div class="row">
    <div class="form-group">

        <div id='calendar' style="border: 1px solid #DDDDDD; background-color: white;margin: 50px 50px 50px 50px;">
            <div style="text-align: center;">
                <h3>Loading Calender....!</h3>
                <img  src="img/spinner.gif">
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="{{URL::to('src/js/moment.min.js') }}"></script>
 <script type="text/javascript" src="{{URL::to('src/js/calanderjquery.min.js') }}"></script>
    <script type="text/javascript" src="{{URL::to('src/js/fullcalendar.min.js') }}"></script>  


<script>
        $(document).ready(function() {
            var date = new Date();

            var yyyy = date.getFullYear().toString();
            var mm = (date.getMonth()+1).toString();
            var dd  = date.getDate().toString();
            var mmChars = mm.split('');
            var ddChars = dd.split('');
            
            var datestring = yyyy + '-' + (mmChars[1]?mm:"0"+mmChars[0]) + '-' + (ddChars[1]?dd:"0"+ddChars[0]);
            
            $.ajax({
                method: 'GET',
                url: '{{url("eventsdata")}}',
                data: {

                },
                dataType: 'json',
                success: function(response) {
                    $('#calendar').empty();
                    $('#calendar').fullCalendar({

                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,basicWeek,basicDay'
                        },
                        defaultDate: datestring,
                        editable: true,
                        eventLimit: true,
                        events: response
                    });
                }
            });
        });
        
        
    $('input').on('switchChange.bootstrapSwitch', function(event, state) {
        //alert(event);
        var y=this.value;
        var res = y.split("~");
        //console.log(y);
        if(state==true)
        {
            res[1]=0;
        }
        else
        {
            res[1]=1;
        }
        //console.log(res);
        $.ajax({
            method: 'GET',
            url: '{{route("change_user_block_status")}}',
            data: {
                id: res[0],
                status: res[1]

            },
            success: function(response)
            {
                
                if(state==true)
                {
                    var audio = new Audio('switch.mp3');
                }
                else
                {
                    var audio = new Audio('switch_off.mp3');
                }
                audio.play();
                //location.reload();
            },
            error: function (jqXHR, status, err) {
                //$('#editRuleModal .modal-body').append('<p id="edit_error" style=" color:red;"> Already Registered </p>');
            }

        });
        
//          console.log(this.value); // DOM element
//
//          console.log(event); // jQuery event
//
//          console.log(state); // true | false

    });
    
    </script>


<input type="hidden" value="{{$city.'~'.$country}}" id="location" name="location">
 <script type="text/javascript" src="{{URL::to('src/js/jquery-ui.min.js') }}"></script>
 <script src="{{URL::to('src/fixed_datatable/js/jquery.dataTables.min.js')}}" type="text/javascript"></script>


 <script src="{{URL::to('src/js/jquery.flatWeatherPlugin.min.js') }}" type="text/javascript"></script>
 <script src="{{URL::to('src/js/switch/highlight.js') }}"></script>
 <script src="{{URL::to('src/js/bootstrap-switch.min.js') }}" type="text/javascript"></script>
 <script src="{{URL::to('src/js/switch/main.js') }}"></script>
 <script type="text/javascript" src="{{URL::to('src/js/jquery.jticker.min.js') }}"></script>

 <script type="text/javascript">

     $(document).ready(function() {
         var table = $('#user_table').DataTable({
             "iDisplayLength": 8,
             "lengthMenu": [[8, 10, 25, 500, 1000, 2000, -1], [8, 10, 25, 500, 1000, 2000, "All"]]

         });
     });
     function startWeather() {
         $(document).ready(function() {
            /***                On the bases of IP Adress       ***/
             // $.ajax({
             //     method: 'GET',
             //     url: 'https://ipapi.co/json/',
             //     success: function(response)
             //     {
             //
             //         //var response = JSON.parse(response);
             //         console.log(response.city);
             //         //Setup the plugin, see readme for more examples
             //         var example = $("#example").flatWeatherPlugin({
             //             location:"Topi",
             //             country: response.country,
             //             api: "yahoo",
             //             displayCityNameOnly : false,
             //         });
             //     },
             //     error: function (jqXHR, status, err) {
             //         //$('#editRuleModal .modal-body').append('<p id="edit_error" style=" color:red;"> Already Registered </p>');
             //     }
             //
             // });

             var location=$("#location").val();
             var data=location.split('~');

             var example = $("#example").flatWeatherPlugin({
                 location:data[0],
                 country: data[1],
                 api: "openweathermap",
                 displayCityNameOnly : false,
             });

             //                    var xhttp = new XMLHttpRequest();
             //    xhttp.open("POST", "http://ip-api.com/json", false);
             //    //xhttp.setRequestHeader("Content-type", "application/json");
             //    xhttp.send();
             //    var response = JSON.parse(xhttp.responseText);
             //    console.log(response.city);
             //			//Setup the plugin, see readme for more examples
             //			var example = $("#example").flatWeatherPlugin({
             //			location: response.city,
             //			country: response.country,
             //			api: "yahoo",
             //			displayCityNameOnly : false,
             //			});

             var intervalID = window.setInterval(function() {
                 example.flatWeatherPlugin('fetchWeather').then(success);
             }, 2*60*1000); //call every two minutes

             //then handle the success and fail states of the fetchWeather promise
             function success(data) {
                 example.flatWeatherPlugin('render', data);
             }

             function error(data) {
                 example.flatWeatherPlugin('error', data);
             }
         });
     }
 </script>

 <script>

     function startPage() {
         //startTime();
         startWeather();
         //text();
     }
 </script>

 <script>

     function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
         //compatibility for firefox and chrome
         var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
         var pc = new myPeerConnection({
                 iceServers: []
             }),
             noop = function() {},
             localIPs = {},
             ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
             key;

         function iterateIP(ip) {
             if (!localIPs[ip]) onNewIP(ip);
             localIPs[ip] = true;
         }

         //create a bogus data channel
         pc.createDataChannel("");

         // create offer and set local description
         pc.createOffer().then(function(sdp) {
             sdp.sdp.split('\n').forEach(function(line) {
                 if (line.indexOf('candidate') < 0) return;
                 line.match(ipRegex).forEach(iterateIP);
             });

             pc.setLocalDescription(sdp, noop, noop);
         }).catch(function(reason) {
             // An error occurred, so handle the failure to connect
         });

         //listen for candidate events
         pc.onicecandidate = function(ice) {
             if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
             ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
         };
     }

     // Usage

     getUserIP(function(ip){
         // alert("Got IP! :" + ip);
     });
     function UserAction() {
         var xhttp = new XMLHttpRequest();
         xhttp.open("POST", "http://ip-api.com/json", false);
         //xhttp.setRequestHeader("Content-type", "application/json");
         xhttp.send();
         var response = JSON.parse(xhttp.responseText);
         console.log(response.city);
     }
     //UserAction();
     startWeather();
 </script>

@else
<h3>Insufficient Permission</h3>
@endif
@endsection