{% include 'mfire/include/header.html' %}
   {% include 'mfire/include/topbar.html' %}
    {% include 'mfire/include/sidebar.html' %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 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>All Reports</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">Report</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">All Affiliates</h3>-->
                <!--    <div class="card-tools">-->
                <!--        <a href="/user/affiliate/affiliate_create" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i> Create Affiliate</a> oninput="SearchReport()"-->
                <!--    </div>-->
                <!--</div>-->
                <div class="card-header">
                    Search Anything : <form method="GET" action="/mfire/search/"> <input type="search" name="q" id="search_report"  width="300px" height="20px"> <input type="submit" value="Search"> </form>
                </div>
                
              
                <div class="card-body">
                    <!-- <button class="btn btn-warning" onclick="viewQRCode()">View QR Code</button> -->
                    <button class="btn btn-warning" onclick="DownloadQRCode()">Download QR Code</button>
                    <button class="btn btn-warning" id="check" onclick="checkedall()">Check All</button>
                    <button class="btn btn-warning" id="uncheck" onclick="uncheckedall()">Uncheck All</button>
                        <table id="" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>#No.</th>
                                    <th>Model No</th>
                                    <th>Unit</th>
                                    <th>Location</th>
                                    <!-- <th class="nonedisplay">Status</th> -->
                                    <th>Equipment</th>
                                    <th class="nonedisplay">F & S Operator</th> 
                                    <th class="nonedisplay">Action</th>
                                    <th class="nonedisplay">Update</th>
                                </tr>
                            </thead>
                            <tbody id="searcheduser">
                                {% for i in page_obj %}
                                    <tr>
                                        <td>
                                        {{forloop.counter}} <input class="checkAll" name="smpid" type="checkbox" value="{{i.id}}">
                                        <input type="hidden" name="modelno{{i.id}}" value="{{i.modelno}}" /> </td>
                                        <td><a  href="/mfire/update_product/?smpid={{i.id}}">{{i.modelno}}</a> </td>
                                        <td>{{i.unit}}  </td> 
                                        <td>{{i.location}}  </td> 
                                         <!-- <td class="nonedisplay"><select id="status{{i.id}}" name="status{{i.id}}">
                                            <option value="1" {% if i.status == '1' %} selected  {% endif %}>Initiate</option>
                                            <option value="2" {% if i.status == '2' %} selected  {% endif %}>In Pending</option>
                                            <option value="3" {% if i.status == '3' %} selected  {% endif %}>Completed</option> 
                                         </select></td> -->
                                        <td>{{i.pid.pname}} </td>
                                        <td class="nonedisplay">{{i.empid.first_name}} {{i.empid.last_name}}</td>
                                        <td>
                                            <a class="btn btn-success btn-sm" href="/mfire/model_history/?smpid={{i.id}}&client_id={{i.clientid.id}}&pro_id={{i.pid.id}}"> <!--<i class="fas fa-eye" aria-hidden="true"></i>--> History</a>
                                            <a class="btn btn-primary btn-sm" href="/mfire/qr_ganerate/?model_no={{i.modelno}}" target="blank__">  <!--<i class="fas fa-qrcode" aria-hidden="true"></i>--> QR Co..</a>
                                        </td>
                                        <td>
                                            <!--<button class="btn btn-success btn-sm" type="button" data-toggle="modal" onclick="prosmpid({{i.id}},{{i.pid.id}})" data-target="#modal-xl"> Update </button>-->
                                            {% if i.disable == 0 %} <a class="btn btn-primary btn-sm" href="/mfire/disable/?smpid={{i.id}}&status=1">Enable </a> {% else %}
                                            <a class="btn btn-danger btn-sm" href="/mfire/disable/?smpid={{i.id}}&status=0">Disable </a>{% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                        </table>
                        <div class="col-sm-12 col-md-7">
                            <div class="dataTables_paginate paging_simple_numbers" id="example1_paginate">
                                <ul class="pagination">
                                    {% if page_obj.has_previous %}
                                    <li class="paginate_button page-item previous" id="example1_previous">
                                        <a href="?page=1&fetype={{fetype}}&pid={{pid}}" aria-controls="example1" data-dt-idx="0" tabindex="0" class="page-link">First</a>
                                    </li>
                                    <li class="paginate_button page-item previous" id="example1_previous">
                                        <a href="?page={{ page_obj.previous_page_number }}&fetype={{fetype}}&pid={{pid}}" aria-controls="example1" data-dt-idx="0" tabindex="0" class="page-link">Previous</a>
                                    </li>
                                    {% endif %}

                                {% for num in page_obj.paginator.page_range %}
  {% if page_obj.number == num %}
   <li class="paginate_button page-item ">
                                        <a href="?page={{ num }}&fetype={{fetype}}&pid={{pid}}" aria-controls="example1" data-dt-idx="1" tabindex="0" class="page-link">{{num}}</a>
                                    </li>
  {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
  <li class="paginate_button page-item ">
                                        <a href="?page={{ num }}&fetype={{fetype}}&pid={{pid}}" aria-controls="example1" data-dt-idx="1" tabindex="0" class="page-link">{{num}}</a>
                                    </li>
  {% endif %}
{% endfor %}
                                
                                    {% if page_obj.has_next %}
                                    <li class="paginate_button page-item next" id="example1_next">
                                        <a href="?page={{ page_obj.next_page_number }}&fetype={{fetype}}&pid={{pid}}" aria-controls="example1" data-dt-idx="3" tabindex="0" class="page-link">Next</a>
                                    </li>
                                    <li class="paginate_button page-item next" id="example1_next">
                                        <a href="?page={{ page_obj.paginator.num_pages }}&fetype={{fetype}}&pid={{pid}}" aria-controls="example1" data-dt-idx="3" tabindex="0" class="page-link">Last</a>
                                    </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>

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

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    
    
    
    <div class="modal fade" id="modal-xl">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
             <div class="modal-header">
            <h4 class="modal-title">Update Product Details</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
            </div>
                <div class="modal-body" id="pmodeldata">
                     
                </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



    <script>
        //get product detail
    function product_form(data)
    {
        let selectedItem = data.value;

        $('#fe_form').css('display', 'none');
        $('#hp_form').css('display', 'none');
        $('#hr_form').css('display', 'none');
        $('#fbs_form').css('display', 'none');
        $('#fp_form').css('display', 'none');
        $('#fdp_form').css('display', 'none');
        $('#pm_form').css('display', 'none');
        $('#ss_form').css('display', 'none');
        $('#cv_form').css('display', 'none');

        // if (selectedItem == 'Fire Extinguisher') 
        if (selectedItem == 1) 
            $('#fe_form').css('display', 'block');
        // else if (selectedItem == 'Hydrant Point') 
        else if (selectedItem == 2) 
            $('#hp_form').css('display', 'block');
        // else if (selectedItem == 'Hose Reel') 
        else if (selectedItem == 3) 
            $('#hr_form').css('display', 'block');
        // else if (selectedItem == 'Fire Buckets & Stand') 
        else if (selectedItem == 4) 
            $('#fbs_form').css('display', 'block');
        // else if (selectedItem == 'Fire Pumps') 
        else if (selectedItem == 5) 
            $('#fp_form').css('display', 'block');
        // else if (selectedItem == 'Fire Detection panel') 
        else if (selectedItem == 6) 
            $('#fdp_form').css('display', 'block');
        // else if (selectedItem == 'Portable Monitors') 
        else if (selectedItem == 7) 
            $('#pm_form').css('display', 'block');
        // else if (selectedItem == 'Portable Monitors') 
        else if (selectedItem == 8) 
            $('#ss_form').css('display', 'block');
        // else if (selectedItem == 'Portable Monitors') 
        else if (selectedItem == 9) 
            $('#cv_form').css('display', 'block');
    }
    
    ///
    
  $(function () {
    $("#examplereport").DataTable({
      "responsive": true, "lengthChange": true, "autoWidth": true,"ordering": true,"info": true,"autoWidth": true,
      //"buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
      "paging": false,
      "lengthChange": true,
      "searching": false,
      "ordering": true,
      "info": false,
      "autoWidth": true,
      "responsive": true,
    });
  });
  
</script>
    <script>
    function clientdata(){
            var v = document.getElementById("client").value;
            $.ajax({
                url: "/loadclient/",
                method:'GET',
                data: {
                  'v': v
                },
                success: function (data) {
                  $("#location").html(data);
                  console.log(data);
                }
            });
             
      }
     


$(document).ready(function(){
    $('.checkAll').click(function(){
        var txt = "";
        $('.checkAll:checked').each(function(){
           txt += $(this).val()+","  
        });
        $('#allmodelno').val(txt);
    });
});

function viewQRCode() { 
            var a_smpid = [];
            $.each($("input[name='smpid']:checked"), function(){
                a_smpid.push($(this).val());
            });

            let model_no = '';
            for (var i = 0; i < a_smpid.length; i++) 
            {
                //check model no is exist or not
                let n_smpid = a_smpid[i];

                model_no += $("input[name=modelno"+n_smpid+"]").val();

                if (i != a_smpid.length-1) model_no += ',';     
            }
            // alert(a_smpid);

            if (a_smpid.length == 0)
                alert('select checkbox');
            else 
                window.open("https://hpcl.fireinspector.in/mfire/qr_ganerate/?model_no="+model_no, "_blank")
               // window.location = '/mfire/qr_ganerate/?model_no='+model_no;
}

function DownloadQRCode() {
    var a_smpid = [];
    $.each($("input[name='smpid']:checked"), function () {
        a_smpid.push($(this).val());
    });

    let model_no = '';
    for (var i = 0; i < a_smpid.length; i++) {
        let n_smpid = a_smpid[i];
        model_no += $("input[name=modelno" + n_smpid + "]").val();
        if (i != a_smpid.length - 1) model_no += ',';
    }

    if (a_smpid.length == 0) {
        alert('Please select at least one checkbox.');
    } else {
        $.ajax({
            type: "POST",
            url: "/mfire/DownloadQRCode/",
            data: { model_no: model_no },
            success: function (response) {
                // Open PDF in new tab
                var newTab = window.open('', '_blank');
                var blob = new Blob([response], { type: 'application/pdf' });
                var objectUrl = URL.createObjectURL(blob);
                newTab.location.href = objectUrl;
            },
            error: function (xhr, status, error) {
                console.error(error);
                alert('Error generating PDF. Please try again.');
            }
        });
    }
}




// function DownloadQRCode() { 
//             var a_smpid = [];
//             $.each($("input[name='smpid']:checked"), function(){
//                 a_smpid.push($(this).val());
//             });

//             let model_no = '';
//             for (var i = 0; i < a_smpid.length; i++) 
//             {
//                 //check model no is exist or not
//                 let n_smpid = a_smpid[i];

//                 model_no += $("input[name=modelno"+n_smpid+"]").val();

//                 if (i != a_smpid.length-1) model_no += ',';     
//             }
//             // alert(a_smpid);

//             if (a_smpid.length == 0)
//                 alert('select checkbox');
//             else 
//                 window.open("https://hpcl.fireinspector.in/mfire/DownloadQRCode/?model_no="+model_no, "_blank")
//                // window.location = '/mfire/qr_ganerate/?model_no='+model_no;
// }



function updateProducts() 
        {
            var a_smpid = [];
            $.each($("input[name='smpid']:checked"), function(){
                a_smpid.push($(this).val());
            });

            //let status = true;
            for (var i = 0; i < a_smpid.length; i++) 
            {
                //check model no is exist or not
                let n_smpid = a_smpid[i];
                let model_no = $("input[name=modelno"+n_smpid+"]").val();
                let s_location = $("input[name=location"+n_smpid+"]").val();
                let n_prd_id = $("input[name=prd_id"+n_smpid+"]").val();
                let status = $("#status"+n_smpid).val();
                
                console.log(status);
                console.log(n_prd_id);
                
               $.ajax({
                        type: "POST",
                        url: '/mfire/updatemodellocation/',
                        data: {
                            model_no: model_no,
                            smpid: n_smpid,
                            location: s_location,
                            status: status,
                        },
                        success: function(data){
                        if (data.msg == 'already exist') 
                            {
                                alert(model_no + '' + 'already exist');
                                // status = false;
                            }
                            msg(data)
                            
                        },
                    });
                
        } 
            
            if (a_smpid.length == 0){
                alert('select checkbox');
            }
            
            function msg(data){
                if (data.msg == 'success') 
                            {
                                alert('record update');
                                // location.reload();
                            }
            }

        }
        
///


</script>
<script>
    function prosmpid(smpid,pid){
        data = {'smpid':smpid,'pid':pid}
        $.ajax({
            type: 'GET',
            url: '/mfire/update_product/',
            data: data,
            success: function(data) {
                $("#pmodeldata").html(data);
                // document.getElementById('pmodeldata') = data;
            }
        })
    }
</script>


    {% include 'mfire/include/footer.html' %}