@extends('website::layouts.base')

@section('stylesheets')
    <!-- Plugin css -->
    <link href="{{ asset('simple-admin/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""></script>
@endsection

@section('content')

    <!-- asset detail section -->
    <section data-bs-version="5.1" class="image1 cid-sJgYP8toz5" id="image1-m">

        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-4">
                    <div class="image-wrapper">
                        @if($asset->asset_image)
                            <img src="{{ asset('storage/images/assets/medium/'. $asset->asset_image) }}" alt="asset-image">
                        @else
                            <img src="{{ asset('website/assets/images/no-image.jpg') }}" alt="asset-image">
                        @endif

                        <p class="mbr-description mbr-fonts-style pt-2 align-center display-4">
                            {{ $asset->asset_code }}</p>

                        <div class="mbr-section-btn align-center mt-3">
                            @auth
                                <a class="btn btn-info display-4" href="{{ route('assets.show', $asset->id) }}">
                                    <span class="mobi-mbri mobi-mbri-preview mbr-iconfont mbr-iconfont-btn"></span>View from Dashboard
                                </a>
                            @endauth
                            <a class="btn btn-primary display-4" href="{{ route('website.assets.show', $asset->id) }}#map">
                                <span class="mobi-mbri mobi-mbri mobi-mbri-map-pin mbr-iconfont mbr-iconfont-btn"></span>View Map Location
                            </a>
                            <button class="btn btn-warning display-4" onclick="sendAlert()">
                                <span class="mobi-mbri mobi-mbri-alert mbr-iconfont mbr-iconfont-btn"></span>Send Alert
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-8">
                    <div class="text-wrapper mbr-fonts-style">
                        <div class="row">
                            <div class="col-lg-4">
                                <!-- asset information -->
                                <div class="panel card panel-fill">
                                    <div class="card-header">
                                        <h5 class="font-16 m-1">Asset Information</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-4">
                                            <strong>Name</strong>
                                            <br>
                                            <p class="text-muted">{{ $asset->asset_name }}</p>
                                        </div>
                                        <div class="mb-4">
                                            <strong>Serial Number</strong>
                                            <br>
                                            <p class="text-muted">{{ $asset->asset_code }}</p>
                                        </div>
                                        <div class="mb-4">
                                            <strong>Type</strong>
                                            <br>
                                            <p class="text-muted">{{ $asset->assetType->name }}</p>
                                        </div>
                                        <div class="mb-4">
                                            <strong>Status</strong>
                                            <br>
                                            <p class="text-muted">{{ $asset->assetStatus->status }}</p>
                                        </div>
                                        <div class="mb-0">
                                            <strong>Description</strong>
                                            <br>
                                            <p class="text-muted mb-0">{{ $asset->description ?? "No description available"}}</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- /asset information -->
                            </div>
                            <div class="col-lg-8">
                                <!-- asset coordinates -->
                                <div class="panel card panel-fill">
                                    <div class="card-header">
                                        <h5 class="font-16 m-1">Coordinates</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-hover mails m-0 table table-actions-bar table-centered">
                                                <thead>
                                                    <tr>
                                                        <th>Latitude</th>
                                                        <th>Longitude</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    @foreach($asset->assetLocations as $coordinates)
                                                        <tr>
                                                            <td>
                                                                {{ $coordinates->latitude }}
                                                            </td>
                                                            <td>
                                                                {{ $coordinates->longitude }}
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!-- /asset coordinates -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /asset detail section -->

    <!-- map section -->
    <section data-bs-version="5.1" class="map1 cid-sJh3jYdxIe" id="map">
        <div class="container">
            <div class="mbr-section-head mb-4">
                <h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
                    <strong>Map Location</strong>
                </h3>
            </div>
            <div class="google-map" id="map-view" style="width: 100%; height:500px;"></div>
        </div>
    </section>
    <!-- map section -->
@endsection

