@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:
                    {{ $tower->towerSpaceUnits()->where('type', 'like', 'D%')->where('status', 'kosong')->count() }}</div>
                <div class="level level2">Kosong:
                    {{ $tower->towerSpaceUnits()->where('type', 'like', 'C%')->where('status', 'kosong')->count() }}</div>
                <div class="level level3">Kosong:
                    {{ $tower->towerSpaceUnits()->where('type', 'like', 'B%')->where('status', 'kosong')->count() }}</div>
                <div class="level level4">Kosong:
                    {{ $tower->towerSpaceUnits()->where('type', 'like', 'A%')->where('status', 'kosong')->count() }}</div>
                <img src="/img/tower.png" alt="">
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    {{ trans('global.show') }} {{ trans('cruds.tower.title') }}
                </div>

                <div class="card-body">
                    <div class="form-group">
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <th>
                                        {{ trans('cruds.tower.fields.id') }}
                                    </th>
                                    <td>
                                        {{ $tower->id }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Site Name
                                    </th>
                                    <td>
                                        <a
                                            href="{{ route('admin.sites.show', $tower->site->id) }}">{{ $tower->site->name ?? '' }}</a>
                                    </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>
                                <tr>
                                    <th>
                                        {{ trans('cruds.tower.fields.name') }}
                                    </th>
                                    <td>
                                        {{ $tower->name }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Jumlah Space Unit Kosong
                                    </th>
                                    <td>
                                        {{ $tower->towerSpaceUnits()->where('status', 'kosong')->count() }}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        Jumlah Space Unit Terisi
                                    </th>
                                    <td>
                                        {{ $tower->towerSpaceUnits()->where('status', 'isi')->count() }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    Peta Lokasi
                </div>
                <div class="card-body">
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs" role="tablist" id="relationship-tabs">
                <li class="nav-item active">
                    <a class="nav-link active" href="#space_units" role="tab" data-toggle="tab">
                        {{ trans('cruds.spaceUnit.title') }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#snapshots" role="tab" data-toggle="tab">
                        {{ trans('cruds.snapshot.title') }}
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" role="tabpanel" id="space_units">
                    @includeIf('admin.towers.relationships.towerSpaceUnits', [
                        'spaceUnits' => $tower->towerSpaceUnits,
                    ])
                </div>
                <div class="tab-pane" role="tabpanel" id="snapshots">
                    @includeIf('admin.towers.relationships.towerSnapshots', [
                        'snapshots' => $tower->towerSnapshots,
                    ])
                </div>
            </div>
        </div>
    </div>
@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