{% set categories = __SELF__.categories %}
{% set subcategories = __SELF__.subcategories %}
{% set states = __SELF__.states %}
{% set cities = __SELF__.cities %}
{% set productIdOption = __SELF__.productIdOption %}
{% set productForEditing = __SELF__.productForEditing %}



<!-- Breadcumb Area -->
<div class="breadcumb_area">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <h5>Haryt goşmak üýtgetmek</h5>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ 'index'|page }}">Esasy sahypa</a></li>
                    <li class="breadcrumb-item active">Haryt goşmak/üýtgetmek</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- Breadcumb Area -->

<!-- addProducts Area -->
<div class="bigshop_reg_log_area section_padding_100_50">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-12">
                <div class="login_form mb-50">
                    <h5 class="mb-3">Haryt maglumatlary</h5>

                    {% if not productForEditing %}
                        <div class="shortcodes_content">
                            <form id="offerForm" action="#"
                            data-request="onSave"
                            data-request-flash
                            data-request-validate
                            data-request-files
                            data-request-success="resetForm()"
                            data-request-error="resetForm()"
                            enctype="multipart/form-data">
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="category">Kategoriýa goshmak</label>
                                    <select class="custom-select d-block w-100 form-control" id="category" data-belongsto="product" name="category_id" required>
                                        <option value="">Kategoriýa saýla</option>
                                        {% for category in categories %}
                                            <option value="{{ category.id }}" data-file="{{ category.is_file_category }}">{{ category.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="subcategory">Ikinji kategoriýa</label>
                                    <select class="custom-select d-block w-100 form-control" id="subcategory" name="subcategory_id" required>
                                        <option value=null>Subkategoriýa saýla</option>
                                        {% for sub in subcategories %}
                                            <option value="{{ sub.id }}" data-file="{{ sub.is_file_category }}">{{ sub.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="city">Welaýat</label>
                                    <select class="custom-select d-block w-100 form-control" id="city" name="state_id">
                                        <option value=null>Welaýat saýla</option>
                                        {% for state in states %}
                                            <option value="{{ state.id }}">{{ state.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="subCity">Şäher</label>
                                    <select class="custom-select d-block w-100 form-control" id="subCity" name="city_id">
                                        <option value=null>Şäher saýla</option>
                                        {% for city in cities %}
                                            <option value="{{ city.id }}">{{ city.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="name">Harydyň ady</label>
                                    <input type="text" class="form-control" id="name" placeholder="Harydyň ady" name="name" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="price">Bahasy</label>
                                    <input type="number" class="form-control" id="price" name="price" min="0" required>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="order-notes">Gysga beýany</label>
                                    <textarea class="form-control" id="shortDescription" cols="30" name="short_description" rows="10" placeholder="Gysga beýany" required></textarea>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="order-notes">Giňişleýin beýany</label>
                                    <textarea class="form-control" id="description" cols="30" rows="20" name="description" placeholder="Giňişleýin beýany" required></textarea>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="phone">Telefon belgisi</label>
                                    <input type="number" class="form-control" id="phone" name="phone" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="images">Suratlar</label>
                                    <input type="file" class="form-control" id="new_img" name="new_img[]" multiple required>
                                    <input type="hidden" value="0" name="is_file" id="isFile">
                                </div>
                                <div class="col-md-6 mb-3 d-none" id="newFileDiv">
                                    <label for="files">Faýl goşmak</label>
                                    <input type="file" class="form-control" id="new_file" name="new_file" multiple>
                                </div>
                            </div>
                            <input type="hidden" name="resetForm" id="resetForm" value="0"/>
                            <button type="submit" class="btn btn-primary btn-sm mt-3">Haryt goşmak</button>
                        </form>
                        </div>
                    {% endif %}

                    {% if productForEditing %}
                        <div class="shortcodes_content">
                            <form id="offerUpdateForm" action="#"
                                data-request="onUpdate"
                                data-request-flash
                                data-request-validate
                                data-request-files
                                data-request-success="resetForm()"
                                data-request-error="resetForm()"
                                enctype="multipart/form-data">
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="category">Kategoriýa</label>
                                        <select class="custom-select d-block w-100 form-control" id="categoryEdit" data-belongsto="product" name="category_id" required>
                                            <option value="">Kategoriýa saýla</option>
                                            {% for category in categories %}
                                                <option value="{{ category.id }}" {{ productForEditing.categories.contains(category.id) ? 'selected' : '' }} data-file="{{ category.is_file_category }}">{{ category.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="subcategory">Ikinji kategoriýa</label>
                                        <select class="custom-select d-block w-100 form-control" id="subcategory" name="subcategory_id" required>
                                            <option value=null>Subkategoriýa saýla</option>
                                            {% for sub in subcategories %}
                                                <option value="{{ sub.id }}" {{ productForEditing.categories.contains(sub.id) ? 'selected' : '' }} data-file="{{ sub.is_file_category }}">{{ sub.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="city">Welaýat</label>
                                        <select class="custom-select d-block w-100 form-control" id="city" name="state_id">
                                            <option value=null>Welaýat saýla</option>
                                            {% for state in states %}
                                                <option value="{{ state.id }}" {{ productForEditing.place_id == state.id ? 'selected' : '' }}>{{ state.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="subCity">Şäher</label>
                                        <select class="custom-select d-block w-100 form-control" id="subCity" name="city_id">
                                            <option value=null>Şäher saýla</option>
                                            {% for city in cities %}
                                                <option value="{{ city.id }}" {{ productForEditing.place_id == city.id ? 'selected' : '' }}>{{ city.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    
                                    <div class="col-md-6 mb-3">
                                        <label for="name">Harydyň ady</label>
                                        <input type="text" class="form-control" id="name" placeholder="Harydyň ady" name="name" value="{{ productForEditing.name }}" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="price">Bahasy</label>
                                        <input type="number" class="form-control" id="price" name="price" min="0" value="{{ productForEditing.price }}" required>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label for="order-notes">Gysga beýany</label>
                                        <textarea class="form-control" id="shortDescription" cols="30" name="short_description" rows="10" placeholder="Gysga beýany" required>{{ productForEditing.short_description }}</textarea>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                        <label for="order-notes">Giňişleýin beýany</label>
                                        <textarea class="form-control" id="description" cols="30" rows="20" name="description" placeholder="Giňişleýin beýany" required>{{ productForEditing.description }}</textarea>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="phone">Telefon belgisi</label>
                                        <input type="number" class="form-control" id="phone" name="phone" value="{{ productForEditing.phone }}" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="images">Suratlar</label>
                                        <input type="file" class="form-control" id="new_img" name="new_img[]" multiple>
                                        <input type="hidden" value="0" name="is_file" id="isFile">
                                    </div>
                                    <div class="col-md-6 mb-3 d-none" id="newFileDiv">
                                        <label for="files">Faýl goşmak</label>
                                        <input type="file" class="form-control" id="new_file" name="new_file" multiple>
                                    </div>
                                </div>
                                <input type="hidden" name="resetForm" id="resetForm" value="0"/>
                                <input type="hidden" name="product_id" value="{{ productForEditing.id }}"/>
                                <button type="submit" class="btn btn-primary btn-sm mt-3">Üýtgetmek</button>
                            </form>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

{% put scripts %}
<script>
    function resetForm() {
        document.getElementById('offerForm').reset(); // Reset the form
        document.getElementById('offerUpdateForm').reset();
    }
</script>
<script>
$(document).ready(function() {
    $("#category").on("change", function() {
      var selectedValue = $(this).val();
      var isFile = $(this).find(':selected').data('file');
      if (isFile > 0){
        $("#isFile").val(1);
        $("#newFileDiv").removeClass("d-none");
        $("#new_file").attr("required", "true");
      }else{
        $("#isFile").val(0);
        $("#new_file").removeAttr("required");
        $("#newFileDiv").addClass("d-none");
      }
    });

    $("#categoryEdit").on("change", function() {
      var selectedValue = $(this).val();
      var isFile = $(this).find(':selected').data('file');
      if (isFile > 0){
        $("#isFile").val(1);
        $("#newFileDiv").removeClass("d-none");
        // $("#new_file").attr("required", "true");
      }else{
        $("#isFile").val(0);
        $("#new_file").val(null);
        $("#newFileDiv").addClass("d-none");
      }
    });
  });
</script>
{% endput %}