@section('page_scripts')
    <script src="{{ asset('simple-admin/assets/custom/js/marker-styles.js') }}"></script>
    <script src="{{ asset('simple-admin/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script>

        var areas = [];
        var buildings = [];
        var sewerLines = [];
        var sewerPoints = [];
        var waterLines = [];
        var waterPoints = [];
        var popup = L.popup();

        $(document).ready(function () {
            loadMap();
        });

        function sendAlert() {
            Swal.fire({
                title: 'Please Provide Alert Message',
                input: 'textarea',
                inputAttributes: {
                    autocapitalize: 'off',
                    rows: '20',
                },
                showCancelButton: true,
                confirmButtonText: 'Send',
                confirmButtonColor: "#4DC765FF",
                showLoaderOnConfirm: true,
                preConfirm: (message) => {

                    return fetch(`{{ route('website.assets.show', $asset->id) }}/send-alert-message`,
                        {
                            method: "POST",
                            headers: {
                                'Content-type': 'application/json'
                            },
                            body: JSON.stringify({
                                _token: `{{ csrf_token()}}`,
                                company_id: `{{ $asset->company->id }}`,
                                message: message,
                                source: 'WEBSITE',
                                alert_status_id: 1
                            }),
                        }
                    ).then(response => {
                            if (!response.ok) {
                                throw new Error(response.statusText)
                            }
                            return response.json()
                        })
                        .catch(error => {
                            Swal.showValidationMessage(
                                `Request failed: ${error}`
                            )
                        })
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                var response = result.value;

                if (response.code === 201) {
                    Swal.fire({
                        title: "Alert Message Received!",
                        text: "Thank you for informing us. Your alert message has been successfully received",
                        type: "success",
                        confirmButtonColor: "#4DC765FF",
                    })
                } else {
                    Swal.fire({
                        type: "error",
                        title: "Error",
                        text: "An error occurred. Please try sending the message again",
                        confirmButtonColor: "#458bc4",
                    })
                }
            })
        }

        function loadMap() {
            //Setting the center of the map
            var center = [-15.392484, 28.329333];

            // Create the map
            var map = L.map('map-view', {
                minZoom: 15.4,
                maxZoom: 18
            }).setView(center, 15.4);


            // Set up the Open Street Map layer
            var OSM = L.tileLayer(
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
                    maxZoom: 22
                });

            OSM.addTo(map);

            var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
            });
            Esri_WorldImagery.addTo(map);

            var redIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/red-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var brownIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/brown-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var lilacIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/lilac-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var greenIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/green-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var purpleIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/purple-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            var greyIcon = L.icon({
                iconUrl: '{{ asset("website/assets/images/grey-icon.png") }}',

                iconSize:     [25, 41], // size of the icon
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });


            $.ajax({
                url: '{{ route('website.assets.asset.geojson', $asset->id) }}',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var features = response.features;

                    features.forEach(feature => {

                        var properties = feature.properties;
                        var assetName = properties.asset_name;
                        var assetCode = properties.asset_code;
                        var assetType = properties.asset_type.name

                        var displayStyle;
                        var layer;

                        switch (assetType) {
                            case "Area":
                                displayStyle = {style: areaStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                            case "Building":
                                displayStyle = {style: buildingStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                            case "Sewer Line":
                                displayStyle = {style: sewerStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                            case "Water Line":
                                displayStyle = {style: waterStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                            case "Fire Hydrant":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: redIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Borehole":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: brownIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Water Pump":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: lilacIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Water Tank":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: greenIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Pump House":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: greyIcon});
                                    }
                                }).addTo(map);
                                break;
                            case "Sewer Point":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: purpleIcon});
                                    }
                                }).addTo(map);
                                break;
                            default:
                                displayStyle = {style: waterPointStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                break;
                        }

                        layer.bindPopup(`

                                <div class="card-body">
                                    <div class="mb-1">
                                        <strong>Name: </strong> `+assetName+`
                                    </div>
                                    <div class="mb-1">
                                        <strong>Serial Number: </strong> `+assetCode+`
                                    </div>
                                    <div class="mb-1">
                                        <strong>Type: </strong> `+assetType+`
                                    </div>
                                </div>
`                       );

                        switch (assetType) {
                            case "Area":
                                areas.push(layer);
                                break;
                            case "Building":
                                buildings.push(layer);
                                break;
                            case "Sewer Line":
                                sewerLines.push(layer);
                                break;
                            case "Water Line":
                                waterLines.push(layer);
                                break;
                            case "Sewer Point":
                                sewerPoints.push(layer);
                                break;
                            case "Water Point":
                                waterPoints.push(layer);
                                break;
                            default:
                                waterLines.push(layer);
                                break;
                        }
                    });
                }
            });

            var baseMaps = {
                "OpenStreetMap": OSM,
                "ESRI  World Imnagery": Esri_WorldImagery
                //"Google Aerial":GoogleAerial,
                // "Google Roadmap":GoogleRoad,
                //"Google Terrain":GoogleTerrain,
                //"Google Hybrid":GoogleHybrid,
            };

            test = L.layerGroup(waterPoints)
            var overlayMaps = {
                "water point": L.layerGroup(waterPoints),
                "sewer line": L.layerGroup(sewerLines),
                "water line": L.layerGroup(waterLines),
                "building": L.layerGroup(buildings),
                "areas": L.layerGroup(areas),
                "sewer point": L.layerGroup(sewerPoints)
            };

            L.control.layers(baseMaps, overlayMaps).addTo(map);
        }
    </script>
@endsection