@extends('layouts.admin')
@section('styles')
    <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')
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif
    <div class="card">
        <div class="card-header">
            Create Widget
        </div>
        <div class="card-body">
            <div class="form-group w-50">
                <label for="name">Name</label>
                <input id="name" class="form-control" type="text" name="name" placeholder="Name Widget">
            </div>
            <div class="form-group">
                <label for="type">Type</label>
                <select id="type" class="form-control" name="type">
                    <option value="-">-</option>
                    <option value="map">Map</option>
                    <option value="slider">Slider</option>
                    <option value="cmd_btn">Command Button</option>
                    <option value="single_stat">Single Stats</option>
                    <option value="line_chart">Line Chart</option>
                    <option value="bar_chart">Bar Chart</option>
                </select>
            </div>

            <div class="form-group">
                <button type="button" id="save" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>
    <div class="py-2">

    </div>
    <div class="row">
        <div class="col-8">
            <div class="card" style="height: 300px">
                <div class="card-header">
                    Preview
                </div>
                <div class="card-body" style="height: 100%">
                    <div id="previewTab" style="height: 100%">
                        <p align="center" class="text-secondary">Select Type...</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-header">
                    Config
                </div>
                <div class="card-body">
                    <div id="configTab">
                        
                    </div>
                    <button id="apply" type="button" class="btn btn-sm btn-success">Apply</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@php
