@extends('layouts.app')
@section('style')
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css"
rel="stylesheet">
<style>

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.outerDivFull { margin:50px; } 

.switchToggle input[type=checkbox]{height: 0; width: 0; visibility: hidden; position: absolute; }
.switchToggle label {cursor: pointer; text-indent: -9999px; width: 70px; max-width: 70px; height: 30px; background: #d1d1d1; display: block; border-radius: 100px; position: relative; }
.switchToggle label:after {content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #fff; border-radius: 90px; transition: 0.3s; }
.switchToggle input:checked + label, .switchToggle input:checked + input + label  {background: #3e98d3; }
.switchToggle input + label:before, .switchToggle input + input + label:before {content: 'No'; position: absolute; top: 5px; left: 35px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #fff; }
.switchToggle input:checked + label:before, .switchToggle input:checked + input + label:before {content: 'Yes'; position: absolute; top: 5px; left: 10px; width: 26px; height: 26px; border-radius: 90px; transition: 0.3s; text-indent: 0; color: #fff; }
.switchToggle input:checked + label:after, .switchToggle input:checked + input + label:after {left: calc(100% - 2px); transform: translateX(-100%); }
.switchToggle label:active:after {width: 60px; } 
.toggle-switchArea { margin: 10px 0 10px 0; }
</style>
@endsection
@section('content')
<div class="container col-6 p-5">
    <div class="card">
        <div class="card-header">
            <strong>Settings</strong>
        </div>
        
        <div class="card-body">
            <div class="slidecontainer">
                <label for="auto-br">Set Brightness</label>
                <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
                <small>Value: <span id="demo"></span></small>
                <div class="form-group mt-2">
                    <button onclick="pushBrightness()" id="brightness" class="btn btn-success" type="submit">
                        Apply Value
                    </button>
                </div>
            </div>          
        </div>
    </div>

    <div class="m-2">
        &nbsp;
    </div>

    <div class="card">
        <div class="card-header">
            Set Periode
        </div>
        <div class="card-body">
            <p>Set Periode :</p>
                <div class="row">
                    <div class="col-md-3">
                        <button id="minute" onclick="setPeriode(1)" type="button" class="w-100 btn btn-primary mb-1">1 Minute</button>
                    </div>
                    <div class="col-md-3">
                        <button id="hour" onclick="setPeriode(2)" type="button" class="w-100 btn btn-primary mb-1">1 Hour</button>
                    </div>
                    <div class="col-md-3">
                        <button id="3hour" onclick="setPeriode(3)"type="button" class="w-100 btn btn-primary mb-1">3 Hour</button>
                    </div>
                    <div class="col-md-3">
                        <button id="6hour" onclick="setPeriode(4)" type="button" class="w-100 btn btn-primary mb-1">6 Hour</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <button id="12hour" onclick="setPeriode(5)" type="button" class="w-100 btn btn-primary mb-1">12 Hour</button>
                    </div>
                    <div class="col-md-3">
                        <button id="update" type="button" class="w-100 btn btn-warning mb-1"><i class="fa fa-refresh"></i> Update</button>
                    </div>
                </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            Map
        </div>
        <div class="card-body">
            <div id="mapid"></div>
        </div>
    </div>
</div>
@endsection