{% extends "merchant_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}<title>BTB Payment Request Create</title>{% endblock title %}
{% block Style %}

{% endblock Style %}

{% block MainContent %}

{% if messages %}
  {% for message in messages %}
    <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endfor %}
{% endif %}
<div class="contents">
    <form id="paymentRequestForm" action="" method="POST" enctype="multipart/form-data" autocomplete="off">
    {% csrf_token %}
        <div class="accordion-item">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0 fw-bold">BTB Payment Request Create</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            {{form.budget|as_crispy_field}}
                        </div>
                        <div class="col-md-3">
                            {{form.supplier|as_crispy_field}}
                        </div>
                         <div class="col-md-3">
                            {{form.pi|as_crispy_field}}
                        </div>
                         <div class="col-md-3">
                            {{form.team|as_crispy_field}}
                        </div>
                        <div class="col-md-3">
                            {{form.manager_approval_status|as_crispy_field}}
                        </div>
                        
                    </div>
                </div>
            </div>

                    <div class="row">

                        <!-- Left Column: Document Checklist -->
                        <div class="col-md-4">
                            <div class="accordion-item">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0">Document Check List</h5>
                                    </div>
                                    <div class="card-body p-2">
                                        <table class="table table-hover table-responsive table-bordered">
                                            <tr>
                                                <th class="fw-bold">{{ doc_form.mdr_bill_of_exchange.label }}</th>
                                                <td>{{ doc_form.mdr_bill_of_exchange }}</td>
                                            </tr>
                                            <tr>
                                                <th class="fw-bold">{{ doc_form.mdr_delivery_challan.label }}</th>
                                                <td>{{ doc_form.mdr_delivery_challan }}</td>
                                            </tr>
                                            <tr>
                                                <th class="fw-bold">{{ doc_form.mdr_mushak.label }}</th>
                                                <td>{{ doc_form.mdr_mushak }}</td>
                                            </tr>
                                            <tr>
                                                <th class="fw-bold">{{ doc_form.mdr_pi.label }}</th>
                                                <td>{{ doc_form.mdr_pi }}</td>
                                            </tr>
                                            <tr>
                                                <th class="fw-bold">{{ doc_form.mdr_btb.label }}</th>
                                                <td>{{ doc_form.mdr_btb }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column: PI Details -->
                        <div class="col-md-8">
                            <div class="accordion-item" id="id_pi_details">
                                <!-- You can populate PI details content here -->
                            </div>
                        </div>

                    </div>


            <div class="accordion-item" id="id_material_formset">

            </div>


            <div class="row" style="margin-top: 10px;margin-bottom: 8px;">
                <div class="col-md-12 text-center">
                    <button id="submit_button" type="submit" class="cus-btn" >Submit</button>
                </div>
            </div>
        </div>
    </form>
</div>

{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}           
{% endblock meassage %}

{% block JS %}
<script type=text/javascript>
    var load_purchase_order_url = "{% url 'merchant_purchase_order_load' %}"
    var btb_payment_request_material_load = "{% url 'btb_payment_request_material_load' %}"
    var load_pi_from_budget = "{% url 'load_pi_from_budget' %}"
    var load_pi_details_url = "{% url 'load_pi_details' %}"

    $("#id_budget, #id_supplier").change(function(){
        var budget_id = $("#id_budget").val();
        var supplier_id = $("#id_supplier").val();

        $("#submit_button").click(function(){
            $(this).prop("disabled", true);
            $("#paymentRequestForm").submit();
        })

        if(budget_id && supplier_id){
            $.ajax({
                url: load_pi_from_budget,
                data: {
                    'budget_id': budget_id,
                    'supplier_id': supplier_id
                },
                success: function(data){
                    $("#id_pi").html(data)
                }
            })
        }
    })

    
    $("#id_pi").change(function () {
        var piID = $(this).val();

        $.ajax({
            url: btb_payment_request_material_load,

            data: {
                'piID': piID,
            },
            success: function (data) {
                console.log(data);
                $("#id_material_formset").html(data);
            },
        });

        $.ajax({
            url: load_pi_details_url,
            data: {
                'piID': piID
            },
            success: function(data){
                $("#id_pi_details").html(data)
            }
        })
    });





    $(document).ready(function() {
        $("#id_pi").select2();
        $("#id_budget").select2();
        $("#id_team").select2();
        $("#id_supplier").select2();
        $("#id_manager_approval_status").select2();
        $("#id_pi").trigger('change', true)
    });
</script>



<script>
    document.addEventListener('DOMContentLoaded', function() {
        const piField = document.getElementById("id_pi");
        const btbValueField = document.getElementById("id_btb_value");
    
        piField.addEventListener("change", function() {
            const selectedPI = piField.value;
    
            // Fetch the max value for btb_value based on the selected PI
            fetch(`/merchant/btb_opening/get-pi-data/?pi_id=${selectedPI}`)
                .then(response => response.json())
                .then(data => {
                    btbValueField.min = 0;
                    btbValueField.max = data.max_btb_value;
                })
                .catch(error => console.error("Error fetching max value for btb_value:", error));
        });
    });
   
    
    </script>



{% endblock JS %}