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


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

{% compress css %}
    <link type="text/x-scss" rel="stylesheet" href="{% static 'home/scss/index.scss' %}">
{% endcompress %}
{% endblock stylesheets %}

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

{% block content %}
<div class="px-4 bg-body shadow mb-5">
    <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-body 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 class="row flex-row-reverse my-4 mx-lg-4">
    <div class="col-lg-3 d-flex flex-column">
        <div id="locationMapContainer" class="w-100 position-relative shadow mb-4 bg-body rounded-3 overflow-hidden" style="height: 300px;">
            <div id="allLocationsMap" class="w-100 h-100"></div>
        </div>
        <div class="bg-body rounded-3 p-4 flex-grow-1 shadow mb-3">
            <div class="text-body small">
                placeholder<br>
                maybe a graph here?
            </div>
        </div>
    </div>
    <div class="col-lg-9">
        <div class="row gx-3 px-2 mt-0">
            {% for venue in venues %}
                <div class="col-xxl-4 col-xl-6 col-md-6 col-sm-12 mb-3">
                    <div class="rounded-2 h-100 p-4 bg-body shadow d-flex flex-column">
                        <header class="d-flex justify-content-between align-items-start mb-3 dropend">
                            <div class="text-truncate">
                                <h4 class="h6 mb-1 text-body-secondary small">
                                    {% if venue.venue_type == "FISHERY" %}
                                    Fishery
                                    {% elif venue.venue_type == "PRIVATE" %}
                                    Private
                                    {% elif venue.venue_type == "CLUB" %}
                                    Club
                                    {% endif %}
                                </h4>
                                <h4 class="h6 mb-0 me-2 text-truncate fw-bold">{{ venue.name }}</h4>
                            </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 hover-fill-primary py-2" onclick="viewVenueModal({{ venue.id }})">
                                        <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" onclick="deleteVenueBtn({{ venue.id }});">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </li>
                            </ul>
                        </header>
                        <p class="text-body-secondary venue-description mb-4">{{ 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-3" 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-3" 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-3" 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-3" 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 class="col-xxl-4 col-xl-6 col-md-6 col-sm-12">
                <div class="fluid-hover-zoom h-100 d-flex flex-column justify-content-center align-items-center" role="button" onclick="openVenueModal(-1);">
                    <i class="bi bi-plus-lg fs-1"></i>
                    <span class="fw-bold">
                        Create new
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="venueModal" class="modal fade" data-venue-id="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-truncate me-5">New Venue</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="venueForm" class="flex-md-grow-1 d-flex" novalidate>
                <div class="row g-0 flex-md-grow-1">
                    <div class="col-md-1">
                        <div id="sidebarNavigation" class="bg-body-tertiary">
                            <div class="modal-sidebar flex-row flex-md-column align-items-start text-center" role="tablist">
                                <button id="detailsTab" class="modal-sidebar-btn active" type="button" data-bs-toggle="tab" data-bs-target="#detailsContent" role="tab" aria-controls="detailsContent" aria-selected="true">
                                    <i class="bi bi-file-earmark-text"></i>
                                </button>
                                <button id="addressTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#addressContent" role="tab" aria-controls="addressContent" aria-selected="false">
                                    <i class="bi bi-geo-alt"></i>
                                </button>
                                <button id="contactTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#contactContent" role="tab" aria-controls="contactContent" aria-selected="false">
                                    <i class="bi bi-telephone"></i>
                                </button>
                                <button id="watersTab" class="modal-sidebar-btn" type="button" data-bs-toggle="tab" data-bs-target="#watersContent" role="tab" aria-controls="watersContent" aria-selected="false">
                                    <i class="bi bi-droplet-half"></i>
                                </button>
                                <button id="confirmTab" class="modal-sidebar-btn mt-md-auto" type="button" data-bs-toggle="tab" data-bs-target="#confirmContent" role="tab" aria-controls="confirmContent" aria-selected="false">
                                    <i class="bi bi-check-lg"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-11 overflow-auto">
                        <div class="tab-content d-inline-block w-100 h-100 py-3 px-4">
                            <div id="detailsContent" class="tab-pane fade flex-column h-100 show active">
                                <div class="form-floating mb-4">
                                    <input type="text" name="venueName" id="venueName" class="form-control" placeholder="">
                                    <label for="venueName" class="form-label">Venue Name</label>
                                </div>
                                <div class="form-floating mb-4">
                                    <textarea name="venueDesc" id="venueDesc" class="form-control" style="height: 150px; resize: none;" placeholder=""></textarea>
                                    <label for="venueDesc" class="form-label">Description</label>
                                </div>
                                <div class="mb-4">
                                    <div class="form-check form-check-inline">
                                        <input type="radio" name="venueType" id="venueFishery" class="form-check-input" value="FISHERY">
                                        <label for="venueFishery" class="form-check-label">Fishery</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" name="venueType" id="venueClub" class="form-check-input" value="CLUB">
                                        <label for="venueClub" class="form-check-label">Club</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" name="venueType" id="venuePrivate" class="form-check-input" value="PRIVATE">
                                        <label for="venuePrivate" class="form-check-label">Private</label>
                                    </div>
                                </div>
                                <div class="form-check form-switch">
                                    <input type="checkbox" name="venueActive" id="venueActive" class="form-check-input">
                                    <label for="venueActive" class="form-check-label">Venue is active?</label>
                                </div>
                                <div class="mt-5 mt-md-auto d-flex justify-content-end">
                                    <button class="btn btn-primary px-3" type="button" onclick="$('#addressTab').click();">Next</button>
                                </div>
                            </div>
                            <div id="addressContent" class="tab-pane fade flex-column h-100">
                                <div class="form-floating mb-4">
                                    <input type="text" name="venueSearch" id="venueSearch" class="form-control" placeholder="">
                                    <label for="venueSearch" class="form-label">
                                        <i class="bi bi-search me-1"></i>
                                        Post Code or Street Address
                                    </label>
                                </div>
                                <div id="venueSearchResults" style="display: none">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-floating mb-3">
                                                <input type="text" name="venueStreetNum" id="venueStreetNum" class="form-control-plaintext" placeholder="" readonly>
                                                <label for="venueStreetNum" class="form-label">Street Number</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating mb-3">
                                                <input type="text" name="venueStreet" id="venueStreet" class="form-control-plaintext" placeholder="" readonly>
                                                <label for="venueStreet" class="form-label">Street Address</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating mb-3">
                                                <input type="text" name="venueCity" id="venueCity" class="form-control-plaintext" placeholder="" readonly>
                                                <label for="venueCity" class="form-label">Town/City</label>
                                            </div>      
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating mb-3">
                                                <input type="text" name="venueCounty" id="venueCounty" class="form-control-plaintext" placeholder="" readonly>
                                                <label for="venueCounty" class="form-label">County/Region</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating mb-3">
                                                <input type="text" name="venuePost" id="venuePost" class="form-control-plaintext" placeholder="" readonly>
                                                <label for="venuePost" class="form-label">Post Code</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating mb-3">
                                                <input type="text" name="venueCountry" id="venueCountry" class="form-control-plaintext" placeholder="" readonly>
                                                <label for="venueCountry" class="form-label">Country</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating mb-3">
                                                <input type="text" name="venueLat" id="venueLat" class="form-control-plaintext" placeholder="" readonly>
                                                <label for="venueLat" class="form-label">Latitude</label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-floating mb-3">
                                                <input type="text" name="venueLng" id="venueLng" class="form-control-plaintext" placeholder="" readonly>
                                                <label for="venueLng" class="form-label">Longitude</label>
                                            </div>
                                        </div>
                                    </div>             
                                </div>
                                <div id="venueSearchHelper" class="my-auto text-center">
                                    <label for="venueSearch" class="fs-4 mx-lg-4 text-body-secondary">Use the search to find your venue.</label>
                                </div>
                                <div class="mt-5 mt-md-auto d-flex justify-content-end">
                                    <button class="btn btn-outline-secondary me-3" type="button" onclick="$('#detailsTab').click();">Back</button>
                                    <button class="btn btn-primary px-3" type="button" onclick="$('#contactTab').click();">Next</button>
                                </div>
                            </div>
                            <div id="contactContent" class="tab-pane fade flex-column h-100">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-floating mb-4">
                                            <input type="tel" name="venuePhone" id="venuePhone" class="form-control" placeholder="">
                                            <label for="venuePhone" class="form-label">Phone Number</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-floating mb-4">
                                            <input type="email" name="venueEmail" id="venueEmail" class="form-control" placeholder="">
                                            <label for="venueEmail" class="form-label">Email Address</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-floating mb-4">
                                    <input type="url" name="venueWebsite" id="venueWebsite" class="form-control" placeholder="">
                                    <label for="venueWebsite" class="form-label">Website URL</label>
                                </div>
                                <div class="form-floating mb-4">
                                    <input type="url" name="venueFacebook" id="venueFacebook" class="form-control" placeholder="">
                                    <label for="venueFacebook" class="form-label">Facebook URL</label>
                                </div>
                                <div class="form-floating mb-4">
                                    <input type="url" name="venueInstagram" id="venueInstagram" class="form-control" placeholder="">
                                    <label for="venueInstagram" class="form-label">Instagram URL</label>
                                </div>
                                <div class="form-floating mb-4">
                                    <input type="url" name="venueTwitter" id="venueTwitter" class="form-control" placeholder="">
                                    <label for="venueTwitter" class="form-label">Twitter URL</label>
                                </div>
                                <div class="mt-5 mt-md-auto d-flex justify-content-end">
                                    <button class="btn btn-outline-secondary me-3" type="button" onclick="$('#addressTab').click();">Back</button>
                                    <button class="btn btn-primary px-3" type="button" onclick="$('#watersTab').click();">Next</button>
                                </div>
                            </div>
                            <div id="watersContent" class="tab-pane fade flex-column h-100">
                                waters
                                <div class="mt-5 mt-md-auto d-flex justify-content-end">
                                    <button class="btn btn-outline-secondary me-3" type="button" onclick="$('#contactTab').click();">Back</button>
                                    <button class="btn btn-primary px-3" type="button" onclick="$('#confirmTab').click();">Next</button>
                                </div>
                            </div>
                            <div id="confirmContent" class="tab-pane fade flex-column h-100">
                                <h5 class="mb-3">Preview:</h5>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-floating mb-3 venue-preview-field">
                                            <input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueName">
                                            <label class="form-label">Venue Name</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-floating mb-3 venue-preview-field">
                                            <input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueDesc">
                                            <label class="form-label">Description</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-floating mb-3 venue-preview-field">
                                            <input type="text" class="form-control-plaintext" placeholder="" readonly data-linked-field="#venueType">
                                            <label class="form-label">Venue Type</label>
                                        </div>
                                    </div>
                                </div>
    
                                <div class="mt-5 mt-md-auto d-flex justify-content-end">
                                    <button class="btn btn-outline-secondary me-3" type="button" onclick="$('#watersTab').click();">Back</button>
                                    <button id="submitVenueBtn" class="btn btn-primary" type="submit">Save Changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- <div id="venueModal" class="modal fade" data-venue-id="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Venue</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div id="newVenuePages" class="modal-body">
                <div id="detailsPage" class="page active">
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" placeholder="">
                        <label for="" class="form-label">Name</label>
                    </div>
                    <div class="form-floating mb-3">
                        <textarea class="form-control venue-textarea" placeholder=""></textarea>
                        <label for="" class="form-label">Description</label>
                    </div>
                    <label class="form-label">Type</label>
                    <div class="mb-3 group-radio-btns">
                        <input type="radio" name="vType" id="vtFishery" class="btn-check">
                        <label for="vtFishery" class="btn btn-outline-primary">Fishery</label>
                        <input type="radio" name="vType" id="vtClub" class="btn-check">
                        <label for="vtClub" class="btn btn-outline-primary">Club</label>
                        <input type="radio" name="vType" id="vtPrivate" class="btn-check">
                        <label for="vtPrivate" class="btn btn-outline-primary">Private</label>
                    </div>
                </div>
                <div id="addressPage" class="page">
                    <label class="form-label">Type part of the address or postcode to begin</label>
                    <input type="text" class="form-control" placeholder="E.g. 'CR0 3RL' or '36 Factory Lane'">
                </div>
                <div id="contactPage" class="page">
                    <div class="row mb-3">
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="tel" class="form-control" placeholder="">
                                <label for="">Phone Number</label>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-floating">
                                <input type="email" class="form-control" placeholder="">
                                <label for="">Email Address</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="url" class="form-control" placeholder="">
                        <label for="">
                            <i class="bi bi-link-45deg"></i>
                            Website
                        </label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="url" class="form-control" placeholder="">
                        <label for="">
                            <i class="bi bi-link-45deg"></i>
                            Facebook
                        </label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="url" class="form-control" placeholder="">
                        <label for="">
                            <i class="bi bi-link-45deg"></i>
                            Instagram
                        </label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="url" class="form-control" placeholder="">
                        <label for="">
                            <i class="bi bi-link-45deg"></i>
                            Twitter 
                        </label>
                    </div>
                </div>
                <div id="watersPage" class="page">
                    Waters
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="newVenueBack" class="btn btn-secondary" style="display: none">
                    <i class="bi bi-arrow-left me-1"></i>
                    Back
                </button>
                <button type="button" id="newVenueNext" class="btn btn-primary">
                    Next
                    <i class="bi bi-arrow-right ms-1"></i>
                </button>
                <button type="button" id="newVenueFinished" class="btn btn-primary" style="display: none;">
                    Save Changes
                </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'}))
</script>
<script>
    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r, "places"]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
      key: "AIzaSyDFR2xw2LhMPb6FC8OrfiLrJZRMRLMocvw",
      v: "weekly",
    });
</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 %}+