@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
    #map {
        height: 310px;
    }

    .con {
        max-width: 600px;
        position: relative;
    }

    .level {
        height: 20px;
        position: absolute;
    }    

    .dot-red {
        background: red;
        border-radius: 50%;
        height: 20px;
        position: absolute;
        width: 20px;
    }

    .dot-green {
        background: green;
        border-radius: 50%;
        height: 20px;
        position: absolute;
        width: 20px;
    }    

    .A1 {
        top: 10%;
        left: 10%;
    }

    .B1 {
        top: 10%;
        left: 25%;
    }

    .C1 {
        top: 10%;
        left: 40%;
    }

    .D1 {
        top: 10%;
        left: 55%;
    }

    .A2 {
        top: 25%;
        left: 10%;
    }

    .B2 {
        top: 25%;
        left: 25%;
    }

    .C2 {
        top: 25%;
        left: 40%;
    }

    .D2 {
        top: 25%;
        left: 55%;
    }

    .A3 {
        top: 40%;
        left: 10%;
    }

    .B3 {
        top: 40%;
        left: 25%;
    }

    .C3 {
        top: 40%;
        left: 40%;
    }

    .D3 {
        top: 40%;
        left: 55%;
    }

    .A4 {
        top: 55%;
        left: 10%;
    }

    .B4 {
        top: 55%;
        left: 25%;
    }

    .C4 {
        top: 55%;
        left: 40%;
    }

    .D4 {
        top: 55%;
        left: 55%;
    }   

    .level1 {
        top: 10%;
        left: 75%;
    }       

    .level2 {
        top: 25%;
        left: 75%;
    }       

    .level3 {
        top: 40%;
        left: 75%;
    }       

    .level4 {
        top: 55%;
        left: 75%;
    }       

    img {
        width: 100%;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-3 pb-4">
        <div class="con">
            @foreach($tower->towerSpaceUnits as $space_unit)
                @if($space_unit->status == 'isi')
                    <div class="dot-red {{ $space_unit->type }}"></div>
                @else
                    <div class="dot-green {{ $space_unit->type }}"></div>
                @endif
            @endforeach
            <div class="level level1">Kosong: ..</div>
            <div class="level level2">Kosong: ..</div>
            <div class="level level3">Kosong: ..</div>
            <div class="level level4">Kosong: ..</div>
            <img src="/img/tower.png" alt="">
        </div>
    </div>
    <div class="col-md-9">
        <div class="card">
            <div class="card-header">
                {{ trans('global.show') }} {{ trans('cruds.tower.title') }}
            </div>

            <div class="card-body">
                <div class="form-group">
                    <div class="form-group">
                        <a class="btn btn-default" href="{{ route('admin.towers.index') }}">
                            {{ trans('global.back_to_list') }}
                        </a>
                    </div>
                    <table class="table table-bordered table-striped">
                        <tbody>
                            <tr>
                                <th>
                                    {{ trans('cruds.tower.fields.id') }}
                                </th>
                                <td>
                                    {{ $tower->id }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.tower.fields.name') }}
                                </th>
                                <td>
                                    {{ $tower->name }}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    {{ trans('cruds.tower.fields.status') }}
                                </th>
                                <td>
                                    <span class="badge badge-success">Aktif</span>
                                    <!-- {{ $tower->status }} -->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div id="map"></div>
        </div>
    </div>
</div>

@includeIf('admin.towers.relationships.towerSpaceUnits', ['spaceUnits' => $tower->towerSpaceUnits])

@endsection

@section('scripts')
@parent
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
   <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script>
    var tower = {!! json_encode($tower) !!};

    var mymap = L.map('map').setView([tower.lat, tower.long], 6);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: '',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
    }).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]
    });

    var greyIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-grey.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 marker = new L.marker([tower.lat, tower.long], {
        icon: greenIcon
    }).addTo(mymap);

</script>
@endsection