{% extends "base.html" %}
{% load static %}

{% block title %}
    Venues | 
{% endblock title %}

{% block style %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
{% endblock style %}

{% block header_buttons %}
{% endblock header_buttons %}

{% block content %}

<div class="d-flex flex-column flex-grow-1">

    <div class="m-1 m-sm-4 mb-0 mt-4 row">
        <div class="col-xl-4 col-md-8 mb-md-0 mb-4">
            <div class="input-group">
                <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
                    <i class="bi bi-sort-up"></i>
                </button>
                <input type="search" name="search" id="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Venues">
                <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
            </div>
        </div>
        <div class="col-xl-3 col-md-4">
            <div class="input-group d-flex justify-content-md-end">
                <button class="btn border-secondary-subtle btn-outline-company" id="addVenue" onclick="openVenueModal(-1);" data-bs-toggle="tooltip" data-bs-title="Add Venue" data-bs-custom-class="light-tooltip">
                    <i class="bi bi-plus-lg"></i>
                </button>
                <button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="importVenue" data-bs-toggle="tooltip" data-bs-title="Import Venue" data-bs-custom-class="light-tooltip">
                    <i class="bi bi-upload"></i>
                </button>

                <button class="btn border-secondary-subtle btn-outline-company rounded-start" id="ContractView" data-bs-toggle="tooltip" data-bs-title="List View" data-bs-custom-class="light-tooltip">
                    <i class="bi bi-list-task"></i>
                </button>
                <button class="btn border-secondary-subtle btn-outline-company" id="expandView" data-bs-toggle="tooltip" data-bs-title="Grid View" data-bs-custom-class="light-tooltip">
                    <i class="bi bi-grid"></i>
                </button>
            </div>

        </div>
    </div>

    <div class="row m-1 mx-sm-4 my-2">
        <div class="col-xl-7">
            <hr>
        </div>
    </div>

    <div class="m-1 m-sm-4 mt-0 row row-cols-xxl-5 row-cols-xl-4 row-cols-lg-3 g-3">
        {% for venue in venues %}
            <div class="">
                <div class="card w-100 h-100 border-0 rounded-3 overflow-hidden">
                    <div class="card-body bg-body-tertiary position-relative">
                        <div class="d-flex justify-content-between align-items-stretch h-100">
                            <div>
                                <h5 class="card-title fw-semibold">{{ venue.name }}</h5>
                                <p class="card-text mb-0">{{ venue.street_address }}</p>
                                <p class="card-text mb-0">{{ venue.city }}, {{ venue.provence }}</p>
                                <p class="card-text mb-3">{{ venue.postal_code }}</p>
                                <div class="text-body-secondary">
                                    <p class="card-text mb-0">{{ venue.phone_number }}</p>
                                    <p class="card-text mb-0">{{ venue.email_address }}</p>
                                </div>
                            </div>
                            <div class="d-flex flex-column justify-content-end align-items-end">
                                <div class="badge company-bg rounded-pill end-0 top-0">
                                    6 Waters
                                </div>
                                <button class="mt-auto btn btn-outline-company rounded-circle" style="width: fit-content;" onclick="openVenueModal({{ venue.id }});">
                                    <i class="bi bi-gear"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="card w-100 h-100  shadow-sm overflow-hidden flex-row fluid-hover-zoom md-shadow-on-hover" data-venue-id="{{ venue.id }}">
                    <div class="card-body d-flex">
                        <div class="d-flex flex-column">
                            <h5 class="card-title text-company mb-0">{{ venue.name }}</h5>
                            <div class="fw-bold mb-3">
                                <p class="mb-0">{{ venue.type }}</p>
                            </div>
                            <div class="text-body-secondary mb-3">
                                <p class="mb-0">{{ venue.street_address }}</p>
                                <p class="mb-0">{{ venue.city }}, {{ venue.provence }}</p>
                                <p class="mb-0">{{ venue.postal_code }}</p>
                            </div>
                            <div class="text-body-secondary mb-3">
                                <p class="mb-0">{{ venue.phone_number }}</p>
                                <p class="mb-0">{{ venue.email_address }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column">
                        <div class="btn-group btn-group-vertical m-3 mt-auto">
                            <a class="btn btn-outline-company rounded-top-4" href="{{ venue.id }}">
                                <i class="bi bi-eye-fill"></i>
                            </a>
                            <button class="btn btn-outline-company rounded-bottom-4 ms-0" onclick="openVenueModal({{ venue.id }});">
                                <i class="bi bi-pencil-fill"></i>
                            </button>
                        </div>
                    </div>
                </div> -->
            </div>
        {% endfor %}
    </div>
</div>

<div id="venueModal" class="modal fade" data-venue-id="-1">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content overflow-hidden rounded-4" style="min-height: 760px;">
            <div class="modal-header company-bg justify-content-center">
                <h4 class="card-title text-light fw-bold mb-0">
                    <span class="create" style="display: none">New Venue</span>
                    <span class="edit" style="display: none">Edit Venue</span>
                </h4>
            </div>
            <form id="venueForm" class="mb-0 needs-validation" novalidate>
                <div class="modal-body border-bottom-0 p-0 overflow-hidden">
                    <ul id="newVenueTabBtns" class="nav nav-pills mb-4 d-flex w-100 justify-content-center py-2 bg-light" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button id="newVenueDetailsTabBtn" class="nav-link rounded-4 active" data-bs-toggle="pill" data-bs-target="#newVenueDetailsTab" type="button" role="tab" aria-controls="newVenueDetailsTab" aria-selected="true">Details</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button id="newVenueAddressTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueAddressTab" type="button" role="tab" aria-controls="newVenueAddressTab" aria-selected="false">Address</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button id="newVenueContactTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueContactTab" type="button" role="tab" aria-controls="newVenueContactTab" aria-selected="false">Contact</button>                            
                        </li>
                        <li class="nav-item" role="presentation">
                            <button id="newVenueWatersTabBtn" class="nav-link rounded-4" data-bs-toggle="pill" data-bs-target="#newVenueWatersTab" type="button" role="tab" aria-controls="newVenueWatersTab" aria-selected="false">Waters</button>
                        </li>
                    </ul>
                    <div class="px-2 px-sm-4 pb-0">
                            <div id="newVenueTabs" class="tab-content">
                                <div id="newVenueDetailsTab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="newVenueDetailsTabBtn" tabindex="0">
                                    <div class="row g-4 align-items-start mb-3">
                                        <div class="col-12">
                                            <div class="form-floating">
                                                <input name="venueName" id="venueName" type="text" class="form-control" placeholder="" minlength="3" maxlength="100" required>
                                                <label for="venueName" class="form-label">
                                                    Name <strong class="text-danger">&ast;</strong>
                                                </label>
                                                <div class="invalid-feedback">Please enter the Venue's name</div>
                                            </div>
                                        </div>
                                        <div class="col-sm-7">
                                            <div class="form-floating">
                                                <select name="venueType" id="venueType" class="form-select" placeholder="" required>
                                                    <option disabled value="">Choose one ...</option>
                                                    {% for type in venue_types %}
                                                    <option value="{{ type.0 }}">{{ type.1 }}</option>
                                                    {% endfor %}
                                                </select>
                                                <label for="venueType" class="form-label">
                                                    Type of Venue <strong class="text-danger">&ast;</strong>
                                                </label>
                                                <div class="invalid-feedback">Please select a Venue type</div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-floating">
                                                <textarea name="venueDescription" id="venueDescription" type="text" class="form-control venue-textarea" placeholder="" maxlength="500"></textarea>
                                                <label for="venueDescription" class="form-label">
                                                    Description
                                                </label>
                                                <div class="invalid-feedback">Please enter a brief description of the Venue</div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-floating">
                                                <textarea name="venueExtraNotes" id="venueExtraNotes" type="text" class="form-control venue-textarea" placeholder="" maxlength="500"></textarea>
                                                <label for="venueExtraNotes" class="form-label">Extra Notes</label>
                                                <div class="invalid-feedback">Please enter any additional notes regarding the Venue</div>  
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="newVenueAddressTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueAddressTabBtn" tabindex="0">
                                    <div class="mb-3">
                                        <div class="form-floating">
                                            <input name="venueStreetAddress" id="venueStreetAddress" type="text" class="form-control" placeholder="" required>
                                            <label for="venueStreetAddress" class="form-label">
                                                Street Address <strong class="text-danger">&ast;</strong>
                                            </label>
                                            <div class="invalid-feedback">Please enter a valid Street Address</div>
                                        </div>
                                    </div>
                                    <div class="row g-4 align-items-start mb-3">
                                        <div class="col-6">
                                            <div class="form-floating">
                                                <input name="venueCity" id="venueCity" type="text" class="form-control" placeholder="" required>
                                                <label for="venueCity" class="form-label">
                                                    Town or City <strong class="text-danger">&ast;</strong>
                                                </label>
                                                <div class="invalid-feedback">Please enter a Town or City</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-floating">
                                                <input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="" required>
                                                <label for="venueProvence" class="form-label">
                                                    Provence <strong class="text-danger">&ast;</strong>
                                                </label>
                                                <div class="invalid-feedback">Please enter a Provence</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-floating">
                                                <input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="" required>
                                                <label for="venuePostCode" class="form-label">
                                                    Postal Code <strong class="text-danger">&ast;</strong>
                                                </label>
                                                <div class="invalid-feedback">Please enter a Postal Code</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-floating">
                                                <!-- <input name="venueCountry" id="venueCountry" type="text" class="form-control" placeholder="" required> -->
                                                <select name="venueCountry" id="venueCountry" class="form-select" placeholder="" disabled required>
                                                    <option value="UK">United Kingdom</option>
                                                </select>
                                                <label for="venueCountry" class="form-label">
                                                    Country <i class="bi bi-lock-fill text-warning-emphasis"></i>
                                                </label>
                                                <div class="invalid-feedback">Please enter a Country</div>
                                            </div>
                                        </div>
                                        <div class="d-none">
                                            <input type="hidden" name="venueLatitude" id="venueLatitude">
                                            <input type="hidden" name="venueLongitude" id="venueLongitude">
                                        </div>
                                        <div class="col-12">
                                            <div id="locationMapContainer" class="w-100 position-relative" style="height: 225px;">
                                                <div id="locationMap" class="rounded-2 w-100 h-100"></div>
                                                <div id="locationMapOverlay" style="display: none;">
                                                    <div class="spinner"></div>
                                                </div>
                                            </div>
                                            <span class="form-text">(<strong>Disclaimer&colon;</strong> results fetched from clicking the map may be inaccurate)</span>
                                        </div>
                                    </div>
                                </div>
                                <div id="newVenueContactTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueContactTabBtn" tabindex="0">
                                    <div class="row g-4 align-items-start">
                                        <div class="col-6">
                                            <div class="form-floating">
                                                <input name="venuePhone" id="venuePhone" type="tel" class="form-control" placeholder="">
                                                <label for="venuePhone" class="form-label">Phone Number</label>
                                                <div class="invalid-feedback">Bad phone number</div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-floating">
                                                <input name="venueEmail" id="venueEmail" type="email" class="form-control" placeholder="">
                                                <label for="venueEmail" class="form-label">Email Address</label>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-floating">
                                                <input name="venueWebsite" id="venueWebsite" type="url" class="form-control" placeholder="">
                                                <label for="venueWebsite" class="form-label">Website Address</label>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="bi bi-twitter" style="color: #1DA1F2"></i>
                                                </span>
                                                <div class="form-floating">
                                                    <input name="venueTwitter" id="venueTwitter" type="url" class="form-control" placeholder="">
                                                    <label for="venueTwitter" class="form-label d-flex align-items-center">
                                                        Twitter Profile Address
                                                    </label>
                                                    <div class="invalid-feedback"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="bi bi-facebook" style="color: #4267B2"></i>
                                                </span>
                                                <div class="form-floating">
                                                    <input name="venueFacebook" id="venueFacebook" type="url" class="form-control" placeholder="">
                                                    <label for="venueFacebook" class="form-label d-flex align-items-center">
                                                        Facebook Profile Address
                                                    </label>
                                                    <div class="invalid-feedback"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="bi bi-instagram" style="color: #D62976;"></i>
                                                </span>
                                                <div class="form-floating">
                                                    <input name="venueInstagram" id="venueInstagram" type="url" class="form-control" placeholder="">
                                                    <label for="venueInstagram" class="form-label d-flex align-items-center">
                                                        Instagram Profile Address
                                                    </label>
                                                    <div class="invalid-feedback"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="newVenueWatersTab" class="tab-pane fade" role="tabpanel" aria-labelledby="newVenueWatersTabBtn" tabindex="0">
                                    <div class="pb-5 pt-0 d-flex justify-content-between align-items-center">
                                        <button class="btn btn-outline-secondary rounded-4 d-flex align-items-center">
                                            <i class="bi bi-info-lg"></i>
                                        </button>
                                        <button class="btn btn-outline-company rounded-4 d-flex align-items-center">
                                            <span>Add Waters</span>
                                        </button>
                                    </div>
                                    <ul class="list-unstyled overflow-y-auto" style="max-height: 450px;">
                                        <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
                                                <p class="mb-0">Commercial Water</p>
                                                <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                            </div>
                                            <div class="d-flex flex-column align-self-stretch">
                                                <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
                                                <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
                                                <p class="mb-0">Commercial Water</p>
                                                <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                            </div>
                                            <div class="d-flex flex-column align-self-stretch">
                                                <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
                                                <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
                                                <p class="mb-0">Commercial Water</p>
                                                <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                            </div>
                                            <div class="d-flex flex-column align-self-stretch">
                                                <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
                                                <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
                                                <p class="mb-0">Commercial Water</p>
                                                <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                            </div>
                                            <div class="d-flex flex-column align-self-stretch">
                                                <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
                                                <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
                                                <p class="mb-0">Commercial Water</p>
                                                <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                            </div>
                                            <div class="d-flex flex-column align-self-stretch">
                                                <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
                                                <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
                                                <p class="mb-0">Commercial Water</p>
                                                <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                            </div>
                                            <div class="d-flex flex-column align-self-stretch">
                                                <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
                                                <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
                                                <p class="mb-0">Commercial Water</p>
                                                <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                            </div>
                                            <div class="d-flex flex-column align-self-stretch">
                                                <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
                                                <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-start mb-4">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">Section A · Coal Wharf, Market Drayton</div>
                                                <p class="mb-0">Commercial Water</p>
                                                <p class="mb-0 text-body-secondary">Specimen Carp</p>
                                            </div>
                                            <div class="d-flex flex-column align-self-stretch">
                                                <span class="badge company-bg rounded-pill mb-4">1 · 36</span>
                                                <button class="btn btn-outline-secondary small rounded-4 mt-auto">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </button>
                                            </div>
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>
                        
                    </div>
                </div>
                <div class="modal-footer bg-light border-top-0 px-4 py-3">
                    <!-- <button type="button" class="btn btn-outline-danger rounded-4 me-auto px-3 edit" style="display: none">Delete</button>
                    <button type="button" class="btn btn-outline-secondary me-3 rounded-4 px-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="saveVenue" class="btn btn-company rounded-4 px-3" form="venueForm">
                        <span class="edit" style="display: none;">Save Edit</span>
                        <span class="create" style="display: none;">Save New</span>
                    </button> -->
                    <button type="button" class="btn btn-outline-danger rounded-4">
                        <i class="bi bi-trash2"></i>
                    </button>
                    <div class="mx-auto">
                        <!-- <button type="button" id="newVenueTabLeft" class="btn btn-company rounded-4 me-1" disabled>
                            <i class="bi bi-chevron-left"></i>
                        </button> -->
                        <button type="submit" id="saveVenue" class="btn btn-company rounded-4 px-4" form="venueForm">
                            <!-- <i class="bi bi-floppy"></i> -->
                            <span class="edit" style="display: none;">Save Edit</span>
                            <span class="create" style="display: none;">Save New</span>
                        </button>
                        <!-- <button type="button" id="newVenueTabRight" class="btn btn-company rounded-4 ms-1">
                            <i class="bi bi-chevron-right"></i>
                        </button> -->
                    </div>
                    <button type="button" class="btn btn-outline-secondary rounded-4" data-bs-dismiss="modal">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
  

{% endblock content %}

{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
<script src="{% static 'js/mainapp/venues.js' %}" data-csrfmiddlewaretoken="{{ csrf_token }}"></script>
{% endblock scripts %}
