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


{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.challenge %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.shop %} class="active" {% endblock %}

{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-sm-4 col-3">
                <h4 class="titles" style="font-size: x-large; color: #009A6E">آیتم ها</h4>
            </div>
            <div class="col-sm-8 col-9 text-right m-b-20">
                <a href="#" class="btn btn btn-primary btn-rounded float-right btn-submit" data-toggle="modal" data-target="#addItemModal">
                    <i></i> آیتم جدید
                </a>
            </div>
        </div>
        <div class="row">
            {% for item in items %}
              <div class="col-md-4">
                <div class="card">
                  <div class="card-header">
                    <h5 class="card-title">{{ item.name }}</h5>
                  </div>
                  <div class="card-body">
                    <p class="titles-item" dir="rtl"><strong>تگ سرویس : </strong>{{ item.tag }}</p>
                    {% if item.service_type == "plan" %}
                      <p class="titles-item" dir="rtl"><strong>مدت اشتراک : </strong>{{ item.duration_months }} ماه</p>
                      <p class="titles-item" dir="rtl"><strong>نوع پلن : </strong>{{ item.get_plan_type_display }}</p>
                    {% endif %}
                    {% if item.is_coin %}
                      <p class="titles-item" dir="rtl"><strong>نوع پول : </strong>سکه (coin)</p>
                    {% else %}
                      <p class="titles-item" dir="rtl"><strong>نوع پول : </strong>پول (هزار تومان)</p>
                    {% endif %}
                    {% if item.promotion_percentage > 0 and item.promotion_end_date %}
                      <p class="titles-item" dir="rtl"><strong>قیمت اصلی : </strong><del>{{ item.price }}</del></p>
                      <p class="titles-item" dir="rtl"><strong>قیمت با تخفیف : </strong>{{ item.get_current_price }}</p>
                      <p class="titles-item" dir="rtl"><strong>تخفیف : </strong>{{ item.promotion_percentage }}%</p>
                      <p class="titles-item" dir="rtl"><strong>تاریخ پایان تخفیف : </strong>{{ item.promotion_end_date }}</p>
                    {% else %}
                      <p class="titles-item" dir="rtl"><strong>قیمت : </strong>{{ item.price }}</p>
                    {% endif %}
                    <p class="titles-item" dir="rtl"><strong>توضیحات : </strong>{{ item.description }}</p>
                    {% if item.image %}
                      <p class="titles-item" dir="rtl"><strong>عکس محصول : </strong></p>
                      <img src="{{ item.image.url }}" alt="{{ item.name }}" class="img-fluid" style="max-height: 350px">
                    {% else %}
                      <p class="titles-item" dir="rtl"><strong>عکس محصول : </strong>ندارد</p>
                    {% endif %}
                  </div>
                  <div class="card-footer">
                    <h4 class="card-tag">#{{ item.service_type }}</h4>
                    <a href="{% url 'panel-doctor-delete-item' item.id %}" class="btn btn-danger btn-sm delete-btn">حذف</a>
                  </div>
                </div>
              </div>
            {% endfor %}
      </div>
    </div>

    <!-- Modal for adding a new item -->
    <div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-labelledby="addItemModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title titles" id="addItemModalLabel">آیتم جدید</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body text-right" dir="rtl">
            <form id="addItemForm" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group">
                    <label for="name" class="titles">نام آیتم :</label>
                    <input type="text" class="form-control" id="name" name="name" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" required>
                </div>
                <div class="form-group">
                    <label for="tag" class="titles">تگ آیتم :</label>
                    <input type="text" class="form-control" id="tag" name="tag" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" required>
                </div>
                <div class="form-group">
                    <label for="description" class="titles">توضیحات :</label>
                    <textarea class="form-control" id="description" name="description" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" placeholder="برای پلن‌ها، خدمات شامل و مستثنی را اینجا بنویسید (مثال: شامل: مشاوره تغذیه - مستثنی: آموزش شخصی)"></textarea>
                </div>
                <div class="form-group">
                    <label for="image" class="titles">تصویر آیتم :</label>
                    <input type="file" class="form-control" id="image" name="image" style="direction: rtl; font-size: 14px; background-color: #cfd8e6; border-radius: 10px;">
                </div>
                <div class="form-group">
                    <label for="price" class="titles">قیمت :</label>
                    <input type="number" class="form-control" id="price" name="price" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" required>
                </div>
                <div class="form-group">
                    <label for="is_coin" class="titles">واحد پولی :</label>
                    <select class="form-control" id="is_coin" name="is_coin" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;">
                        <option value="1">سکه</option>
                        <option value="0">پول</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="promotion_percentage" class="titles">درصد تخفیف :</label>
                    <input type="number" class="form-control" id="promotion_percentage" name="promotion_percentage" value="0" min="0" max="100" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;">
                </div>
                <div class="form-group">
                    <label for="promotion_end_date" class="titles">تاریخ پایان تخفیف :</label>
                    <input type="datetime-local" class="form-control" id="promotion_end_date" name="promotion_end_date" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;">
                </div>
                <div class="form-group">
                    <label for="service_type" class="titles">نوع سرویس :</label>
                    <select class="form-control" id="service_type" name="service_type" onchange="toggleServiceFields()" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" required>
                        <option value="coaching">Coaching</option>
                        <option value="content">Content</option>
                        <option value="plan">Plan</option>
                    </select>
                </div>
                <div id="planFields" style="display: none;">
                    <div class="form-group">
                        <label for="duration_months" class="titles">مدت اشتراک (ماه) :</label>
                        <input type="number" class="form-control" id="duration_months" name="duration_months" min="1" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;">
                    </div>
                    <div class="form-group">
                        <label for="plan_type" class="titles">نوع پلن :</label>
                        <select class="form-control" id="plan_type" name="plan_type" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;">
                            <option value="1">Silver</option>
                            <option value="2">Golden</option>
                            <option value="3">Platinum</option>
                            <option value="4">Bronze</option>
                        </select>
                    </div>
                </div>
                <div id="contentFields" style="display: none;">
                    <div class="form-group">
                        <label for="pdf_files" class="titles">فایل‌های PDF :</label>
                        <input type="file" class="form-control" id="pdf_files" name="pdf_files" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" multiple>
                    </div>
                    <div class="form-group">
                        <label for="videos" class="titles">ویدیوها :</label>
                        <input type="file" class="form-control" id="videos" name="videos" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" multiple>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" style="border-radius: 10px">ثبت آیتم</button>
            </form>
            </div>
        </div>
      </div>
    </div>

    <style>
      .titles{
        text-align: right;
        font-size: 18px;
        margin-bottom: 10px;
        color: #009A6E;
        display: flex;
        align-items: start;
        justify-content: start;
      }
      .btn-submit {
        background-color: #009A6E;
        border-color: #009A6E;
        color: #fff;
        padding: 10px 20px;
        border-radius: 10px;
        text-decoration: none;
        transition: background-color 0.3s ease;
        display: inline-flex;
        align-items: center;
      }
      .btn-submit:hover,
      .btn-submit:focus {
        background-color: #009A6Eda;
        color: #fff;
      }
      .card {
        border: 1px solid #009A6E;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        max-height: 700px;
        min-height: 550px;
        overflow-y: auto;
      }
      .card-header {
        padding: 15px;
        background-color: #f8f9fa;
      }
      .card-body {
        padding: 15px;
      }
      .card-footer {
        background-color: #f8f9fa;
        text-align: left;
      }
      .delete-btn {
        color: #fff;
      }
      .card-title {
        text-align: center;
        color: #009A6E;
        font-size: x-large !important;
      }
      .card-tag {
        text-align: right;
        color: #009A6E;
        font-size: large !important;
      }
      .titles-item {
        font-size: medium;
        text-align: right;
      }
    </style>
{% endblock %}

{% block script %}
    <script src="{% static 'panel/doctor' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/app.js"></script>

    <script>
        $(document).ready(function() {
            $('#addItemForm').on('submit', function(event) {
                event.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: "{% url 'panel-doctor-add-item' %}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRFToken': "{{ csrf_token }}"
                    },
                    success: function(response) {
                        location.reload();  // Reload the page to show the new item
                    },
                    error: function(xhr, status, error) {
                        console.error("Error adding item: ", error);
                        {#alert("خطا در اضافه کردن آیتم");#}
                    }
                });
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            const existingTags = [];  // Store fetched tags here

            // Fetch existing tags from the server
            $.ajax({
                url: "{% url 'panel-doctor-get-existing-tags' %}",  // Define this API to return all tags
                type: "GET",
                success: function(response) {
                    existingTags.push(...response.tags);  // Assuming the response format { tags: ["tag1", "tag2"] }
                }
            });

            $('#addItemForm').on('submit', function(event) {
                const tagInput = $('#tag').val().trim();

                // Check for spaces
                if (tagInput.includes(' ')) {
                    alert("تگ نباید با فاصله باشد. به جای فاصله دادن از _ استفاده کنید.");
                    event.preventDefault();
                    return;
                }

                // Check for duplicate tags
                if (existingTags.includes(tagInput)) {
                    alert("این تگ از قبل وجود دارد. لطفا یک تگ جدید وارد بکنید.");
                    event.preventDefault();
                    return;
                }

                // Proceed if validations pass
                var formData = new FormData(this);
                // Continue with AJAX form submission here as before
            });
        });
    </script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        toggleServiceFields();
      });
    </script>


    <script>
        // Show/hide fields based on service type selection
        function toggleServiceFields() {
            const serviceType = document.getElementById('service_type').value;
            const contentFields = document.getElementById('contentFields');

            if (serviceType === 'content') {
                contentFields.style.display = 'block';
            } else {
                contentFields.style.display = 'none';
            }
        }
    </script>
    <script>
        function toggleServiceFields() {
            const serviceType = document.getElementById('service_type').value;
            document.getElementById('contentFields').style.display = serviceType === 'content' ? 'block' : 'none';
            document.getElementById('planFields').style.display = serviceType === 'plan' ? 'block' : 'none';
        }
    </script>
{% endblock %}