$templateId = request()->get('templateId');
@endphp
@section('scripts')
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <script>
        const token = "{!! env("TOKEN_API") !!}";

        let device = {!! $device !!};
        let scriptSingleStat; 
        let scriptLineChart;
        
        // Generate HTML
        const sliderHtml = function(title, min, max, step) {
            return `<div class="slidecontainer"> <label for="auto-br">${title}</div></label> <input type="range" min="${min}" max="${max}" step="${step}" value="50" class="slider" id="myRange"> <small>Value: <span id="demo"></span></small> <div class="form-group mt-2"> <button id="pushBr" id="brightness" class="btn btn-success" type="button"> Apply Value </button> </div> </div>`;
        }

        const cmdBtnHtml = function(msg, desc){
            return `<div class="row"> <div class="col-md-12 m-1"> <button type="button" onclick='cmdSend(${JSON.stringify(msg)})' class="w-100 btn btn-primary">${desc}</button> </div></div>`
        }

        const singleStatHtml = function(id){
            return `<iframe id="${id}" src="https://grafana.fusi.id/d-solo/WN2cpepnk/seperate-widget?orgId=1&panelId=2&var-userId=3&var-deviceId=864593052286928&refresh=5s&var-field=br" width="100%" height="100%" frameborder="0"></iframe>`;
        }

        const lineChartHtml = function(id){
            return `<iframe id="${id}" src="https://grafana.fusi.id/d-solo/WN2cpepnk/seperate-widget?orgId=1&panelId=4&var-userId=3&var-deviceId=864593052286928&refresh=5s&var-field=br" width="100%" height="100%" frameborder="0"></iframe>`;
        }

        const mapWidget = `// Leaflet js
            var mymap = L.map('mapid').setView([device.lat, device.long], 12);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 16,
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(mymap);

            var greenIcon = new L.Icon({
                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

            var redIcon = new L.Icon({
                iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
                shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });

            if (device.status == 'on')
                var marker = L.marker([device.lat, device.long], {
                    icon: greenIcon
                }).addTo(mymap);
            else
                var marker = L.marker([device.lat, device.long], {
                    icon: redIcon
                }).addTo(mymap);
            marker.bindPopup(
                "<table>" +
                "<tbody>" +
                "<tr><td>S/N</td><td>: " + device.serial_number + "</td></tr>" +
                "<tr><td>Koordinat Peta</td><td>: <a href='https://www.google.com/maps/@" + device.lat + "," + device
                .long +
                ",13.09z?hl=id'>Buka Google Maps</a></td></tr>" +
                "</tbody>" +
                "</table>"
            );
        // end`;

        const sliderWidget = `var slider = document.getElementById("myRange");
            var output = document.getElementById("demo");
            output.innerHTML = slider.value;

            slider.oninput = function() {
                output.innerHTML = this.value;
                slider.value = this.value;
            };
            var url = "/api/v1/command/send";
            $("#pushBr").on('click', function() {
                $.ajax({
                    url: url,
                    type: "POST",
                    cache: false,
                    dataType: "json",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                        "Authorization": "Bearer ${token}",
                    },
                    data: JSON.stringify({
                        serial_number: device.serial_number,
                        message: {"setValue":slider.value}
                    }),
                    success: function(dataResult) {
                        dataResult = JSON.parse(dataResult);
                        if (dataResult.statusCode) {
                            alert('OK');
                        } else {
                            alert("Internal Server Error");
                        }
                    }
                });
            });`;

        const cmdBtnWidget = `
            const cmdSend = function(msg) {
                const newMsg = JSON.parse(msg);
                const serial_number = device.serial_number;
                const url = "/api/v1/admin/command/send";
                $.ajax({
                    url: url,
                    type: "POST",
                    cache: false,
                    dataType: "json",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                        "Authorization": "Bearer ${token}",
                    },
                    data: JSON.stringify({
                        serial_number: serial_number,
                        message: newMsg
                    }),
                    success: function(dataResult) {
                        dataResult = JSON.parse(dataResult);
                        if (dataResult.statusCode) {
                            alert('OK');
                        } else {
                            alert("Internal Server Error");
                        }

                    }
                });
        };`

        const singleStatWidget = function(id, field){
            scriptSingleStat = `$('#${id}').attr('src',"https://grafana.fusi.id/d-solo/WN2cpepnk/seperate-widget?orgId=1&panelId=4&var-userId="+user.id+"&var-deviceId="+device.serial_number+"&refresh=5s&var-field=${field}")`;
        }

        const lineChartWidget = function(id, field){
            scriptLineChart = `$('#${id}').attr('src',"https://grafana.fusi.id/d-solo/WN2cpepnk/seperate-widget?orgId=1&panelId=4&var-userId="+user.id+"&var-deviceId="+device.serial_number+"&refresh=5s&var-field=${field}")`;
        }

        // on change type
        $('#type').on('change', function() {
            const type = this.value;
            const previewTab = $("#previewTab");
            const configTab = $("#configTab");
            const device = {!! $device !!};
            if (type === "map") {
                // Preview Tab
                previewTab.empty();
                previewTab.append('<div id="mapid" style="height:100%;width:100%"></div>');
                var func = new Function(mapWidget);
                func();

                // Config Tab

                // end
            } else if (type === "slider") {
                // Preview Tab
                previewTab.empty();
                const html = sliderHtml("Set Br", 0, 100, 10);
                previewTab.append(html);
                var func = new Function(sliderWidget);
                func();
                // Config Tab
                configTab.empty();
                configTab.append(
                    '<div class="form-group"> <label for="title">Title</label> <input id="titleSlider" class="form-control" type="text"> </div> <div class="form-group"> <label for="min">Min Value</label> <input id="min" class="form-control" type="number"> </div> <div class="form-group"> <label for="max">Max Value</label> <input id="max" class="form-control" type="number"> </div> <div class="form-group"> <label for="step">Step Value</label> <input id="step" class="form-control" type="number"> </div>'
                    );
                $("#apply").on("click", function() {
                    const title = $("#titleSlider").val();
                    const min = $("#min").val();
                    const max = $("#max").val();
                    const step = $("#step").val();
                    const html = sliderHtml(title ? title : 'Set Br', min ? min : 0, max ? max : 100, step ?
                        step : 10);
                    previewTab.empty();
                    previewTab.append(html);
                    var func = new Function(sliderWidget);
                    func();
                });
            } else if(type === "cmd_btn"){
                // Preview Tab
                previewTab.empty();
                const msg = {};
                const html = cmdBtnHtml(msg, 'Description')
                previewTab.append(html);

                // Config Tab
                configTab.empty();
                configTab.append('<div class="form-group"> <label for="desc">Description</label> <input id="desc" class="form-control" type="text" name=""> </div> <div class="form-group"> <label for="msg">Message (JSON)</label> <pre><small class="text-secondary">Use ${variabel}</small></pre> <textarea id="msg" class="form-control" name="" rows="3"></textarea> </div>')
                $("#apply").on("click", function() {
                    const desc = $("#desc").val();
                    const msg = eval('`'+$("#msg").val()+'`');
                    previewTab.empty();
                    const html = cmdBtnHtml(msg, desc);
                    previewTab.append(html);
                });
            } else if(type === "single_stat"){
                // Preview Tab
                previewTab.empty();
                const field = "br"
                const id = Math.random().toString(36).slice(2);
                const codeHtml = singleStatHtml(`${id}`);
                const html = eval('`'+codeHtml+'`');
                previewTab.append(html);
                singleStatWidget(id, field);

                // Config Tab
                configTab.empty();
                configTab.append('<div class="form-group"> <label for="key">Key Attribute</label> <input id="key" class="form-control" type="text" name=""> </div>')
                $("#apply").on("click", function() {
                    const height = "100%";
                    const field = $("#key").val();
                    const userId = {!! auth()->id() !!}
                    const deviceId = device.serial_number;
                    previewTab.empty();
                    const codeHtml = singleStatHtml();
                    const html = eval('`'+codeHtml+'`');
                    previewTab.append(html);
                    singleStatWidget(id, field);
                });
            }else if(type === "line_chart"){
                // Preview Tab
                previewTab.empty();
                const field = "br"
                const id = Math.random().toString(36).slice(2);
                const codeHtml = lineChartHtml(`${id}`);
                const html = eval('`'+codeHtml+'`');
                previewTab.append(html);
                lineChartWidget(id, field);

                // Config Tab
                configTab.empty();
                configTab.append('<div class="form-group"> <label for="key">Key Attribute</label> <input id="key" class="form-control" type="text" name=""> </div>')
                $("#apply").on("click", function() {
                    const height = "100%";
                    const field = $("#key").val();
                    const userId = {!! auth()->id() !!}
                    const deviceId = device.serial_number;
                    previewTab.empty();
                    const codeHtml = lineChartHtml(`${id}`);
                    const html = eval('`'+codeHtml+'`');
                    previewTab.append(html);
                    lineChartWidget(id, field);
                });
            }
        });

        // on save
        $("#save").on("click", function() {
            if (confirm("Save this data ?")) {
                const templateId = {!! $templateId !!};
                const name = $("#name").val();
                const type = $("#type").val();
                save(templateId, name, type)
            } else {
                return false;
            }
        });

        function save(templateId, name, type) {
            const previewTab = $("#previewTab");
            let html = previewTab.html();
            let script;
            if (type === 'map') {
                html = `<div id="mapid" style="height:100%;width:100%"></div>`;
                script = mapWidget;
            }else if(type === "slider"){
                script = sliderWidget;
            }else if(type === "cmd_btn"){
                script = cmdBtnWidget.toString();
            }else if(type === "single_stat"){
                script = scriptSingleStat;
            }else if(type === "line_chart"){
                script = scriptLineChart;
            }

            $.ajax({
                type: 'POST',
                url: "{{ route('admin.widgets.store') }}",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    name: name,
                    template_id: templateId,
                    html: html,
                    script: script
                },
                success: function(data) {
                    location.reload() 
                }
            });
        }
    </script>
@endsection