@extends('layouts.app')
@section('style')
<link rel="stylesheet" href="https://gridstackjs.com/node_modules/gridstack/dist/gridstack.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-h5.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous">
</script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .full-height {
        min-height: 100vh;
    }

    .map-container {
        height: 100%;
        /* Fallback for vmin */
        padding: 0px 1rem 1rem 1rem;
        padding: 0px 1vmin 1vmin 1vmin;
    }

    .map-frame {
        height: 100%;
        width: 100%;
        /*   We use outline over border as has issues in some cases */
        outline: 1px solid black;
    }

    #map-id {
        height: 100%;
    }

</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="sidebar bg-light col-md-2 full-height">
            <div class="col my-2">
                <div class="py-3">
                    <input type="hidden" id="layout" value="{{ $layout->id }}">
                    <button class="btn btn-primary w-100 mb-2" data-toggle="modal" data-target="#exampleModal"
                        href="#">Add Widget</button>
                    <button class="btn btn-primary w-100 mb-2" onClick="saveGrid()" href="#">Save</button>
                    <button class="btn btn-primary w-100" onClick="grid.setStatic(false)" href="#">Edit</button>
                </div>
                <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
                    <div class="bg-danger text-white py-5">
                        <span>Drag here to remove!</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="bg-secondary col-md-10">
            <div class="grid-stack" style="width: 100%"></div>
        </div>
    </div>
</div>
@include('partials.modal-widget')
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://gridstackjs.com/demo/events.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
<script>
    $(document).ready(function() {
        $('.select2').select2();
    });
