{% extends "layout/default.html" %}

{% load i18n %}

{% block title %}{% translate "Add Service Request" %}{% endblock %}

{% block breadcumbheading %}
{% translate "Add Service Request" %}
{% endblock  %}

{% block breadcumbfirst %}
<a href="{% url 'quotation:list_quotation' %}" class="text-muted text-hover-primary" style="text-transform: capitalize;">Add Service Request </a>
{% endblock  %}

{% block content %}
<div class="custom mt-3 create-cust">
    <div class="d-flex flex-column flex-lg-row-fluid gap-7 gap-lg-10" data-select2-id="select2-data-129-yayj">
        <div class="card card-flush py-4">
            {% if messages %}
                        <div class="d-flex justify-content-center align-items-center">
                            {% for message in messages %}
                              <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert" style="width: 300px;">
                                {{ message }}
                                </div>  
                            {% endfor %}
                            </div>
                        {% endif %}
            <div class="card-header">
                <div class="card-title">
                    <h2>Add Service Request</h2>
                </div>
            </div>
            <div class="card-body">
            <form method="POST" action="{% url 'quotation:save_service_request_web' %}" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" name="order_id" value="{{ job_detail.id }}">
                <div class="mb-3">
                    <label class="form-label fw-bold">Select Machine</label>
                    <select name="order_item_id" class="form-select" required>
                        <option value="{{ job_detail.order_item.id }}"> {{ job_detail.order_item.product  }} {{ job_detail.order_item.serial_number }} </option>
                    </select>
                </div>
                <!-- Warranty -->
                <div class="mb-3">
                  <label class="form-label fw-bold">Warranty Status11</label>
                  <select name="is_selected_warranty" class="form-select" required readonly disabled>
                    <option value="">-- Select --</option>
                    <option value="1" {%if job_detail.status == 'Warranty'%} selected {% endif %}>In Warranty</option>
                    <option value="0" {%if job_detail.status != 'Warranty'%} selected {% endif %}>Out of Warranty</option>
                  </select>
                </div>
            
                <!-- Description -->
                <div class="mb-3">
                  <label class="form-label fw-bold">Description</label>
                  <textarea name="description" class="form-control" rows="4" placeholder="Describe the issue..." required></textarea>
                </div>
            
                <!-- Images -->
                <div class="mb-3">
                  <label class="form-label fw-bold">Upload Images</label>
                  <input type="file" name="service_request_images" class="form-control" multiple accept="image/*">
                  <small class="text-muted">You can select multiple images</small>
                </div>
            
                <!-- Videos -->
                <div class="mb-3">
                  <label class="form-label fw-bold">Upload Videos</label>
                  <input type="file" name="service_request_videos" class="form-control" multiple accept="video/*">
                  <small class="text-muted">You can select multiple videos</small>
                </div>
            
                <!-- Submit -->
                <div class="text-end">
                    <button type="submit" id="kt_ecommerce_edit_order_submit" class="btn btn-primary">
                        <span class="indicator-label">Submit Service Request</span>
                        <span class="indicator-progress">
                            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                    </button>
                </div>
            
              </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}