<% 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">Editing Ticket</li>
                </ol>
            </nav>
            <div class="card shadow py-3 px-3 mb-3">
                <div class="card-header bg-white mb-3">
                    <h4>Edit Ticket</h4>
                </div>
                <div class="card-body">
                    <form id="ticketForm" class="validated-form" action="/admin/events/<%= event._id %>/tickets/<%= ticket._id %>" method="POST" 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 <%= ticket.ticketType == 'player' ? 'selected' : '' %> value="player">Player Ticket</option>
                        <option <%= ticket.ticketType == 'playerChild' ? 'selected' : '' %> value="playerChild">Player Ticket (child)</option>
                        <option <%= ticket.ticketType == 'playerBunk' ? 'selected' : '' %> value="playerBunk">Player Bunk</option>
                        <option <%= ticket.ticketType == 'monster' ? 'selected' : '' %> value="monster">Monstering Ticket</option>
                        <option <%= ticket.ticketType == 'monsterChild' ? 'selected' : '' %> value="monsterChild">Monstering Ticket (child)</option>
                        <option <%= ticket.ticketType == 'monsterBunk' ? 'selected' : '' %> value="monsterBunk">Monstering Bunk</option>
                        <option <%= ticket.ticketType == 'mealTicket' ? 'selected' : '' %> value="mealTicket">Meal Ticket</option>
                        <option <%= ticket.ticketType == 'mealTicketChild' ? 'selected' : '' %> value="mealTicketChild">Meal Ticket (child)</option>
                        <option <%= ticket.ticketType == 'staff' ? 'selected' : '' %> value="staff">Event Staff Ticket</option>
                        <option <%= ticket.ticketType == 'staffBunk' ? 'selected' : '' %> 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" value="<%= ticket.cost %>">
                                </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" <%= ticket.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" value="<%= ticket.description %>" required placeholder="e.g. Standard Ticket, Early Booking, etc.">
                        </div>
                        <div class="mb-3 <%= ['mealTicket','mealTicketChild'].includes(ticket.ticketType) ? '' : 'd-none' %>" id="catererRow">
                            <label for="caterer">Caterer</label>
                            <input type="text" id="caterer" class="form-control" name="caterer" value="<%= ticket.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" value="<%= dateOutput(ticket.availableFrom) %>" required class="form-control">
                            </div>
                            <div class="col">
                                <label for="availableTo">Available To</label>
                                <input type="date" value="<%= dateOutput(ticket.availableTo) %>" name="availableTo" id="availableTo" required class="form-control">
                            </div>
                        </div>
                        <div class="mb-3 text-end">
                            <% if (bookings.length === 0) { %>
                                <a href="#" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">Delete Ticket</a>
                                <% } else { %>
                                    <button disabled class="btn btn-danger is-invalid" title="Cannot delete a ticket that has bookings">Delete Ticket</button>
                                    <% } %>
                                        <button type="submit" class="btn btn-success">Update Ticket</button>
                                        <div class="invalid-feedback">Unable to delete a ticket that has bookings</div>
                        </div>
                    </form>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <% if (bookings.length === 0) { %>
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="deleteModalLabel">Delete Ticket?</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete this ticket?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <form action="/admin/events/<%= event._id %>/tickets/<%= ticket._id %>?_method=DELETE" method="POST">
                            <button type="submit" class="btn btn-danger">Delete Ticket</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <% } %>