{% extends "layout.html" %}

{% set title = 'Book an event' %}

{% block content %}

{% include 'component/hero-checkbox.html' %}

<section class="sec-pad">
    <div class="container">
        <div class="sec-title">
            <h2 class="no-margin mbmd text-semibold text-center">
                Events
            </h2>
        </div>
        <div class="events mtxlg">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="text-center">
                        <p class="mbxlg text-center">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                        </p>
                        <a href="" class="btn btn-green d-inline" data-toggle="modal" data-target="#bookEvent">Request an event</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<div class="modal fade" id="bookEvent" tabindex="-1" role="dialog" aria-labelledby="bookEvent" aria-hidden="true">
    <div class="modal-dialog main-model" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <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="content-head text-center mbxlg">
                    <img src="_assets/img/icons/event.svg" alt="">
                    <h3 class="no-margin mtmd mbsm text-semibold">Event</h3>
                    <p class="text-center">
                        You can request an Event here
                    </p>
                </div>
                <form action="">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Name" required>
                    </div>
                    <div class="form-group">
                        <input type="number" min="0" onkeydown="javascript: return event.keyCode == 69 ? false : true" name="mobile" placeholder="Mobile NO." required >
                    </div>
                    <div class="form-group">
                        <input type="email" name="e-mail" placeholder="Email" required >
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="text" name="city" placeholder="City" required>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="text" name="address" placeholder="Address" required>
                            </div>
                        </div>
                    </div>
                    <div class="select-container mbxlg">
                        <div class="custom-select" for="category">
                            <select id="category" name="category">
                                <option value="">
                                    Menu Type
                                </option>
                                <option value="1">
                                    Type 1
                                </option>
                                <option value="2">
                                    Type 2
                                </option>
                                <option value="3">
                                    Type 3
                                </option>
                                <option value="4">
                                    Type 4
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="text" name="people" placeholder="Number of people" required>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <input type="text" name="budget" placeholder="Budget" required>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" name="requst" placeholder="Special request" required>
                    </div>
                    <button type="submit" class="btn btn-green mtxxlg">
                        Send
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock content %}