</script>
<script type="text/javascript">
    const products = {!! $products !!};
    let _token = $('meta[name="csrf-token"]').attr('content');
    let widget = [];
    let grid = GridStack.init({
        minRow: 5,
        float: false,
        cellHeight: 70,
        acceptWidgets: true,
        removable: "#trash",
        // old way, use global setupDragIn() instead
        // dragIn: '.sidebar .grid-stack-item', // add draggable to class
        // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
        staticGrid: false
    });
    addEvents(grid);

    let serializedData = {!! $widgets !!};
    function loadLayout(data){
        grid.load(data, true);
        data.forEach(function(e,k) {
            console.log(k);
            if(e.type == 'map'){
                let s = document.createElement("script");
                s.type = "text/javascript";
                s.innerHTML =
                    `var mymap${e.id} = L.map(${e.id}).setView(["-6.689612", "107.123541"], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19}).addTo(mymap${e.id});`;
                $("body").append(s);
                $(`#setting-${e.id}`).remove();
                $(".title-map").append(`<div id="setting-${e.id}" class="mx-2"><a onClick="settingMap('${k}')" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path></svg></a></div>`)
            }
        });
    }

    loadLayout(serializedData);
    GridStack.setupDragIn('.sidebar .grid-stack-item', {
        revert: 'invalid',
        scroll: false,
        appendTo: 'body',
        helper: 'clone'
    });

    saveGrid = function () {
        $('#loading').modal('show');
        setTimeout(function (){
            grid.setStatic(true);
            delete serializedFull;
            serializedData = grid.save();
            serializedData.forEach(function(e,k) {
                console.log(k);
                //jika typenya map ganti content nya
                if (e.type == "map") {
                    widget.push({
                        x: e.x,
                        y: e.y,
                        w: e.w,
                        h: e.h,
                        type: e.type,
                        id: e.id,
                        script: null,
                        attributes: e.attributes,
                        content: e.content
                    });
                }else if(e.type == "slider"){
                    widget.push({
                        x: e.x,
                        y: e.y,
                        w: e.w,
                        h: e.h,
                        type: e.type,
                        id: e.id,
                        script: null,
                        attributes: e.attributes,
                        content: e.content
                    });
                }else{

                }
            });
            jsonstring = JSON.stringify(widget);
            layout_id = $('#layout').val();
            $.ajax({
                url: "/dashboard/"+layout_id,
                type: "PUT",
                data: {
                    config: jsonstring,
                    _token: _token
                },
                success: function (response) {
                    console.log("Sukses Save : "+response);
                    $('#loading').modal('hide');
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }, 1000); // How long you want the delay to be, measured in milliseconds.
    }

</script>
<script type="text/javascript">
    function createMap() {
        let serializedData = grid.save();
        let mapID = serializedData.length+1;
        console.log(mapID);
        // widget.push({ x: 0, y: 0, w: 6, h: 6, type: "map", id: "mapid" + mapID, content: `<div class="grid-stack-item-content card"> <div class="card-header"> Map </div> <div class="card-body"> <div id="mapid${mapID}" style="width:100%;height:50vh"></div> </div> </div>` });
        let s = document.createElement("script");
        s.type = "text/javascript";
        s.innerHTML =
            `var mymap${mapID} = L.map(mapid${mapID}).setView(["-6.689612", "107.123541"], 8); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'OSM' }).addTo(mymap${mapID});`;
        grid.addWidget({
            x: 0,
            y: 0,
            w: 6,
            h: 6,
            type: "map",
            id: "mapid" + mapID,
            content: `<div class="card" style="height:100%;margin:0px;"> <div class="card-header title form-row">Map</div> <div class="card-body" style="height:100%"> <div id="mapid${mapID}" style="width:100%;height:100%"></div> </div> </div>`
        });
        $("body").append(s);
        $(".title").append('<div id="setting" class="mx-2"><a onClick="settingMap('+serializedData.length+')" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path></svg></a></div>')
    }

    function createSlider() {
        let serializedData = grid.save();
        let id = serializedData.length + 1;
        grid.addWidget({
            x: 0,
            y: 0,
            w: 4,
            h: 4,
            type: "slider",
            id: "slider" + id,
            content: `<div class="card" style="height:100%;margin:0px;"> <div class="card-header"> Slider </div> <div class="card-body" style="height:100%"> <div class="form-group"> <label for="formControlRange">Range Input</label> <input type="range" class="form-control-range" id="formControlRange"> <button class="btn btn-primary mt-3">Send</button> </div> </div> </div>`
        });
        // let s = document.createElement("script");
        // s.type = "text/javascript";
        // s.innerHTML =
        //     ``;
        // $("body").append(s);
    }
</script>
<script type="text/javascript">
    function settingMap(position) {
        $("#item_id").val(position);
        $("#type").val("map");
        $("#mapSetting").modal("show");
    }

    $("#save").on("click", function(){
        serializedData = grid.save();
        let item_id = $("#item_id").val();
        let type = $("#type").val();
        let title = $("#title").val();
        if(type == "map"){
            let position = $("#product").val();
            let data_key = $("#select2-"+position).val();
            let attribute;

            if(products[position]){
                // hanya bisa satu jenis produk
                let product_id = products[position].id;
                attribute = [{
                    "product_id":product_id,
                    "data_key":data_key
                }];
            }
            console.log(attribute);
            serializedData[item_id]['title'] = title ? title : 'Map';
            serializedData[item_id]['attributes'] = attribute ? attribute : [];
            serializedData[item_id]['content'] = `<div class="card" style="height:100%;margin:0px;"> <div class="card-header title form-row">${title ? title : 'Map'}</div> <div class="card-body" style="height:100%"> <div id="${serializedData[item_id]['id']}" style="width:100%;height:100%"></div> </div> </div>`
        }
        loadLayout(serializedData);
    });
</script>
<script type="text/javascript">
    $("#product").on('change', function(){
        $("#attibutesMap").empty();
        let position = $("#product").val();
        for(let a = 0; a < position.length; a++){
            $("#select"+position[a]).remove();
            if(products[position[a]]){
                let template = JSON.parse(products[position[a]].template);
                let html = `<div class="form-group"> <label for="key">${products[position[a]].name} Attribute</label> <select style="width:100%" class="form-control" id="select2-${position[a]}" name="attributes" multiple="multiple">`
                    for(let i = 0;i<template.length;i++){
                        html += `<option value="${template[i]}">${template[i]}</option>`;
                    }
                    html += `</select> </div>`;
                $("#attibutesMap").append(html)
                s = `<script id="select${position[a]}" type="text/javascript">$('#select2-${position[a]}').select2();`;
                $("body").append(s);
            }
        }
    });
</script>
@endsection