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

@section('stylesheets')
    <link rel="stylesheet" href="{{ asset('website/assets/parallax/jarallax.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>

    <!-- Plugin css -->
    <link href="{{ asset('simple-admin/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

    <!-- header section -->
    <section data-bs-version="5.1" class="header1 cid-s48MCQYojq mbr-fullscreen mbr-parallax-background" id="header1-f">

        <div class="mbr-overlay" style="opacity: 0; background-color: rgb(255, 255, 255);"></div>

        <div class="align-center container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-8">
                    <h1 class="mbr-section-title mbr-fonts-style mb-3 display-1"><strong>UNZA Water and Sewer Networks System</strong></h1>

                    <p class="mbr-text mbr-fonts-style display-7">For easy management and monitoring of sewer networks and water facilities at the University of Zambia</p>
                    <div class="mbr-section-btn mt-3">
                        <a class="btn btn-success display-4" href="{{ route('website.home') }}#map">
                            <span class="mobi-mbri mobi-mbri-map-pin mbr-iconfont mbr-iconfont-btn"></span>View Map
                        </a>
                        <a class="btn btn-warning display-4" href="{{ route('website.home') }}#search-asset">
                            <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span>Search
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /header section -->

    <!-- search section -->
    <section data-bs-version="5.1" class="form2 cid-sJh7eqmnvq" id="search-asset">
        <div class="align-center container">
            <div class="row justify-content-center">
                <div class="col-lg-8 mx-auto mbr-form" data-form-type="formoid">
                    {!! Form::open(['route' => ['website.search.serial'], 'method' => 'GET', 'class' => 'mbr-form form-with-styler', 'id' => 'searchAssetForm', 'data-form-title' => 'Asset Search']) !!}

                        <div class="dragArea row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <h1 class="mbr-section-title mb-4 display-2">
                                    <strong>Search</strong>
                                </h1>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <p class="mbr-text mbr-fonts-style mb-5 display-7">Enter the serial number or scan the asset QR code</p>
                            </div>
                            <div class="col-lg col-md col-12 form-group mb-3" data-for="serial_number">
                                {{ Form::text('serial_number', '', ['class' => 'form-control', 'id' => 'serial_number', 'autocomplete' => 'off', 'placeholder' => 'Enter serial number', 'data-form-field' => 'Serial Number', 'required']) }}
                            </div>
                            <div class="mbr-section-btn col-md-auto col">
                                <button type="submit" id="submitSerialNumberButton" class="btn btn-warning display-4">Search!</button>
                            </div>
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </section>
    <!-- /search section -->

    <!-- about section -->
    <section data-bs-version="5.1" class="features1 cid-sJhCgux1DA" id="about">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-9">
                    <h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
                        <strong>About</strong>
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="card col-12 col-md-6 col-lg-3">
                    <div class="card-wrapper">
                        <div class="card-box align-center">
                            <div class="iconfont-wrapper">
                                <span class="mbr-iconfont mobi-mbri-search mobi-mbri"></span>
                            </div>
                            <h5 class="card-title mbr-fonts-style display-7"><strong>Easy Identification</strong></h5>
                            <p class="card-text mbr-fonts-style display-7">Be able to identify and have knowledge of water infrastructure
                            distributed around UNZA area</p>
                        </div>
                    </div>
                </div>
                <div class="card col-12 col-md-6 col-lg-3">
                    <div class="card-wrapper">
                        <div class="card-box align-center">
                            <div class="iconfont-wrapper">
                                <span class="mbr-iconfont mobi-mbri-alert mobi-mbri"></span>
                            </div>
                            <h5 class="card-title mbr-fonts-style display-7"><strong>Send Alerts</strong></h5>
                            <p class="card-text mbr-fonts-style display-7">Notify and send alerts easily and efficiently if you notice
                            any damages or anomaly</p>
                        </div>
                    </div>
                </div>
                <div class="card col-12 col-md-6 col-lg-3">
                    <div class="card-wrapper">
                        <div class="card-box align-center">
                            <div class="iconfont-wrapper">
                                <span class="mbr-iconfont mobi-mbri-info mobi-mbri"></span>
                            </div>
                            <h5 class="card-title mbr-fonts-style display-7"><strong>News and Information</strong></h5>
                            <p class="card-text mbr-fonts-style display-7">Gives you first hand news and information of any activities existing
                            around UNZA</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- /about 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</strong>
                </h3>
            </div>
            <div class="google-map" id="map-view" style="width: 100%; height:500px;"></div>
        </div>
    </section>
    <!-- map section -->

    <!-- asset statistics section -->
    <section data-bs-version="5.1" class="countdown4 cid-sJhCwXjNwW mbr-fullscreen mbr-parallax-background" id="countdown4-12">
        <div class="mbr-overlay" style="opacity: 0.4; background-color: rgb(68, 121, 217);">
        </div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <h3 class="mbr-section-title mb-5 align-center mbr-fonts-style display-2">
                        <strong>News and Information</strong>
                    </h3>

                    <div class="align-center mb-5">
                        <div class="daysCountdown col-xs-3 col-sm-3 col-md-3" title="Sewer Lines"></div>
                        <div class="hoursCountdown col-xs-3 col-sm-3 col-md-3" title="Sewer Points"></div>
                        <div class="minutesCountdown col-xs-3 col-sm-3 col-md-3" title="Water Points"></div>
                        <div class="secondsCountdown col-xs-3 col-sm-3 col-md-3" title="Water Lines"></div>
                        <div class="countdown" data-due-date="2021/01/01"></div>
                    </div>
                    <p class="mbr-text mb-5 align-center mbr-fonts-style display-7">
                        Follow us online and be the first to know of any events or activities about to take place.
                    </p>


                </div>
            </div>
        </div>
    </section>
    <!-- /asset statistics section -->

    <!-- contact section -->
    <section data-bs-version="5.1" class="contacts2 cid-sJhDuqxAjj" id="contacts">
        <div class="container">
            <div class="mbr-section-head">
                <h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
                    <strong>Contacts</strong>
                </h3>

            </div>
            <div class="row justify-content-center mt-4">
                <div class="row col-12 col-md-4">
                    <div class="row justify-content-center mt-4">
                        <div class="col-lg-12 mx-auto mbr-form" data-form-type="formoid">
                             {!! Form::open(['route' => ['website.send.enquiry.message'], 'method' => 'POST', 'class' => 'mbr-form form-with-styler mx-auto', 'id' => 'contactUsForm', 'data-form-title' => 'Contact Us']) !!}

                                <div class="dragArea row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3" data-for="name">
                                        {{ Form::text('name', '', ['class' => 'form-control', 'id' => 'name', 'autocomplete' => 'off', 'placeholder' => 'Your Name', 'data-form-field' => 'Name', 'required']) }}
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3" data-for="email">
                                        {{ Form::email('email', '', ['class' => 'form-control', 'id' => 'email', 'autocomplete' => 'off', 'placeholder' => 'Your Email', 'data-form-field' => 'Email', 'required']) }}
                                    </div>
                                    <div data-for="message" class="col-lg-12 col-md-12 col-sm-12 form-group mb-3">
                                        {{ Form::textarea('message', '', ['class' => 'form-control', 'id' => 'message', 'rows' => '10', 'autocomplete' => 'off', 'placeholder' => 'Your Message', 'data-form-field' => 'Message', 'required']) }}
                                    </div>
                                    <div class="col-auto mbr-section-btn align-center">
                                        <button type="submit" id="submitMessageButton" class="btn btn-primary display-4">Submit</button>
                                    </div>
                                </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
                <div class="row col-12 col-md-8">
                    <div class="card col-12 col-md-6">
                        <div class="card-wrapper">
                            <div class="image-wrapper">
                                <span class="mbr-iconfont mobi-mbri-phone mobi-mbri"></span>
                            </div>
                            <div class="text-wrapper">
                                <h6 class="card-title mbr-fonts-style mb-1 display-5">
                                    <strong>Phone</strong>
                                </h6>
                                <p class="mbr-text mbr-fonts-style display-7">
                                    <a href="tel:+12345678910" class="text-primary">0 (800) 123 45 67</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card col-12 col-md-6">
                        <div class="card-wrapper">
                            <div class="image-wrapper">
                                <span class="mbr-iconfont mobi-mbri-letter mobi-mbri"></span>
                            </div>
                            <div class="text-wrapper">
                                <h6 class="card-title mbr-fonts-style mb-1 display-5">
                                    <strong>Email</strong>
                                </h6>
                                <p class="mbr-text mbr-fonts-style display-7">
                                    <a href="mailto:info@site.com" class="text-primary">info@unza.zm</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card col-12 col-md-6">
                        <div class="card-wrapper">
                            <div class="image-wrapper">
                                <span class="mbr-iconfont mobi-mbri-globe mobi-mbri"></span>
                            </div>
                            <div class="text-wrapper">
                                <h6 class="card-title mbr-fonts-style mb-1 display-5">
                                    <strong>Address</strong>
                                </h6>
                                <p class="mbr-text mbr-fonts-style display-7">
                                    4100 Ross Street, Okawville, IL
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card col-12 col-md-6">
                        <div class="card-wrapper">
                            <div class="image-wrapper">
                                <span class="mbr-iconfont mobi-mbri-bulleted-list mobi-mbri"></span>
                            </div>
                            <div class="text-wrapper">
                                <h6 class="card-title mbr-fonts-style mb-1 display-5">
                                    <strong>Working Hours</strong>
                                </h6>
                                <p class="mbr-text mbr-fonts-style display-7">
                                    9:00 - 18:00
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /contact 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 fireHydrants = [];
        var boreHoles = [];
        var waterPumps = [];
        var waterTanks = [];
        var pumpHouses=  [];
        var baseUrl = '{{ route('website.assets.manage') }}';

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

        //search asset function
        function searchAsset() {

            $("#searchAssetForm")[0].reset();

            //submit coordinates form function
            $("#searchAssetForm").unbind('submit').bind('submit', function() {

                var serialNumber = $("#serial_number").val();

                if(serialNumber){
                    var form = $(this);

                    //button loading
                    $("#submitSerialNumberButton").button('loading');

                    $.ajax({
                        url : form.attr('action'),
                        type: form.attr('method'),
                        data: form.serialize(),
                        dataType: 'json',
                        success:function(response) {

                            // button loading
                            $("#submitSerialNumberButton").button('reset');

                            if(response.code === 200) {

                                var asset = response.data;
                                var assetId = asset.id;
                                var assetName = asset.asset_name;
                                var assetCode = asset.asset_code;
                                var assetType = asset.asset_type.name;
                                var assetUrl = baseUrl+'/'+assetId

                                Swal.fire({
                                    title: "Asset Found!",
                                    html:
                                        '<p style="margin-top: 20px"><b>Name: </b> '+ assetName +
                                        '<p><b>Serial Number: </b> ' + assetCode +
                                        '<p><b>Type: </b> '+ assetType,
                                    text: "You clicked the button!",
                                    type: "success",
                                    confirmButtonColor: "#4DC765FF",
                                    footer: '<a href="'+assetUrl+'">View Details</a>'
                                })
                            } // if

                        } ,// /success
                        error: function (response) {
                            Swal.fire({
                                type: "error",
                                title: "Asset not Found",
                                text: ""+ response.responseJSON.error,
                                confirmButtonColor: "#E5B43BFF",
                            })
                        }
                    });// ajax
                }

                return false;
            });//submit coordinates form function
        }
        //search asset function

        //send enquiry message function
        function sendEnquiryMessage() {

            $("#contactUsForm")[0].reset();

            //submit coordinates form function
            $("#contactUsForm").unbind('submit').bind('submit', function() {

                var name = $("#name").val();
                var email = $("#email").val();
                var message = $("#message").val();

                if(name && email && message){
                    var form = $(this);

                    //button loading
                    $("#submitMessageButton").button('loading');

                    $.ajax({
                        url : form.attr('action'),
                        type: form.attr('method'),
                        data: form.serialize(),
                        dataType: 'json',
                        success:function(response) {

                            // button loading
                            $("#submitMessageButton").button('reset');

                            if(response.code === 201) {

                                $("#contactUsForm")[0].reset();

                                Swal.fire({
                                    title: "Message Received!",
                                    text: "Thank you for contacting us. Your message has been successfully received",
                                    type: "success",
                                    confirmButtonColor: "#4DC765FF",
                                })
                            } // if

                        } ,// /success
                        error: function (response) {
                            Swal.fire({
                                type: "error",
                                title: "Error",
                                text: "An error occurred. Please try sending the message again",
                                confirmButtonColor: "#458bc4",
                            })
                        }
                    });// ajax
                }

                return false;
            });//submit coordinates form function
        }
        //send enquiry message function

        //load map function
        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.geojson') }}',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    var features = response.features;

                    features.forEach(feature => {

                        var properties = feature.properties;
                        var assetId = properties.id;
                        var assetName = properties.asset_name;
                        var assetCode = properties.asset_code;
                        var assetType = properties.asset_type.name
                        var viewUrl = baseUrl+'/'+assetId;

                        var displayStyle;
                        var layer;

                        switch (assetType) {
                            case "Area":
                                displayStyle = {style: areaStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                areas.push(layer);
                                break;
                            case "Building":
                                displayStyle = {style: buildingStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                buildings.push(layer);
                                break;
                            case "Sewer Line":
                                displayStyle = {style: sewerStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                sewerLines.push(layer);
                                break;
                            case "Water Line":
                                displayStyle = {style: waterStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                waterLines.push(layer);
                                break;
                            case "Fire Hydrant":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: redIcon});
                                    }
                                }).addTo(map);
                                fireHydrants.push(layer);
                                break;
                            case "Borehole":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: brownIcon});
                                    }
                                }).addTo(map);
                                boreHoles.push(layer);
                                break;
                            case "Water Pump":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: lilacIcon});
                                    }
                                }).addTo(map);
                                waterPumps.push(layer);
                                break;
                            case "Water Tank":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: greenIcon});
                                    }
                                }).addTo(map);
                                waterTanks.push(layer);
                                break;
                            case "Pump House":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: greyIcon});
                                    }
                                }).addTo(map);
                                pumpHouses.push(layer);
                                break;
                            case "Sewer Point":
                                layer = L.geoJSON(feature, {
                                    pointToLayer: function (feature, latlng) {
                                        return L.marker(latlng, {icon: purpleIcon});
                                    }
                                }).addTo(map);
                                sewerPoints.push(layer);
                                break;
                            default:
                                displayStyle = {style: waterPointStyle};
                                layer = L.geoJSON(feature, displayStyle).addTo(map);
                                waterPoints.push(layer);
                                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 class="mb-1">
                                        <a href="`+viewUrl+`">View</a>
                                    </div>
                                </div>
`                       );
                    });
                }
            });

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

            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),
                "fire hydrant": L.layerGroup(fireHydrants),
                "borehole": L.layerGroup(boreHoles),
                "water pump": L.layerGroup(waterPumps),
                "water tank": L.layerGroup(waterTanks),
                "pump house": L.layerGroup(pumpHouses),
            };

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