{% include 'mfire/include/header.html' %}
   {% include 'mfire/include/topbar.html' %}
    {% include 'mfire/include/sidebar.html' %}
    {% load static %}
<!-- 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>Equipment Bulk upload</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 active"><a href="#">Equipment Bulk upload</a></li>
                        <!--<li class="breadcrumb-item active">Create</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/bulkproduct/" enctype="multipart/form-data">
                            {% csrf_token %}

                            <div class="form-row">

                                <!-- <div class="form-group col-md-4">
                                    <label for="client" class="">F & S Officer</label>
                                    <select name="client" id="client" onchange="clientdata()" class="form-control" required>
                                        <option value="">----Select Officer----</option>
                                        {% for c in clients %}
                                        <option value="{{c.id}}"> {{c.company}}</option>
                                        {% endfor %}
                                    </select>
                                </div> -->
                                <!-- officer is a client here -->

                                <div class="form-group col-md-4">
                                    <label for="product" class="">Product</label>
                                    <select name="product" class="form-control" onchange="showDownloadBtn(this)" required>
                                        <option value="">---Select Product---</option>
                                        {% for p in products %}
                                        <option value="{{p.id}}" {% if p.id == 10 or p.id == 11 %}style="display:block;"{% else %}style="display:none;"{% endif %}>{{p.pname}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <div class="form-group col-md-4" id="emphide">
                                    <label for="employee" class="">F & S Operator</label>
                                    <select name="employee" id="employee" class="form-control">
                                        <option value="">----Select F & S Operator----</option>
                                        {% for e in employees %}
                                        <option value="{{e.id}}"> {{e.first_name}} {{e.last_name}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                
                                <div class="form-group col-md-4" id="fetypeform" style="display:none;">
                                    <label for="fetype" class="">F.E Type</label>
                                    <select name="fetype" class="form-control"  id="fetype" onchange="showDownloadBtn(this)">
                                        <option value="">---Select Type---</option>
                                       
                                    </select>
                                </div>
                                
                                <div class="form-group col-md-4">
                                    <label for="myfile" class="">File Upload</label>
                                    <input type="file" name="myfile" id="myfile" class="form-control" required>
                                </div>
                                
                                <div class="form-group col-md-6">
                                    <div class="form-group">
                                        <a style="display: none;" id="downloadBtn" class="btn btn-default" target="_blank" role="button">Download Template</a>
                                    </div>
                                </div>
                                
                            </div>

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

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

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

    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script>
    function clientdata(){
            var v = document.getElementById("client").value;
            console.log(v);
              $.ajax({
                url: "/loadclient/",
                method:'GET',
                data: {
                  'v': v
                },
                success: function (data) {
                  $("#location").html(data);
                  console.log(data);
                  //document.getElementById("location").value = data;
                }
             });
      }
      
      //
function showDownloadBtn(data) {
    let prd_id = data.value;
    
    if (prd_id == 10) {
        $("#fetypeform").css('display', 'block');
        $("#emphide").css('display', 'block');
        $("#fetype").empty();
        $("#fetype").append(
            '<option value="none" selected>---Select Type---</option>'+
            '<option value="DCP">DCP</option>' +
            '<option value="CO2">CO2</option>' +
            '<option value="FE36">FE36</option>'
        );
    } else if (prd_id == 11) {
        $("#downloadBtn").css('display', 'block');
        $("#fetypeform").css('display', 'none');
        $("#emphide").css('display', 'none');
        var file_name = 'HYDRANT  Template.xlsx';
    } else if (prd_id == 'DCP') {
        $("#downloadBtn").css('display', 'block');
        var file_name = 'DCP Template.xlsm';
    } else if (prd_id == 'FE36') {
        $("#downloadBtn").css('display', 'block');
        var file_name = 'FE 36 Template.xlsx';
    }else if (prd_id == 'CO2') {
        $("#downloadBtn").css('display', 'block');
        var file_name = 'CO2 Template.xlsx';
    }
    var url = "/static/excel/" + file_name;
    $("#downloadBtn").attr("href", url);
}




</script>
{% include 'mfire/include/footer.html' %}