<% layout('layouts/boilerplate') %>
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb small">
                    <li class="breadcrumb-item"><a href="/admin/events/<%= currentUser.role == 'eventHost' ? '' : 'all' %>" class="link-dark">Manage Events</a></li>
                    <li class="breadcrumb-item"><a href="/admin/events/<%= event._id %>/manage" class="link-dark">Manage <%= event.name %></a></li>
                    <li class="breadcrumb-item"><a href="/admin/events/<%= event._id %>/edit" class="link-dark">Edit <%= event.name %></a></li>
                    <li class="breadcrumb-item active" aria-current="page">Create Ticket</li>
                </ol>
            </nav>
            <div class="card shadow py-3 px-3 mb-3">
                <div class="card-header bg-white mb-3">
                    <h4>Create Ticket</h4>
                </div>
                <div class="card-body">
                    <form method="POST" class="validated-form" action="/admin/events/<%= event.id %>/tickets/new" novalidate>
                        <div class="row mb-3">
                            <div class="col-4">
                                <label for="ticketType">Ticket Type</label>
                                <select class="form-select" aria-label="Ticket Type" id="ticketType" name="ticketType" required>
                            <option selected>Select a Ticket Type</option>
                            <option value="player">Player Ticket</option>
                        <option value="playerChild">Player Ticket (child)</option>
                        <option value="playerBunk">Player Bunk</option>
                        <option value="monster">Monstering Ticket</option>
                        <option value="monsterChild">Monstering Ticket (child)</option>
                        <option value="monsterBunk">Monstering Bunk</option>
                        <option value="mealTicket">Meal Ticket</option>
                        <option value="mealTicketChild">Meal Ticket (child)</option>
                        <option value="staff">Event Staff Ticket</option>
                        <option value="staffBunk">Event Staff Bunk</option>
                            </select>
                            </div>
                            <div class="col-4">
                                <label for="cost">Ticket Cost</label>
                                <div class="input-group">
                                    <span class="input-group-text">Â£</span>
                                    <input required id="cost" name="cost" type="number" class="form-control" min="0.00">
                                </div>
                            </div>
                            <div class="col-4">
                                <label for="available" title="Useful to disable for tickets that cannot be booked directly (e.g. Catering, parking)">Available to Book</label>
                                <div class="">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" role="switch" name="available" id="available" checked>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="description">Ticket Description</label>
                            <input type="text" id="description" class="form-control" name="description" required placeholder="e.g. Standard Ticket, Early Booking, etc.">
                        </div>
                        <div class="mb-3 d-none" id="catererRow">
                            <label for="caterer">Caterer</label>
                            <input type="text" id="caterer" class="form-control" name="caterer" placeholder="e.g. Name of caterer">
                        </div>
                        <div class="row mb-3">
                            <div class="col">
                                <label for="availableFrom">Available From</label>
                                <input type="date" name="availableFrom" id="availableFrom" required class="form-control">
                            </div>
                            <div class="col">
                                <label for="availableTo">Available To</label>
                                <input type="date" name="availableTo" id="availableTo" required class="form-control">
                            </div>
                        </div>
                        <div class="mb-3 text-end">
                            <button class="btn btn-success">Create Ticket</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/createTicket.js"></script>