{% extends 'dashboard/admin_dashboard/main.html' %}
{% load static %}
{% block content %}
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Masters / Department /</span> Edit Department </h4>
<div style="padding: 10px;">
    {% if messages %}
        {% for message in messages %}
            <div class="alert {% if 'success' in message.tags %}alert-success{% elif 'danger' in message.tags %}alert-danger{% elif 'warning' in message.tags %}alert-warning{% elif 'info' in message.tags %}alert-info{% endif %} alert-dismissible" role="alert" id="success-alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
      </div>
        {% endfor %}
    {% endif %}
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <form role="form" method="POST" enctype="multipart/form-data" action="" autocomplete="off">
                {% csrf_token %}
                <div class="card-body">
                    <!-- Company Code, Company Name, and Location on a single line -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Department Name <span style="color:red">*</span></label>
                            <input type="text" class="form-control" id="defaultFormControlInput" name="department_name" value="{{all_department.department_name}}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Department Code <span style="color:red">*</span></label>
                            <input type="text" class="form-control" name="department_code" value="{{all_department.department_code}}" required>
                        </div>

                    </div>
                    <div class="row mb-3">
                      <div class="col-md-6">
                            <label for="company-dropdown" class="form-label">Company <span style="color:red">*</span></label>
                            <select name="company_id" id="company-dropdown" class="form-control" required>
                                <option value="">-- Select Company --</option>
                                {% for companyes in companyes %}
                                <option value="{{companyes.id}}" {% if all_department.company_id == companyes.id %} selected {% endif %}>{{companyes.company_name}}</option>
                                {% endfor%}
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label  class="form-label">Location <span style="color:red">*</span></label>
                            <select name="location_id" id="location_id" class="form-control" required="">
                                <option value="">-- Select Location --</option>
                                {% for locationes in locationes %}
                                <option value="{{locationes.id}}" {% if all_department.location_id == locationes.id %} selected {% endif %}>{{locationes.location_name}}</option>
                                {% endfor%}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6 mt-2">
                        <label for="html5-color-input" class="col-md-2 col-form-label">Color</label>
                        <div class="col-md-10">
                          <input class="form-control" type="color" name="department_color_code" value="{{all_department.department_color_code}}" id="html5-color-input" />
                        </div>
                    </div>
                    <!-- Submit Button -->
                    <div class="mt-3 d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary" id="btn_submit">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- JavaScript for dynamic dropdowns -->
<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}" type="text/javascript"></script>
{% endblock %}