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

{% block import %}
    {% load pwa %}
{% endblock %}

{% block meta %}
    {% pwa_meta_data %}
{% endblock %}

{% block h-script %}
    {% pwa_meta_script %}
{% endblock %}

{% block links %}
    <link rel="manifest" crossorigin="use-credentials" href="{% static 'manifest.json' %}"/>
{% endblock %}

{% block title %} GeoPharma {% endblock %}

{% block content %}
    <div class="container">
        <div class="logo-container">
            <img src="{% static 'assets/logo.png' %}" alt="Logo GeoPharma" class="img-fluid">
            <h3>GeoPharma</h3>
        </div>

        <form hx-post="https://geopharma.pulviontechnology.com/api/pharmacies/" hx-trigger="submit" hx-target="#toast"
              id="createPharmacyForm">
            {% csrf_token %}
            <h3>AJOUTER PHARMACIE</h3>
            <p>Tous les champs avec [<span class="text-danger">*</span>] sont obligatoires</p>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="nomPharmacie" class="form-label">NOM PHARMACIE [<span
                            class="text-danger">*</span>]</label>
                    <input type="text" class="form-control" placeholder="Nom de la pharmacie"
                           id="nomPharmacie" name="nomPharmacie" aria-describedby="basic-addon3" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="adressePharmacie" class="form-label">
                        ADRESSE [<span class="text-danger">*</span>]
                    </label>
                    <input type="text" class="form-control" id="adressePharmacie" name="adressePharmacie"
                           aria-describedby="basic-addon3" placeholder="Adresse (ex. 11 rue Djambala)">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="villePharmacie" class="form-label">
                        SÉLECTIONNER LA VILLE [<span class="text-danger">*</span>]</label>
                    <select class="form-select" id="villePharmacie" name="villePharmacie" required>
                        <option selected>Veuillez choisir une ville</option>
                        <option value="1">Brazzaville</option>
                        <option value="2">Pointe-Noire</option>
                        <option value="3">Dolisie</option>
                        <option value="4">Nkayi</option>
                        <option value="5">Owando</option>
                        <option value="6">Ouesso</option>
                        <option value="7">Oyo</option>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="quartierPharmacie" class="form-label">QUARTIER [<span
                            class="text-danger">*</span>]</label>
                    <input type="text" class="form-control" id="quartierPharmacie" name="quartierPharmacie"
                           aria-describedby="basic-addon3" placeholder="Quartier de la pharmacie" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="longitudePharmacie" class="form-label">
                        LONGITUDE [<span class="text-danger">*</span>]
                    </label>
                    <input type="text" class="form-control" id="longitudePharmacie" name="longitudePharmacie"
                           aria-describedby="basic-addon3" placeholder="Longitude" required
                           onfocus="getPharmacieLocation()">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="latitudePharmacie" class="form-label">
                        LATITUDE [<span class="text-danger">*</span>]
                    </label>
                    <input type="text" class="form-control" id="latitudePharmacie" name="latitudePharmacie"
                           aria-describedby="basic-addon3" placeholder="latitude" required
                           onfocus="getPharmacieLocation()">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="telephonePharmacie" class="form-label">TÉLÉPHONE</label>
                    <input type="text" class="form-control" id="telephonePharmacie" name="telephonePharmacie"
                           aria-describedby="basic-addon3" placeholder="Téléphone">
                </div>

                <div class="col-md-12">
                    <input type="submit" value="Enregistrer" class="btn btn-success">
                    <input type="reset" value="Annuler" class="btn btn-danger ms-3">
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script>
        const latitudePharmacie = document.querySelector('#latitudePharmacie');
        const longitudePharmacie = document.querySelector('#longitudePharmacie');

        htmx.on("pharmacyCreate", (e) => {
            console.log(e.detail.status);
            
            const Toast = Swal.mixin({
            toast: true,
            position: "center",
            showConfirmButton: false,
            timer: 5000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
                }
            });

            if (e.detail.status === 204) {
                Toast.fire({
                    icon: "success",
                    title: e.detail.msg
                });
                document.getElementById('createPharmacyForm').reset();
            } else {
                Toast.fire({
                    icon: "error",
                    title: e.detail.msg,
                    backdrop: true
                });
            }
        })

        const getPharmacieLocation = () => {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                alert("La géolocalisation n'est pas supportée par ce navigateur.");
            }
        }

        function showPosition(position) {
            latitudePharmacie.value = position.coords.latitude;
            longitudePharmacie.value = position.coords.longitude;
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("L'utilisateur a refusé la demande de géolocalisation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Les informations de localisation ne sont pas disponibles.");
                    break;
                case error.TIMEOUT:
                    alert("La demande de géolocalisation a expiré.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("Une erreur inconnue s'est produite.");
                    break;
            }
        }
    </script>
{% endblock %}