{% 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="bg-body-tertiary pb-5">

    <div class="row px-2 gx-3 bg-body shadow-sm border-bottom">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center p-2 flex-wrap">
                <h1 class="fw-bold h4 mb-0 ms-2">Venues &amp; Waters</h1>
                <div class="input-group w-auto">
                    <div class="input-group-text bg-white pe-0">
                        <i class="bi bi-search"></i>
                    </div>
                    <input type="search" class="form-control border-start-0" placeholder="Search Venues">
                </div>
                <div class="d-flex flex-row align-items-center">
                    <button class="btn btn-primary rounded-2 me-3" onclick="openVenueModal(-1);">
                        <i class="bi bi-plus-lg me-1"></i>
                        New
                    </button>
                    <button class="btn btn-outline-secondary border-secondary-subtle rounded-2 me-3">
                        <i class="bi bi-upload me-1"></i>
                        Import
                    </button>
                    <button class="btn btn-outline-secondary border-secondary-subtle rounded-2 me-3">
                        <i class="bi bi-sort-alpha-up me-sm-1"></i>
                        <i class="bi bi-chevron-down"></i>
                    </button>
                    <button class="btn btn-outline-secondary border-secondary-subtle rounded-2">
                        <i class="bi bi-filter-right me-sm-1"></i>
                        <i class="bi bi-chevron-down"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="row flex-row-reverse mt-2 gy-2 gx-3 mx-2">
        <div class="col-lg-3 d-flex flex-column">
            <!-- <div class="d-flex justify-content-between align-items-center bg-light rounded-2 p-2 shadow-sm border mb-3">
                <button class="btn btn-light text-dark border">
                    test
                </button>
            </div> -->
            <div id="locationMapContainer" class="w-100 position-relative mb-3 border shadow-sm rounded-2" style="height: 300px;">
                <div id="allLocationsMap" class="rounded-2 w-100 h-100"></div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="row g-3">
                {% for venue in venues %}
                    <div class="col-xxl-3 col-xl-6 col-md-6 col-sm-12">
                        <div class="border rounded-2 p-4 h-100 bg-body shadow-sm d-flex flex-column">
                            <header class="d-flex justify-content-between align-items-start mb-2 dropend">
                                <div class="text-truncate">
                                    <h4 class="h6 mb-0 text-body-secondary small">
                                        {% if venue.venue_type == "FISHERY" %}
                                        Fishery
                                        {% elif venue.venue_type == "PRIVATE" %}
                                        Private
                                        {% elif venue.venue_type == "CLUB" %}
                                        Club
                                        {% endif %}
                                    </h4>
                                    <h3 class="h5 mb-0 me-2 text-truncate">{{ venue.name }}</h3>
                                </div>
                                <button class="border-0 bg-transparent" type="button" data-bs-toggle="dropdown">
                                    <i class="bi bi-three-dots fs-4 d-flex"></i>
                                </button>
                                <ul class="dropdown-menu rounded-4 overflow-hidden py-0 shadow-sm" style="width: fit-content; min-width: fit-content;">
                                    <li>
                                        <button class="dropdown-item py-2">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider my-0">
                                    </li>
                                    <li>
                                        <button class="dropdown-item py-2" onclick="openVenueModal({{ venue.id }});">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider my-0">
                                    </li>
                                    <li>
                                        <button class="dropdown-item py-2 hover-fill-danger">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </li>
                                </ul>
                            </header>
                            <p class="text-secondary venue-description">{{ venue.description }}</p>
                            <div class="d-flex align-items-center fs-6 mt-auto">
                                {% if venue.email_address %}
                                <a href="mailto:{{ venue.email_address }}" class="text-reset text-hover-primary me-2" data-bs-toggle="tooltip" data-bs-title="{{ venue.email_address }}">
                                    <i class="bi bi-envelope-at"></i>
                                </a>
                                {% endif %}
                                {% if venue.phone_number %}
                                <a href="tel:{{ venue.phone_number }}" class="text-reset text-hover-primary me-2" data-bs-toggle="tooltip" data-bs-title="{{ venue.phone_number }}">
                                    <i class="bi bi-telephone"></i>
                                </a>
                                {% endif %}
                                {% if venue.latitude and venue.longitude %}
                                <a href="https://www.openstreetmap.org/?mlat={{ venue.latitude }}&mlon={{ venue.longitude }}" target="_blank" class="text-reset text-hover-primary me-2" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="{{ venue.street_address }}<br>{{ venue.city }}, {{ venue.provence }}<br>{{ venue.postal_code }}">
                                    <i class="bi bi-geo-alt"></i>
                                </a>
                                {% endif %}
                                {% if venue.website_url %}
                                <a href="{{ venue.website_url }}" class="text-reset text-hover-primary me-2" target="_blank" data-bs-toggle="tooltip" data-bs-title="{{ venue.website_url }}">
                                    <i class="bi bi-globe2"></i>
                                </a>
                                {% endif %}
                                <div class="d-inline mx-auto"></div>
                                {% if venue.waters %}
                                <div class="badge bg-info-subtle text-info-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="There are {{ venue.waters|length }} waters in this venue">
                                    {{ venue.waters|length }}
                                    <i class="bi bi-droplet-half "></i>
                                </div>
                                {% endif %}
                                {% if not venue.latitude or not venue.longitude or not venue.phone_number or not venue.website_url or not venue.email_address %}
                                    <div class="badge bg-warning-subtle text-warning-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="There are missing details for this venue">
                                        <i class="bi bi-exclamation-triangle"></i>
                                    </div>
                                {% endif %}
                                {% if not venue.active %}
                                    <div class="badge bg-danger-subtle text-danger-emphasis ms-2" data-bs-toggle="tooltip" data-bs-title="This venue is inactive">
                                        <i class="bi bi-x-lg"></i>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<div id="venueModal" class="modal fade" data-venue-id="-1">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down modal-lg">
        <div class="modal-content overflow-hidden rounded-4" style="min-height: 760px; max-height: 760px;">
            <div class="modal-header justify-content-center">
                <h4 class="card-title fw-bold mb-0">
                    <span class="create" style="display: none">New Venue</span>
                    <span class="edit" style="display: none">Edit Venue</span>
                </h4>
            </div>
            <div class="modal-body border-bottom-0 p-0 overflow-x-hidden overflow-y-auto">
                <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">
                    <form id="venueForm" n class="needs-validation" novalidate>
                        <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="row flex-row-reverse">
                                    <div class="col-lg-6">
                                        <div class="form-floating mb-4">
                                            <input name="venueStreetAddress" id="venueStreetAddress" type="text" class="form-control" placeholder="" required disabled>
                                            <label for="venueStreetAddress" class="form-label">
                                                Street Address <span class="text-danger">&ast;</span>
                                            </label>
                                            <div class="invalid-feedback"></div>
                                        </div>
                                        <div class="form-floating mb-4">
                                            <input name="venueCity" id="venueCity" type="text" class="form-control" placeholder="" required disabled>
                                            <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 class="form-floating mb-4">
                                            <input name="venueProvence" id="venueProvence" type="text" class="form-control" placeholder="" required disabled>
                                            <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 class="form-floating mb-4">
                                            <input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="" required disabled>
                                            <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 class="form-floating mb-4">
                                            <input name="venueLatitude" id="venueLatitude" type="text" class="form-control" placeholder="" required disabled>
                                            <label for="venueLatitude" class="form-label">
                                                Latitude <strong class="text-danger">&ast;</strong>
                                            </label>
                                            <div class="invalid-feedback">Please enter a Latitude</div>
                                        </div>
                                        <div class="form-floating">
                                            <input name="venueLongitude" id="venueLongitude" type="text" class="form-control" placeholder="" required disabled>
                                            <label for="venueLongitude" class="form-label">
                                                Longitude <strong class="text-danger">&ast;</strong>
                                            </label>
                                            <div class="invalid-feedback">Please enter a Longitude</div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 d-flex flex-column">
                                        <div class="col-lg-8 input-group">
                                            <span class="input-group-text bg-white pe-0">
                                                <i class="bi bi-search"></i>
                                            </span>
                                            <input name="searchPostCode" id="searchPostCode" type="text" class="form-control border-start-0" list="postcodeSearchDataList" placeholder="Search by Post Code ...">
                                        </div>
                                        <datalist id="postcodeSearchDataList">
                                            <option value="london street">london street</option>
                                        </datalist>
                                        <div class="separator my-3 text-secondary">
                                            <span>or</span>
                                        </div>
                                        <h5 class="h6 text-body-secondary">Search by selecting a location on the map ...</h5>
                                        <div id="locationMapContainer" class="w-100 position-relative flex-grow-1" >
                                            <div id="locationMap" class="location-map rounded-2 w-100 h-100"></div>
                                            <div id="locationMapOverlay" style="display: none;">
                                                <div class="spinner"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- <div class="form-floating mb-3">
                                    <input name="venuePostCode" id="venuePostCode" type="text" class="form-control" placeholder="" required>
                                    <label for="venuePostCode" class="form-label">
                                        Post Code <strong class="text-danger">&ast;</strong>
                                    </label>
                                    <div class="invalid-feedback">Please enter a Post Code</div>
                                </div>
                                <button class="btn btn-primary">
                                    <i class="bi bi-search me-2"></i>
                                    Find Address
                                </button> -->


                                <!-- <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">
                                            <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="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>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-floating">
                                            <input name="venueLatitude" id="venueLatitude" type="text" class="form-control" placeholder="" required>
                                            <label for="venueLatitude" class="form-label">
                                                Latitude <strong class="text-danger">&ast;</strong>
                                            </label>
                                            <div class="invalid-feedback">Please enter a Latitude</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-floating">
                                            <input name="venueLongitude" id="venueLongitude" type="text" class="form-control" placeholder="" required>
                                            <label for="venueLongitude" class="form-label">
                                                Longitude <strong class="text-danger">&ast;</strong>
                                            </label>
                                            <div class="invalid-feedback">Please enter a Longitude</div>
                                        </div>
                                    </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>
                        </div>
                    </form>
                </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 edit">
                    <i class="bi bi-trash2"></i>
                </button>                
                <button type="submit" id="saveVenue" class="btn btn-primary rounded-4 px-4" 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-secondary rounded-4 ms-auto" data-bs-dismiss="modal">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block scripts %}
<script>
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {trigger : 'hover'}))

    $('[data-toggle="tooltip"]').tooltip()  
</script>
<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 %}