<% layout('layouts/boilerplate') %>
<!-- <script src="https://cdn.tiny.cloud/1/9rpfmnglpt10wzitgh0d0zn5ru3343oti9q4hfwl9of7mwpu/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb small">
            <li class="breadcrumb-item"><a href="/admin/hosts" class="link-dark">Manage Event Hosts</a></li>
            <li class="breadcrumb-item active" aria-current="page">
                <%= host.eventSystem.name %> -
                    <%= host.name %>
            </li>
        </ol>
    </nav>
    <div class="card shadow  py-3 px-3 mb-3">
        <div class="card-header bg-white mb-3">
            <h4>Edit Event Host</h4>
        </div>
        <div class="card-body">
            <form action="/admin/hosts/<%= host._id %>" method="POST" enctype="multipart/form-data">
            <div class="row">
                <div class="col">
                        <% if (adminGroups.includes(currentUser.role)) { %>
                            <div class="row mb-3">
                                <div class="col">
                                    <label for="hostName">Name</label>
                                    <input class="form-control" type="text" id="hostName" name="name" value="<%= host.name %>" autocomplete="off">
                                </div>
                                <div class="col">
                                    <label for="eventSystem">Event System</label>
                                    <select class="form-select" name="eventSystem" id="eventSystem">
                                <% for (eventSystem of eventSystems.sort((a,b) => a.name.localeCompare(b.name))){ %>
                                    <% if (currentUser.eventSystems.filter(a => a._id.equals(eventSystem._id)).length > 0 || adminGroups.includes(currentUser.role)) { %>
                                    <option <%= eventSystem._id.equals(host.eventSystem._id) ? 'selected' : '' %> value="<%= eventSystem._id %>"><%= eventSystem.name %></option>
                                <% }} %>
                            </select>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="hostImg">Image</label>
                                <div class="input-group">
                                    <input class="form-control" type="file" id="hostImg" name="image" accept="image/png, image/jpeg">
                                    <% if (host.img?.url) { %> <a title="Clear current image" class="btn btn-outline-secondary" href="#" onclick="document.getElementById('delImg').submit()" type="button"><i class="bi bi-trash"></i></a>
                                        <% } %>
                                </div>
                                <div class="form-text">Do not upload an image if you do not wish to change the current image.</div>
                            </div>
                            <% } %>
                                <div title="Contact details for event queries" class="mb-3">
                                    <label for="hostEmailAddress">Contact E-mail Address</label>
                                    <input type="text" id="hostEmailAddress" name="contactAddress" value="<%= host.contactAddress %>" class="form-control">
                                </div>
                                <div class="mb-3 input-group" title="Discord Webhook">
                                    <span class="input-group-text"><i class="bi bi-discord me-2"></i> Webhook</span>
                                    <input type="url" name="webhooks[discord]" id="discordWebhook" value="<%= host.webhooks?.discord %>" class="form-control">
                                    <div class="form-text">Link the website into a Discord Webhook to automatically post event adverts.</div>
                                </div>
                                <div class="mb-3">
                                    <label for="hostPaypalAddress">Paypal E-mail Address</label>
                                    <input type="text" id="hostPaypalAddress" name="paypalAddress" value="<%= host.paypalAddress %>" class="form-control">
                                </div>
                                <div class="row mb-3">
                                    <div class="col">
                                        <label for="paypalPercentage">PayPal Fee Percentage</label>
                                        <div class="input-group">
                                            <span class="input-group-text">%</span>
                                            <input class="form-control" type="number" name="paypalPercentage" id="paypalPercentage" value="<%= host.paypalPercentage %>">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <label for="paypalFixedFee">PayPal Fixed Fee</label>
                                        <div class="input-group">
                                            <span class="input-group-text">Â£</span>
                                            <input class="form-control" type="number" name="paypalFixedFee" id="paypalFixedFee" value="<%= host.paypalFixedFee %>">
                                        </div>
                                    </div>
                                    <p class="form-text">These values don't change often and are only used for generating financial reports for you. <br/>They do not affect your PayPal payments in anyway.</p>
                                </div>
                                
                    
                </div>
                <div class="col-md">
                    <div class="mb-3">
                        <span class="align-middle"><img id="eventImg" src="<%= host.img.url %>"
                        class="img-fluid rounded-start py-3 px-3" alt="..."></span>
                    </div>
                    
                </div>
            </div>
            <div class="mb-3">
                <label for="hostTerms">Terms & Conditions</label>
                <p class="form-text">These terms are seperate to the Event System terms and are entirely optional.</p>
                <textarea required class="form-control" name="terms" id="hostTerms" title="These are your host specific terms and conditions" cols="30" rows="5">
                <%= host.terms %>
                </textarea>
            </div>
            <div class="mb-3">
                <% if (adminGroups.includes(currentUser.role)) { %>
                    <a href="" data-bs-toggle="modal" data-bs-target="#deleteModal" class="btn btn-danger">Delete</a>
                    <% } %>
                        <button class="btn btn-success">Update</button>
            </div>
        </form>
        </div>
    </div>

    <form action="/admin/hosts/<%= host._id %>/image?_method=DELETE" method="POST" id="delImg"></form>
    <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 Event Host?</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 Event Host?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <form action="/admin/hosts/<%= host._id %>?_method=DELETE" method="POST">
                        <button type="submit" class="btn btn-danger">Delete Host</button>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <script src="/js/adminEventHost.js"></script>