<App Background="Black">

    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var GeoLocation = require("FuseJS/GeoLocation");
        var longitude = Observable();
        var latitude = Observable();
        var userfullnames = Observable();
        var userphonenumber = Observable();
        var carnumberplate = Observable();
        var carmodel = Observable();
        var carproblemdetails = Observable();

        // Continuous
        var continuousLocation = GeoLocation.observe("changed").map(JSON.stringify);

        GeoLocation.on("error", function(fail) {
            console.log("GeoLocation error " + fail);
        });

        GeoLocation.on("changed", function(location) {
            latitude.value = location.latitude.toFixed(3);
            longitiude.value = location.longitude.toFixed(3);
        });

        function startContinuousListener() {
            var intervalMs = 1000;
            var desiredAccuracyInMeters = 10;
            GeoLocation.startListening(intervalMs, desiredAccuracyInMeters);
        }

        function stopContinuousListener() {
            GeoLocation.stopListening();
        }

        function gotomainpage() {
            router.goto("mainpage");
        }
        function gotodetailspage() {
            stopContinuousListener();
            router.goto("detailspage");
        }

        function sendBreakdownRequest() {
            requestObject = {
                names : userfullnames,
                phonenumber : userphonenumber,
                carnumberplate : carnumberplate,
                carmodel : carmodel,
                problem : carproblemdetails,
                latitude : latitude,
                longitude : longitude
            };

            fetch('http://fundis.co.ke/fundisapp/breakdowntest.php', {
                method: 'POST',
                headers: { "Content-type": "application/json"},
                body: JSON.stringify(requestObject)
            }).then(function(response) {
                status = response.status;  // Get the HTTP status code
                response_ok = response.ok; // Is response.status in the 200-range?
                return response.json();    // This returns a promise
            }).then(function(responseObject) {
                // Do something with the result
            }).catch(function(err) {
                // An error occurred somewhere in the Promise chain
            });
        }

        module.exports =  {
            userfullnames : userfullnames,
            userphonenumber : userphonenumber,
            carnumberplate : carnumberplate,
            carmodel : carmodel,
            carproblemdetails : carproblemdetails,
            longitude : longitude,
            latitude : latitude,
            gotomainpage : gotomainpage,
            gotodetailspage : gotodetailspage,
            sendBreakdownRequest : sendBreakdownRequest,
            startContinuousListener : startContinuousListener,
            stopContinuousListener : stopContinuousListener,
            continuousLocation : continuousLocation
        };

    </JavaScript>

    <StatusBarBackground Dock="Top" />
    <BottomBarBackground Dock="Bottom" />
    <Android.StatusBarConfig Color="Black" />
    <Font File="Assets/LemonMilk.otf" ux:Global="myfirstfont" />
    <Font File="Assets/Carbax.otf" ux:Global="mysecondfont" />
    <Router ux:Name="router" />

    <TextInput ux:Class="MyTextInput" FontSize="21" Font="mysecondfont" PlaceholderColor="#ccc" TextColor="White" Padding="5" Width="300" >
        <Rectangle Layer="Background" CornerRadius="3">
            <Stroke Width="2" Color="#ccc" />
        </Rectangle>
    </TextInput>

    <Button ux:Class="MyButton" Alignment="Center" Color="#25a" Padding="10,10,10,10" >
        <Rectangle Layer="Background" Background="White" CornerRadius="3" />
    </Button>

    <ClientPanel>
        <PageControl>
            <Panel ux:Name="splashpage" Background="Black" >
                <Image File="Assets/bg.jpg" StretchMode="UniformToFill" Layer="Background">
                    <Blur />
                </Image>

                <StackPanel Alignment="Center" >
                    <Text Value="BreaKE" FontSize="70" Font="myfirstfont" Color="Black" Alignment="Center" />
                    <Text Value="breakdown services on the go" FontSize="18" Font="mysecondfont" Color="Black" Alignment="Center" Margin="0,0,0,20"/>

                    <MyButton Text="Touch to proceed" Clicked="{gotomainpage}" />
                </StackPanel>
            </Panel>

            <Panel ux:Name="mainpage" Background="Black" Clicked="{gotodetailspage}" >
                <DockPanel>
                    <Rectangle Dock="Top" Color="Black" Height="70" Width="110%">
                        <Text Value="SET LOCATION" Font="myfirstfont" Alignment="Center" Color="White" FontSize="21" />
                        <Stroke Width="2" Color="#ccc" />
                    </Rectangle>

                    <Panel>
                        <NativeViewHost Layer="Background">
                            <MapView ShowMyLocation="True" ShowMyLocationButton="true" ShowCompass="True" Latitude="{latitude}" Longitude="{longitude}" Zoom="10">
                                <MapMarker Latitude="{latitude}" Longitude="{longitude}" Label="Your location"/>
                            </MapView>
                        </NativeViewHost>
                    </Panel>

                    <Rectangle Dock="Bottom" Color="White" Height="70" Width="110%">
                        <MyButton Text="Touch to proceed" Clicked="{gotodetailspage}" />
                        <Stroke Width="2" Color="#ccc" />
                    </Rectangle>
                </DockPanel>
            </Panel>

            <Panel ux:Name="detailspage" Background="Black" >
                <DockPanel>
                    <Rectangle Dock="Top" Color="Black" Height="70" Width="110%">
                        <Text Value="DETAILS" Font="myfirstfont" Alignment="Center" Color="White" FontSize="21" />
                        <Stroke Width="2" Color="#ccc" />
                    </Rectangle>

                    <Rectangle Dock="Top" Color="Black" Height="50" Width="110%">
                        <Text Value="enter all details for clarity" Font="mysecondfont" Alignment="Center" Color="White" FontSize="21" />
                    </Rectangle>

                    <StackPanel Alignment="Top" ItemSpacing="10" >
                        <MyTextInput Value="{userfullnames}" PlaceholderText="Full Names" />
                        <MyTextInput Value="{userphonenumber}" PlaceholderText="Phone Number" InputHint="Phone" />
                        <MyTextInput Value="{carnumberplate}" PlaceholderText="Car Numberplate" />
                        <MyTextInput Value="{carmodel}" PlaceholderText="Car Model" />
                        <MyTextInput Value="{carproblemdetails}" PlaceholderText="Brief problem description" Height="100" TextWrapping="Wrap" />

                        <MyButton Text="Request breakdown" Margin="0,20,0,0" Clicked="{sendBreakdownRequest}" />
                    </StackPanel>
                </DockPanel>

            </Panel>
        </PageControl>
    </ClientPanel>

</App>