#{extends 'main.html' /}
#{set title:'Book ' + hotel.name /}
#{greenscript.js "jquery-ui-1.7.2.custom.min" /}
#{greenscript.css "/public/ui-lightness/jquery-ui-1.7.2.custom" /}

<h1>Book hotel</h1>

#{form @confirmBooking(hotel.id)}
    <p>
        <strong>Name:</strong> ${hotel.name}
    </p>
    <p>
        <strong>Address:</strong> ${hotel.address}
    </p>
    <p>
        <strong>City:</strong> ${hotel.city}
    </p>
    <p>
        <strong>State:</strong> ${hotel.state}
    </p>
    <p>
        <strong>Zip:</strong> ${hotel.zip}
    </p>
    <p>
        <strong>Country:</strong> ${hotel.country}
    </p>
    <p>
        <strong>Nightly rate:</strong> ${hotel.price}
    </p>
    #{field 'booking.checkinDate'}
        <p class="${field.errorClass}">
            <strong>Check In Date:</strong> <input type="text" size="10" name="${field.name}" class="datepicker" value="${booking?.checkinDate?.format('yyyy-MM-dd')}"> *
            <span class="error">${field.error}</span>
        </p>
    #{/field}
    #{field 'booking.checkoutDate'}
        <p class="${field.errorClass}">
            <strong>Check Out Date:</strong> <input type="text" size="10" name="${field.name}" class="datepicker" value="${booking?.checkoutDate?.format('yyyy-MM-dd')}"> *
            <span class="error">${field.error}</span>
        </p>
    #{/field}
    <p>
        <strong>Room preference:</strong> 
        #{select 'booking.beds', value:booking?.beds}
            #{option 1}One king-size bed#{/option}
            #{option 2}Two double beds#{/option}
            #{option 3}Three beds#{/option}
        #{/select}
    </p>
    <p>
        <strong>Smoking preference:</strong> 
        <input type="radio" name="booking.smoking" value="true" ${booking?.smoking ? 'checked' : ''}> Smoking
        <input type="radio" name="booking.smoking" value="false" ${booking?.smoking ? '' : 'checked'}> Non smoking
    </p>
    #{field 'booking.creditCard'}
        <p class="${field.errorClass}">
            <strong>Credit Card #:</strong> <input type="text" name="${field.name}" size="16" value="${booking?.creditCard}"> *
            <span class="error">${field.error}</span>
        </p>
    #{/field}
    #{field 'booking.creditCardName'}
        <p class="${field.errorClass}">
            <strong>Credit Card Name:</strong> <input type="text" name="${field.name}" size="16" value="${booking?.creditCardName}"> *
            <span class="error">${field.error}</span>
        </p>
    #{/field}
    <p>
        <strong>Credit Card Expiry:</strong> 
        #{select 'booking.creditCardExpiryMonth', value:booking?.creditCardExpiryMonth}
            #{option 1}Jan#{/option}
            #{option 2}Feb#{/option}
            #{option 3}Mar#{/option}
            #{option 4}Apr#{/option}
            #{option 5}May#{/option}
            #{option 6}Jun#{/option}
            #{option 7}Jul#{/option}
            #{option 8}Aug#{/option}
            #{option 9}Sep#{/option}
            #{option 10}Oct#{/option}
            #{option 11}Nov#{/option}
            #{option 112}Dec#{/option}
        #{/select}
        #{select 'booking.creditCardExpiryYear', value:booking?.creditCardExpiryYear}
            #{option 2008}2008#{/option}
            #{option 2009}2009#{/option}
            #{option 2010}2010#{/option}
            #{option 2011}2011#{/option}
            #{option 2012}2012#{/option}
        #{/select}      
    </p>    
    <p class="buttons">
        <input type="submit" value="Proceed"> <a href="@{show(hotel.id)}">Cancel</a>    
    </p>
#{/form}

<script type="text/javascript" charset="utf-8">
    $(function() {
		$(".datepicker").datepicker({dateFormat: 'yy-mm-dd'});
	});
</script>