@extends("layouts.admin.app")

@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("Stations")}}</h1>
            <p>{{__("Create New Station")}}</p>
        </div>

        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("admin.stations.index")}}">{{__("Stations")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Create")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("Create New Station")}}</h3>
                <form method="post" action="{{route("admin.stations.store")}}" enctype="multipart/form-data">
                    @csrf
                <div class="tile-body">

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Name English")}}</label>
                                    <input class="form-control @if($errors->has('name_en')) is-invalid @endif" type="text" name="name_en" placeholder="{{__("Name English")}}" value="{{inputValue("name_en")}}">
                                </div>
                                @error("name_en")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Name Arabic")}}</label>
                                    <input class="form-control @if($errors->has('name_ar')) is-invalid @endif" type="text" name="name_ar" placeholder="{{__("Name Arabic")}}" value="{{inputValue("name_ar")}}">
                                </div>
                                @error("name_ar")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{__("Area")}}</label>
                                <select class="form-control js-basic-single-select2 @if($errors->has('area_id')) is-invalid @endif" name="area_id" required>
                                    <option selected disabled >{{__("selected Area")}}</option>
                                    @foreach($areas as $key=> $area)
                                        <option value="{{$area->id}}">{{ $area->name_en}}</option>
                                    @endforeach
                                </select>
                            </div>
                            </div>
                            @error("area_id")
                            <div class="input-error">{{$message}}</div>
                            @enderror
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Phone Number")}}</label>
                                    <input class="form-control @if($errors->has('phone_number')) is-invalid @endif" type="text" name="phone_number" placeholder="{{__("Phone Number")}}" value="{{inputValue("phone_number")}}">
                                </div>
                                @error("phone_number")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label class="control-label">{{__("Status")}}</label>
                                    <select class="form-control js-basic-single-select2 @if($errors->has('status')) is-invalid @endif" name="status" required>
                                        <option selected disabled >{{__("selected status")}}</option>
                                        <option value="0">Offline</option>
                                        <option value="1">Online</option>
                                        <option value="2">Under Process</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label class="control-label">{{__("ZIP")}}</label>
                                    <input class="form-control @if($errors->has('zip')) is-invalid @endif" type="text" name="zip" placeholder="{{__("ZIP")}}" value="{{inputValue("phone_number")}}">
                                </div>
                                @error("phone_number")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-2">
                                <div class="form-group">
                                    <label class="control-label">{{__("Map")}}</label> <br>
                                    <!-- Button trigger modal -->
                                    <button type="button" onclick="getLocation()" class="btn btn-primary @if($errors->has('lng')) is-invalid @endif" data-toggle="modal" data-target="#exampleModalCenter">
                                        <span class="icon color-light"><i class="fas fa-map-marker-alt"></i></span>{{__("Map")}}
                                    </button>
                                    <spna class="btn btn-success" id="mapStatus" style="display: none"> Location saved</spna>
                                    <!-- Modal -->
                                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row parent-box">
                                                        <div class="col-lg-12 m-auto map-box">
                                                            <div class="tile-body" id="parent-box">
                                                                <!--- Map Section --->
                                                                <div id="map-box" style="@if(Session::has("location_details")) display:none @endif">
                                                                    <div id="map"></div>
                                                                </div>


                                                                <!--- Info Section --->
                                                                <div id="info-box" style="@if(Session::has("location_details")) display:block @endif">
                                                                    <input type="hidden" name="latitude" id="lat" value="{{inputValue("latitude")}}">
                                                                    <input type="hidden" name="longitude" id="lng" value="{{inputValue("longitude")}}">
                                                                    <input type="hidden" name="address_en" id="address_en" value="Amman_Jordan">
                                                                    <input type="hidden" name="address_ar" id="address_ar" value="عمان-الاردن">
                                                                    <input type="hidden" name="city" id="city" value="Amman">
                                                                    <button type="button" class="close btn btn-success" data-dismiss="modal" aria-label="Close">
                                                                        Done
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <!-- Add the missing script tag here -->


                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Station Photo")}}</label>
                                    <div>
                                        <button class="btn btn-primary form-control button-upload-file" >
                                            <input class="input-file show-uploaded" data-upload-type="single" data-imgs-container-class="uploaded-images" type="file" name="station_photo" id="profile_photo_input">
                                            <span class="upload-file-content">
                                                <i class="fas fa-upload fa-lg upload-file-content-icon left"></i>
                                                <span class="upload-file-content-text">{{__("Upload Photo")}}</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                @error("station_photo")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-3 col-md-5 col-sm-6 mt-3 p-0">
                                <div class="images">
                                    <div class="uploaded-images">
                                            <img src="" alt="" width="90px" id="profile_photo_preview">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Create")}}</button>
                        </div>
                </div></form>
                </div>
            </div>
    </div>

@endsection

