{% include 'mfire/include/header.html' %}
   {% include 'mfire/include/topbar.html' %}
    {% include 'mfire/include/sidebar.html' %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">

            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Fire load Calculator Input</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/mfire/dashboard/">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="#">Fire load Calculator Input</a></li>
                        <li class="breadcrumb-item active"></li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

        <!-- Default box -->
        <div class="card">
            <!--<div class="card-header">-->
            <!--    <h3 class="card-title">Create Advertiser</h3>-->
            <!--    <div class="card-tools">-->
            <!--        <a href="/user/advertiser/advertiser_create/" class="btn btn-sm btn-primary"><i class="fas fa-long-arrow-alt-left"></i> Go Back</a>-->
            <!--    </div>-->
            <!--</div>-->
            <div class="card-body">

                <div class="row">
                    <div class="col-md-12">
                        <form method="post" action="/mfire/fireloadcalc/">
                            {% csrf_token %}

                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="state" class="">State</label>
                                    <input type="text" name="state" id="state" class="form-control" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="city" class="">City</label>
                                    <input type="text" name="city" id="city" class="form-control" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="zone" class="">Zone</label>
                                    <input type="text" name="zone" id="zone" class="form-control" required>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="Material" class="">Type Of Material</label>
                                    <select name="Material" id="Material" onchange="clientdata()" class="form-control" required>
                                        <option value="none">---Select---</option>
                                        {% for i in materials %}
                                        <option value="{{i.material}}">{{i.material}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="Calorific" class="">Calorific Value (Kj/Kg)</label>
                                    <input type="text" name="Calorific" id="Calorific" class="form-control" readonly>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="length" class="">Length of material</label>
                                    <input type="text" name="length" id="length" onchange="getInputValue();" class="form-control" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="width" class="">Width of material</label>
                                    <input type="text" name="width" id="width" onchange="getInputValue();" class="form-control" required>
                                </div>

                                <div class="form-group col-md-4">
                                    <label for="height" class="">Height of material</label>
                                    <input type="text" name="height" id="height" onchange="getInputValue();" class="form-control" required>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="mquantitties" class="">Material Quantities in KG   </label>
                                    <input type="text" name="mquantitties" id="mquantitties" onclick="getInputValue();" class="form-control" readonly>
                                </div>
                                
                                 <div class="form-group col-md-4">
                                    <label for="area" class="">Select Area</label>
                                    <select name="area" id="area" class="form-control" required>
                                        <option value="Residential">Residential</option>
                                        <option value="Educational">Educational</option>
                                        <option value="Institutional">Institutional</option>
                                        <option value="Assembly">Assembly</option>
                                        <option value="Business">Business</option>
                                        <option value="Mercantile">Mercantile</option>
                                        <option value="Industrial">Industrial</option>
                                        <option value="Storage">Storage</option>
                                        <option value="Hazardous">Hazardous</option>
                                    </select>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="subarea" class="">Select Sub Area</label>
                                    <select name="subarea" id="subarea" class="form-control" required>
                                        <option value="Parking">Parking</option>
                                        <option value="Shaft">Shaft</option>
                                        <option value="Staircase">Staircase</option>
                                        <option value="other">other</option>
                                    </select>
                                </div>
                                
                                 <div class="form-group col-md-4">
                                    <label for="areasqrmtr" class="">Areasqrmtr</label>
                                    <input type="text" name="areasqrmtr" id="areasqrmtr" onchange="getInputValue();" class="form-control" required>
                                </div>
                                
                                 <div class="form-group col-md-4">
                                    <label for="flv" class="">FLV</label>
                                    <input type="text" name="flv" id="flv" onclick="getInputValue();" class="form-control" readonly>
                                </div>
                                
                                <!-- <div class="form-group col-md-4">-->
                                <!--    <label for="thrishul" class="">Thrishul</label>-->
                                    
                                <!--</div>-->
                                
                                 <div class="form-group col-md-4">
                                    <label for="grade" class="">Grade</label>
                                    <input type="text" name="grade" id="grade" onclick="getInputValue();" class="form-control" readonly>
                                </div>
                                
                                 <div class="form-group col-md-4">
                                    <label for="hours" class="">Hours</label>
                                    <input type="text" name="hours" id="hours" onclick="getInputValue();" class="form-control" readonly>
                                </div>
                                <input type="hidden" name="thrishul" id="thrishul"  class="form-control" required>

                            </div>

                            <button type="submit" class="btn btn-primary">Submit</button>

                        </form>
                    </div>
                </div>

            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->

    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
{% for i in thrishuls %}
 <input type="hidden" name="hours" id="hours" value="" class="form-control" readonly>
  <input type="hidden" name="hours" id="hours"  class="form-control" readonly>
   <input type="hidden" name="hours" id="hours"  class="form-control" readonly>
   {% endfor %}
<script>
function getInputValue(){
    var height = document.getElementById("height").value;
    var width = document.getElementById("width").value;
    var length = document.getElementById("length").value;
    var mquantity = height*width*length;
    document.getElementById("mquantitties").value = mquantity;
    
    var areasqrmtr = document.getElementById("areasqrmtr").value;
    var Calorific = document.getElementById("Calorific").value;
    var flvs = mquantity * Calorific /  areasqrmtr;
    document.getElementById("flv").value = flvs;
    
    //var thrishul = document.getElementById("thrishul").value;
    // var flvs = document.getElementById("flv").value;
    if (1100000 < flvs) {
      document.getElementById("grade").value = 'Grade 1';
      document.getElementById("hours").value = 'Hours 6';
      document.getElementById("thrishul").value = '#ff0303';
    } else if (550000 < flvs && 1100000 > flvs) {
      document.getElementById("grade").value = 'Grade 2';
      document.getElementById("hours").value = 'Hours 4';
      document.getElementById("thrishul").value = '#c46539';  
    }else if (275000 < flvs && 550000 > flvs) {
      document.getElementById("grade").value = 'Grade 3';
      document.getElementById("hours").value = 'Hours 2';
      document.getElementById("thrishul").value = '#0720fa';
    }else if(275000 > flvs) {
      document.getElementById("grade").value = 'Grade 4';
      document.getElementById("hours").value = 'Hours 1';
      document.getElementById("thrishul").value = '#1298e0';
    }
}

    
    // if (1100000 < flvs && 550000 > flvs) {
    //   document.getElementById("grade").value = 'Grade 1';
    //   document.getElementById("hours").value = 'Hours 6';
    // } else if (275000 < flvs && 550000 > flvs) {
    //   document.getElementById("grade").value = 'Grade 2';
    //   document.getElementById("hours").value = 'Hours 4';
    // } else if (275000 > flvs) {
    //   document.getElementById("grade").value = 'Grade 3';
    //   document.getElementById("hours").value = 'Hours 2';
    // }

</script>
<script>
    function clientdata(){
            var m = document.getElementById("Material").value;
            //console.log(m);
              $.ajax({
                url: "/materialvalue/",
                method:'GET',
                data: {
                  'm': m
                },
                success: function (data) {
                  //$("#location").html(data.value);
                  console.log(data);
                  document.getElementById("Calorific").value = data.mv;
                }
             });
      }
</script>
{% include 'mfire/include/footer.html' %}