{% extends 'Bootstrap.html' %}

{% block content %}
{% include 'siparis_nawbar_bst.html' %}
<div class="container mt-5">
    <h1 class="mb-4">Tee Tilaus</h1>
    <form method="post" class="mb-4">
        {% csrf_token %}

        <!-- Kullanıcı Bilgisi -->
        <div class="mb-3 d-flex align-items-center">
            <label class="form-label me-2">Käyttäjä: </label>
            <span class="fw-bold">{{ request.user.first_name }} {{ request.user.last_name }}</span>
        </div>

        <div id="reseptler">
            <div class="row mb-3 resept">
                <div class="mb-3 d-flex align-items-center">
                    <label for="teslimat_tarihi" class="form-label me-2">Toimituspäivä</label>
                    <input type="text" id="teslimat_tarihi" name="teslimat_tarihi" class="form-control w-auto" required>
                </div>
                <!-- Reçete Alanı -->
                <div class="col-md-4">
                    <label for="resept" class="form-label">Resepti</label>
                    
                    <div class="d-flex align-items-center">
                        <button type="button" class="btn btn-secondary btn-sm me-2" onclick="fetchReseptInfo(this)">RB</button>
                        <select name="resept" class="form-select" required>
                            {% for kullanici_resept in kullanici_reseptler %}
                            <option value="{{ kullanici_resept.resept.id }}">{{ kullanici_resept.resept.resept_etiket_adi }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                
                <!-- Miktar Alanı -->
                <div class="col-md-4">
                    <label for="miktar" class="form-label">Määrä</label>
                    <input type="number" name="adet" min="1" class="form-control" required>
                </div>
                
            </div>
        </div>

        <!-- + Yeni Reçete Ekle Butonu -->
        <button type="button" class="btn btn-success btn-sm mb-3" id="yeni_resept_ekle">+ Yeni Reçete Ekle</button>

        <!-- Tallenna Painike -->
        <div class="mt-4">
            <button type="submit" class="btn btn-primary">Tallenna Tilaus</button>
        </div>
    </form>
</div>

<!-- Bootstrap ve jQuery -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<script>
    $(document).ready(function(){
        // Kullanıcının teslimat günlerini al
        var teslimatGunleri = [
            {% for gun in teslimat_gunleri %}
                "{{ gun.gun }}",
            {% endfor %}
        ];

        console.log("Teslimat günleri:", teslimatGunleri);

        // Gün adlarını sayısal değerlere çevir (0 = Pazar, 1 = Pazartesi, ... 6 = Cumartesi)
        var gunlerMap = {
            "Pazartesi": 1,
            "Sali": 2,
            "Carsamba": 3,
            "Persembe": 4,
            "Cuma": 5,
            "Cumartesi": 6,
            "Pazar": 0
        };

        var teslimatGunleriIndex = teslimatGunleri.map(gun => gunlerMap[gun]);

        console.log("Teslimat günleri indexleri:", teslimatGunleriIndex);

        // Bugünden sonraki en yakın uygun tarihi bul
        function getEnYakinTeslimatTarihi() {
            var today = new Date();
            for (var i = 1; i <= 7; i++) {
                var kontrolTarihi = new Date();
                kontrolTarihi.setDate(today.getDate() + i);
                if (teslimatGunleriIndex.includes(kontrolTarihi.getDay())) {
                    return kontrolTarihi;
                }
            }
            return today; // Eğer bir hata olursa bugünü döndür
        }

        var enYakinTarih = getEnYakinTeslimatTarihi();

        // Datepicker ayarları
        $('#teslimat_tarihi').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            startDate: enYakinTarih,
            daysOfWeekDisabled: [0,1,2,3,4,5,6].filter(day => !teslimatGunleriIndex.includes(day))
        }).datepicker('setDate', enYakinTarih);
    });

    function fetchReseptInfo(buttonElement) {
        const reseptSelect = buttonElement.nextElementSibling;
        const selectedReseptId = reseptSelect.value;

        let parentDiv = buttonElement.closest('.row');
        let infoDiv = parentDiv.nextElementSibling;

        if (!infoDiv || !infoDiv.classList.contains('resept-info')) {
            infoDiv = document.createElement('div');
            infoDiv.className = 'resept-info';
            parentDiv.insertAdjacentElement('afterend', infoDiv);
        }

        if (infoDiv.style.display === "none" || infoDiv.style.display === "") {
            infoDiv.innerHTML = "<p class='loading'>Tietoja haetaan...</p>";
            infoDiv.style.display = "flex";

            fetch(`/resept-info/${selectedReseptId}/`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error("Verkkovirhe: Tietojen haku epäonnistui");
                    }
                    return response.json();
                })
                .then(data => {
                    infoDiv.innerHTML = `
                        <div><strong>Hinta:</strong> ${data.standart_fiyat} €</div>
                        <div><strong>Paino:</strong> ${data.resept_gram} gr</div>
                        <div><strong>Säilyvyysaika:</strong> ${data.raf_omru} pv</div>
                        <div><strong>Viivakoodi:</strong> ${data.barcod_no}</div>
                    `;
                })
                .catch(error => {
                    infoDiv.innerHTML = "<p class='text-danger'>Tietojen haku epäonnistui. Yritä uudelleen.</p>";
                    console.error("Error fetching resept info:", error);
                });
        } else {
            infoDiv.style.display = "none";
        }
    }

    document.getElementById('yeni_resept_ekle').addEventListener('click', function() {
        var reseptlerDiv = document.getElementById('reseptler');
        var yeniReseptDiv = document.createElement('div');
        yeniReseptDiv.className = 'row mb-3 resept';
        yeniReseptDiv.innerHTML = `
            <div class="col-md-4">
                <label for="resept" class="form-label">Resepti</label>
                <div class="d-flex align-items-center">
                    <button type="button" class="btn btn-secondary btn-sm me-2" onclick="fetchReseptInfo(this)">RB</button>
                    <select name="resept" class="form-select" required>
                        {% for kullanici_resept in kullanici_reseptler %}
                        <option value="{{ kullanici_resept.resept.id }}">{{ kullanici_resept.resept.resept_etiket_adi }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <label for="miktar" class="form-label">Määrä</label>
                <input type="number" name="adet" min="1" class="form-control" required>
            </div>
        `;
        reseptlerDiv.appendChild(yeniReseptDiv);
    });
</script>
{% endblock %}