{% load static %}
{% block content %}
{% include 'siparis_nawbar_bst.html' %}
{% load humanize %}
<form method="post" action="{% url 'siparis_ver' %}">
  {% csrf_token %}
  <div class="accordion" id="accordionKategori">
    {% for kategori, data in gruplar.items %}
      <div class="accordion-item">
        <h2 class="accordion-header" id="heading-{{ data.slug }}">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapse-{{ data.slug }}" aria-expanded="false"
            aria-controls="collapse-{{ data.slug }}">
            {{ kategori|title }}
          </button>
        </h2>
        <div id="collapse-{{ data.slug }}" class="accordion-collapse collapse"
          aria-labelledby="heading-{{ data.slug }}" data-bs-parent="#accordionKategori">
          <div class="accordion-body">
            <div class="row">
                {% for kr in data.reseptler %}
                  <div class="col-md-4">
                    <div class="card mb-3 h-100">
                      {% if kr.resept.resim %}
                        <img src="{{ kr.resept.resim.url }}" class="card-img-top" alt="{{ kr.resept.resept_adi }}" style="height: 200px; object-fit: cover;">
                      {% else %}
                        <img src="{% static 'SEF_resept.webp' %}" class="card-img-top" alt="Resim yok" style="height: 200px; object-fit: cover;">
                      {% endif %}
                      <div class="card-body">
                        <h5 class="card-title">{{ kr.resept.resept_adi }}</h5>
                        <p class="card-text mb-1">
                          <strong>Fiyat:</strong> {{ kr.ozel_fiyat|default:kr.resept.standart_fiyat }} €<br>
                          <strong>Barkod:</strong> {{ kr.resept.barcod_no }}
                        </p>
                        <p class="card-text mb-2">
                          <strong>Gramaj:</strong> {{ kr.resept.resept_gram }} gr<br>
                          <strong>Raf Ömrü:</strong> {{ kr.resept.raf_omru }} gün
                        </p>
                
                        <input type="hidden" name="resept" value="{{ kr.resept.id }}">
                        <input type="number" name="adet" min="0" class="form-control" placeholder="Adet girin">
                      </div>
                    </div>
                  </div>
                {% endfor %}
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="mt-4">
    <label for="teslimat_tarihi" class="form-label">Teslimat Tarihi:</label>
    <input type="date" name="teslimat_tarihi" class="form-control" required>
  </div>
  <div class="mt-4 text-end">
    <button type="submit" class="btn btn-success">Siparişi Gönder</button>
  </div>
</form>

<script>
    $(document).ready(function(){
        var teslimatGunleri = [
            {% for gun in teslimat_gunleri %}
                "{{ gun.gun }}",
            {% endfor %}
        ];

        var gunlerMap = {
            "Pazartesi": 1,
            "Sali": 2,
            "Carsamba": 3,
            "Persembe": 4,
            "Cuma": 5,
            "Cumartesi": 6,
            "Pazar": 0
        };

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

        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;
        }

        var enYakinTarih = getEnYakinTeslimatTarihi();

        $('#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);
    });
</script>
{% endblock %}