@section("scripts")
    <script type="text/javascript">
        if(document.location.hostname == 'pratikborsadiya.in') {
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-72504830-1', 'auto');
            ga('send', 'pageview');
        }


        $(".checkedAll").on("click", function (){
            let check = $(this).is(':checked');
            if(check){
                $(".copyDay").attr("checked", true);
                $(".copyFromTime").val($(".FirstFromTime").val())
                $(".copyToTime").val($(".FirstToTime").val())
            }else{
                $(".copyDay").attr("checked", false);
                $(".copyFromTime").val("")
                $(".copyToTime").val("")
            }
        })


    </script>
        <script
        src="https://maps.googleapis.com/maps/api/js?key={{env("GOOGLE_API_KEY")}}&callback=initMap&libraries=&v=weekly"
        async
        ></script>

    <script>
        let map,marker;
        let inputLat = document.querySelector("#lat");
        let inputLng = document.querySelector("#lng");
        // let inputAddress = document.querySelector("#address");
        let mapStatus=$("#mapStatus");



        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.watchPosition(showPosition,showError);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }


        }
        function showPosition(position) {
            let lat = position.coords.latitude
            let lang =  position.coords.longitude
            initMap(lat,lang)
            mapStatus.show();
            console.log( lat);
            console.log(lang );

        }
        function showError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    alert( "Please enable location services.")
                    // alert( "User denied the request for Geolocation.")
                    mapStatus.hide();
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert( "Please enable location services.")
                    // alert("Location information is unavailable.")
                    mapStatus.hide();
                    break;
                case error.TIMEOUT:
                    alert( "Please enable location services.")
                    // alert("The request to get user location timed out.")
                    mapStatus.hide();
                    break;
                case error.UNKNOWN_ERROR:
                    alert( "Please enable location services.")
                    // alert("An unknown error occurred.")
                    mapStatus.hide();
                    break;
            }
        }

        function initMap(lat,lang) {

            let latVal = parseFloat(inputLat.value);
            let lngVal = parseFloat(inputLng.value);
            // let AddressVal = parseFloat(inputAddress.value);
            if(latVal == 0 && lngVal == 0 || ( isNaN(latVal) && isNaN(lngVal))){
                latVal = lat;
                lngVal = lang;


                $("#lat").val(latVal);
                $("#lng").val(lngVal);
                // if($("#lat").val(latVal) != null){
                //     mapStatus.show();
                // }
            }
            //console.log(latVal,lngVal);

            let defaultPosition = { lat: latVal, lng: lngVal };
            map = new google.maps.Map(document.getElementById("map"), {
                center: defaultPosition,
                zoom: 16,
            });
            marker = new google.maps.Marker({
                position: defaultPosition,
                map: map,
                draggable: true
            });

            map.addListener("center_changed",changeMarkerPosition);
            map.addListener("zoom_change",changeMarkerPosition);
            marker.addListener("dragend",setPositionToInputs)
        }

        function changeMarkerPosition(){
            let latlng = map.getCenter();
            marker.setPosition(latlng);
            setPositionToInputs();
        }

        function setPositionToInputs() {
            let lat = marker.getPosition().lat();
            let lng = marker.getPosition().lng();

            inputLat.value = lat;
            inputLng.value = lng;

            getAddressByReverseGeocoding(lat, lng);
            mapStatus.show();
        }


        // function setPositionToInputs(){
        //     inputLat.value = marker.getPosition().lat();
        //     inputLng.value = marker.getPosition().lng();
        //     // inputAddress.value = marker.getPosition().address();
        //     mapStatus.show();
        // }



        // function getAddressByReverseGeocoding(lat,lng){
        //     var latlng = new google.maps.LatLng(lat, lng);
        //     var geocoder = new google.maps.Geocoder();
        //     geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        //         if (status !== google.maps.GeocoderStatus.OK) {
        //             alert(status);
        //         }
        //         if (status == google.maps.GeocoderStatus.OK) {
        //             console.log(results);
        //             // var address = (results[0].formatted_address);
        //         }
        //     });
        // }

        function getAddressByReverseGeocoding(lat, lng) {
            console.log('hi')

            // Define language codes for English and Arabic
            const englishLanguageCode = 'en';
            const arabicLanguageCode = 'ar';

            // First, fetch the address in English
            const englishApiUrl = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key={{env("GOOGLE_API_KEY")}}&language=${englishLanguageCode}`;

            fetch(englishApiUrl)
                .then((response) => response.json())
                .then((data) => {
                    if (data.status === 'OK') {
                        console.log(data);
                        const addressEn = data.results[0].formatted_address;
                        document.querySelector("#address_en").value = addressEn;
                        console.log(`English Address: ${addressEn}`);
                        for (const component of data.results[0].address_components) {
                            if (component.types.includes('locality')) {
                                document.querySelector("#city").value = component.long_name;
                                break;
                            }
                        }

                        // Now, fetch the address in Arabic
                        const arabicApiUrl = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key={{env("GOOGLE_API_KEY")}}&language=${arabicLanguageCode}`;

                        fetch(arabicApiUrl)
                            .then((response) => response.json())
                            .then((data) => {
                                console.log(data);
                                if (data.status === 'OK') {
                                    const addressAr = data.results[0].formatted_address;
                                    document.querySelector("#address_ar").value = addressAr;
                                    console.log(`Arabic Address: ${addressAr}`);
                                } else {
                                    console.error(`Arabic Geocoding failed with status: ${data.status}`);
                                }
                            })
                            .catch((error) => {
                                console.error('Arabic Error:', error);
                            });
                    } else {
                        console.error(`English Geocoding failed with status: ${data.status}`);
                    }
                })
                .catch((error) => {
                    console.error('English Error:', error);
                });
        }







    </script>
    <script src="{{asset("assets/js/maps.js")}}"></script>
    <script type="module" src="{{asset("assets/js/pages/locations_support.js")}}"></script>
    <script>
        document.getElementById('profile_photo_input').addEventListener('change', function(e) {
            const fileInput = e.target;
            const previewImage = document.getElementById('profile_photo_preview');
            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    // Set the source of the preview image to the selected file
                    previewImage.src = e.target.result;
                };
                // Read the selected file as a data URL
                reader.readAsDataURL(fileInput.files[0]);
            }
        });
    </script>

    <script src="{{asset("assets/js/maps.js")}}"></script>
    <script type="module" src="{{asset("assets/js/pages/locations_support.js")}}"></script>
@endsection