<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Form</title>
    </head>
    <body>
        <h1>Form</h1>
        <form action="http://3.109.76.188/api/properties/" method="POST" enctype="multipart/form-data">
            <fieldset>
                <legend>Property Details</legend>
                <table width="100%">
                    <tr>
                        <td colspan="2">
                            <table width="100%">
                                <tr>
                                    <td><input type="text" name="channel_id" value="" placeholder="channel_id"></td>
                                    <td><input type="text" name="listing_name" value="" placeholder="Listing Name"></td>
                                    <td><select name="host" id="">
                                            <option value="null">Select Client</option>
                                            <% results.hosts.forEach(host => { %>
                                                <option value="<%= host.id %>"><%= host.name %></option>
                                            <% }); %>
                                        </select>
                                    </td>
                                    <td>Staymaster Select
                                        <input type="radio" id="yes" name="staymaster_select" value="1" />
                                        <label for="yes">Yes</label>
                                        <input type="radio" id="no" name="staymaster_select" value="0" checked />
                                        <label for="no">No</label>
                                    </td>
                                    <td><input type="text" name="internal_name" value="" placeholder="Internal Name"></td>
                                    <td>
                                        <select name="destination" id="">
                                            <option value="null">Select Location</option>
                                            <% results.destinations.forEach(destination => { %>
                                                <option value="<%= destination.id %>"><%= destination.name %></option>
                                            <% }); %>
                                        </select>
                                </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr><td>&nbsp;</td></tr>
                    <tr>
                        <td width="20%">
                            <fieldset>
                                <legend>Cover Photo</legend>
                                <input name="display_image" type="file" />
                            </fieldset>
                        </td><td>&nbsp;</td>
                    </tr>
                    <tr><td>&nbsp;</td></tr>
                    <tr>
                        <td colspan="2">
                            <table width="100%">
                                <tr>
                                    <td><input type="text" name="address_line_1" value="" placeholder="Address Line 1"></td>
                                    <td><input type="text" name="address_line_2" value="" placeholder="Address Line 2"></td>
                                    <td><input type="text" name="city" value="" placeholder="city"></td>
                                    <td><input type="text" name="state" value="Goa" placeholder="state"></td>
                                    <td>
                                        <select name="country" id="">
                                            <option value="null">Select Country</option>
                                            <% results.countries.forEach(country => { %>
                                                <option value="<%= country.id %>"><%= country.display %></option>
                                            <% }); %>
                                        </select>
                                    </td>
                                    <td><input type="text" name="postcode" value="" placeholder="postcode"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr><td>&nbsp;</td></tr>
                    <tr>
                        <td colspan="2">
                            <table width="100%">
                                <tr>
                                    <td>
                                        <select name="property_type" id="">
                                            <option value="null">Type of property</option>
                                            <% results.property_types.forEach(property_type => { %>
                                                <option value="<%= property_type.id %>"><%= property_type.display %></option>
                                            <% }); %>
                                        </select>
                                    </td>
                                    <td><input type="text" name="number_of_bedrooms" value="" placeholder="No of bedrooms"></td>
                                    <td><input type="text" name="number_of_bathrooms" value="" placeholder="No of bathrooms"></td>
                                    <td><input type="text" name="number_of_guests" value="" placeholder="No of guests"></td>
                                    <td><input type="text" name="number_of_extra_guests" value="" placeholder="No of extra guests"></td>
                                    <td>Featured Property <input type="checkbox" name="featured_property" placeholder="Featured Property" value="1"></td>
                                    <td><input type="text" id="sdp" name="security_deposit_percentage" value="" placeholder="Security Deposit"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <table width="100%">
                <tr><td>&nbsp;</td></tr>
                <tr>
                    <td>
                        <fieldset>
                            <legend>Property Category(Select upto 5)</legend>
                            <% results.collections.forEach(collection => { %>
                                <input type="checkbox" name="property_collections" value="<%= collection.id %>"><%= collection.name %><br>
                            <% }); %>
                        </fieldset>
                    </td>
                    <td>
                        <fieldset>
                            <legend>Property Detailed Descriptions</legend>
                            <table>
                                <tr>
                                    <td><textarea name="description_summary" rows="4" cols="50" placeholder="Summary (Description upto 500 characters)"></textarea></td>
                                    <td><textarea name="description_bedrooms_and_bath" rows="4" cols="50" placeholder="bedrooms_and_bath (Description upto 500 characters)"></textarea></td>
                                </tr>
                                <tr>
                                    <td><textarea name="description_living_and_dining" rows="4" cols="50" placeholder="living_and_dining (Description upto 500 characters)"></textarea></td>
                                    <td><textarea name="description_kitchen_space" rows="4" cols="50" placeholder="kitchen_space (Description upto 500 characters)"></textarea></td>
                                </tr>
                                <tr>
                                    <td><textarea name="description_pool" rows="4" cols="50" placeholder="Pool (Description upto 500 characters)"></textarea></td>
                                    <td><textarea name="description_unique_highlights" rows="4" cols="50" placeholder="description_unique_highlights (Description upto 500 characters)"></textarea></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><textarea name="description_hospitality_service" rows="4" cols="50" placeholder="Hospitality (Description upto 500 characters)"></textarea></td>
                                </tr>
                            </table>
                        </fieldset>
                    </td>
                </tr>
                <tr><td>&nbsp;</td></tr>
            </table>
            <fieldset>
                <legend>Amenities</legend>
                <table>
                    <tr>
                    <% Object.keys(results.amenities).forEach(category => { %>
                        <td style="border:1px solid #eeeeee; vertical-align: top;">
                        <br><%= category %><br>
                        <% results.amenities[category].forEach(amenity => { %>
                            <input type="checkbox" name="amenities" value="<%= amenity.id %>"><%= amenity.name %><br>
                            <input type="text" name="<%= amenity.id %>_description" value="" placeholder="">
                        <% }); %>
                        </td>
                    <% }); %>
                    </tr>
                </table>
            </fieldset>
            <table><tr><td>&nbsp;</td></tr></table>
            <fieldset>
                <legend>Location & Neighbourhood</legend>
                <table width="100%">
                    <tr>
                        <td>
                            <table>
                                <tr><td><input type="text" name="google_latitude" value="" placeholder="Google Latitude"></td></tr>
                                <tr><td><input type="text" name="google_longitude" value="" placeholder="Google Latitude"></td></tr>
                            </table>
                        </td>
                        <td>
                            <textarea name="location_details" rows="4" cols="50" placeholder="Location Details (Description upto 500 characters)"></textarea>
                        </td>
                        <td>
                            <textarea name="places_around" rows="4" cols="50" placeholder="Places Around (Description upto 500 characters)"></textarea>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <table><tr><td>&nbsp;</td></tr></table>
            <fieldset>
                <legend>Meals</legend>
                <table>
                    <tr>
                        <td>
                            Meals Available: 
                            <input type="radio" id="yes" name="meals_available" value="1" />
                            <label for="yes">Yes</label>
                            <input type="radio" id="no" name="meals_available" value="0" checked />
                            <label for="no">No</label><br/>
                            Breakfast Fee: <input type="text" name="breakfast_fee" value="0" placeholder="">
                        </td>
                        <td><textarea name="meals_text" rows="4" cols="50" placeholder="Meals Description"></textarea></td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </fieldset>
            <table><tr><td>&nbsp;</td></tr></table>
            <table>
                <tr>
                    <td>
                        <fieldset>
                            <legend>Essential Info</legend>
                            Check In: <input type="text" name="check_in" value="15:00:00">
                            Check Out:<input type="text" name="check_out" value="11:00:00">
                            <input type="text" name="other_details" value="Other Details">
                        </fieldset>
                    </td>
                    <td>
                        <fieldset>
                            <legend>House Rules & Policies</legend>
                            <textarea name="house_rules" rows="4" cols="50" placeholder="House Rules"></textarea>
                        </fieldset>
                    </td>
                </tr>
            </table>
            <table><tr><td>&nbsp;</td></tr></table>
            <fieldset>
                <legend>Users</legend>
                <table width="100%">
                    <tr>
                        <td>
                            <select name="reservation_executive" id="">
                                <option value="null">Select Reservation Executive</option>
                                <% results.staffs.forEach(staff => { %>
                                    <option value="<%= staff.id %>"><%= staff.name %></option>
                                <% }); %>
                            </select>
                        </td>
                        <td>
                            <select name="revenue_manager" id="">
                                <option value="null">Select Revenue Manager</option>
                                <% results.staffs.forEach(staff => { %>
                                    <option value="<%= staff.id %>"><%= staff.name %></option>
                                <% }); %>
                            </select>
                        </td>
                        <td>
                            <select name="hospitality_manager" id="">
                                <option value="null">Select Hospitalty Manager</option>
                                <% results.staffs.forEach(staff => { %>
                                    <option value="<%= staff.id %>"><%= staff.name %></option>
                                <% }); %>
                            </select>
                        </td>
                        <td>
                            <select name="general_manager" id="">
                                <option value="null">Select Hospitalty Manager</option>
                                <% results.staffs.forEach(staff => { %>
                                    <option value="<%= staff.id %>"><%= staff.name %></option>
                                <% }); %>
                            </select>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <table><tr><td>&nbsp;</td></tr></table>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>