@extends('layouts.dashboard')
@section('style')
<style>
    h3 {
        font-family: 'Poppins', sans-serif;
    }

    .social-box .box {
        background: #FFF;
        border-radius: 10px;
        padding: 40px 10px;
        margin: 20px 0px;
        cursor: pointer;
        transition: all 0.5s ease-out;
    }

    .social-box .box:hover {
        box-shadow: 0 0 6px #4183D7;
    }

    .social-box .box .box-text {
        margin: 20px 0px;
        font-size: 15px;
        line-height: 30px;
    }

    .social-box .box .box-btn a {
        text-decoration: none;
        color: #4183D7;
        font-size: 16px;
    }

    .fa {
        color: #4183D7;
    }

</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
<link rel="stylesheet" href="https://gridstackjs.com/node_modules/gridstack/dist/gridstack.min.css" />
<script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-h5.js"></script>
<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="pr-3">
    {{-- Breadcrumb --}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/home" class="text-decoration-none text-dark">Home</a></li>
            <li class="breadcrumb-item">
              <a class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                  {{ $project->name }}
                <span class="caret"></span>
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                    <a class="dropdown-item" href="#">See all dashboard</a>
                    <hr>                    
                    <a class="dropdown-item" href="#">Add New</a>
                </div>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Device</li>
            @if ($layout)
            <li class="ml-auto">
                <a class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                    {{ $layout->name }}
                  <span class="caret"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                    <a class="dropdown-item" href="/dashboard/{{ $layout->id }}/edit?projectId={{ request()->get('projectId') }}">Setting</a>
                    <a class="dropdown-item" href="#">See all dashboard</a>
                    <hr>                    
                    <a class="dropdown-item" href="/dashboard/layouts/create?projectId={{ request()->get('projectId') }}">Add New</a>
                </div>
              </li>
            @endif 
          </ol>
    </nav>
    @if (!$layout)
        <div class="social-box">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-4 col-xs-12 text-center">
                        <a href="/dashboard/layouts/create?projectId={{ request()->get('projectId') }}" class="text-decoration-none text-dark">
                        <div class="box bg-white h-75">
                            <i class="fa fa-behance fa-3x" aria-hidden="true"></i>
                            <div class="box-title">
                                <svg width="50px" height="50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
                            </div>
                            <div class="box-text">
                                <h3>Add New Dashboard</h3>
                            </div>
                        </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="grid-stack" style="width: 100%;"></div>
    @endif
</div>
@endsection
@section('script')
<script>
    $("#menu-dashboard").addClass("active");
</script>
<script src="https://gridstackjs.com/demo/events.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://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
@if ($layout)
<script type="text/javascript">
    let widgets = {!! json_encode($layouts) !!};
    var devices = {!! $devices !!};
    let attributes = {!! json_encode($keys) !!}
    let grid = GridStack.init({
        minRow: 1,
        float: true,
        cellHeight: 70,
        acceptWidgets: false,
        // 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: true
    });
    addEvents(grid);
    grid.load(widgets, true);
    widgets.forEach(e => {
        if(e.type == 'map'){
            let s = document.createElement("script");
            s.type = "text/javascript";
            s.innerHTML =`var my${e.id} = L.map(${e.id}).setView([${devices[0].lat}, ${devices[0].long}], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19}).addTo(my${e.id});`
            $("body").append(s);
            for(let i=0;i<devices.length;i++){
                let s = document.createElement("script");
                s.type = "text/javascript";
                s.innerHTML =`var marker = L.marker([${devices[i].lat}, ${devices[i].long}]).addTo(my${e.id});marker.bindPopup('<b>${devices[i].serial_number}</b><table><tr><td>status</td><td>:</td><td>${devices[i].status}</td></tr>`;

                for(let i=0;i<attributes.length;i++){
                    let key = attributes[i];
                    s.innerHTML += `<tr><td>${key}</td><td>:</td><td>${attributes[key] ?? '0'}</td></tr>`
                }
                s.innerHTML +=`</table>');`;
                $("body").append(s);
            }
        }
    });
</script>
@endif
@endsection