<?php get_template_part('template-parts/parts/google-trip-planner'); ?>

<!-- Google Trip Planner -->

<form action="https://www.google.com/maps" method="get" class="googletripplanner" target="_blank" name="f">
    <input type="hidden" name="ie" value="UTF8">
    <input type="hidden" name="f" value="d">
    <input type="hidden" name="dirflg" value="r">
    <input type="hidden" name="hl" value="en">

    <div class="gtp-container">


        <div class="gtp-title-container">
            <img src="<?php echo get_stylesheet_directory_uri() . '/images/icons/google-maps-icon.png'; ?>"
                alt="Google Trip Planner Icon" class="gtp-icon">
            <h3 class="gtp-title">Google Trip Planner</h3>
        </div>


        <div class="gtp-innerform-container">


            <span class="icon-append icon-home"></span> <!-- Needs Icon -->
            <label id="starting_address" class="hide">Starting Address</label>
            <input class="input is-textinput" name="saddr" id="saddr-1" placeholder="Starting Address"
                aria-labelledby="starting_address" type="text" data-enpassusermodified="yes">

            <span class="icon-append icon-direction"></span> <!-- Needs Icon -->
            <label id="ending_address" class="hide">Ending Address</label>
            <input class="input is-textinput" name="daddr" id="daddr-1" placeholder="Ending Address"
                aria-labelledby="ending_address" type="text" data-enpassusermodified="yes">

            <div class="control">
                <label class="radio">
                    <input checked="" name="ttype" type="radio" value="dep"><i></i>Depart at
                </label>
                <label class="radio">
                    <input name="ttype" type="radio" value="arr"><i></i>Arrive by
                </label>
            </div>


            <span class="icon-append icon-calendar"></span> <!-- Needs Icon -->
            <label id="mDate" class="hide">Date</label>
            <input class="input is-textinput rounded hasDatepicker" id="fdate" type="text" name="date"
                aria-labelledby="mDate" placeholder="DD/MM/YYYY">

            <span class="icon-append icon-clock"></span> <!-- Needs Icon -->
            <label id="mTime" class="hide">Time</label>
            <input class="input is-textinput" id="ftime" name="time" aria-labelledby="mTime" placeholder="Time"
                type="text" data-enpassusermodified="yes">

            <button class="button is-secondary is-fullwidth" type="submit">GET DIRECTIONS</button>

        </div>

    </div>
</form>

<div class="clear-both"></div>