<!-- ! Main -->
<main class="main users job-role-page" id="">
    <div class="container">
        <div class="row justify-content-between">
                        <div class="col-auto">
                            <h2 class="app-page-title mrg15B">Odometer Notification Report</h2>
                        </div>
                    </div>
                    <div class="row" style="margin-top:15px;">
                        <div class="col-lg-12">
                            <div class="users-table table-wrapper">
                                <table class="table" id="example">
                                    <thead>
                                        <tr class="users-table-info">
                                            <th>ID</th>
                                            <th>No of Notification</th>
                                            <th>Car No</th>
                                            <th>Driver Name</th>
                                            <th>Mobile No</th>
                                            <th>Rent Out No</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <?php if (!empty($odometer_notifications)) {
                                foreach ($odometer_notifications as $key => $odometer_notification) { ?>
                                        <tr>
                                            <td><?= $key + 1 ?></td>
                                            <td><?=$odometer_notification['total_notification']?></td>
                                            <td><?=$odometer_notification['car_no']?></td>
                                            <td><?=$odometer_notification['first_name'].' '.$odometer_notification['middle_name'].' '.$odometer_notification['last_name']?></td>
                                            <td><?=$odometer_notification['mobile']?></td>
                                            <td><?=$odometer_notification['rent_out_no']?></td>
                                            <td><button type="button" id="MybtnModal" data-rent_out_id="<?=$odometer_notification['rent_out_id']?>" class="btn btn-primary">View</button></td>
                                            
                                        </tr>
                                        <?php }
                            } ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
    </div>
</main>
<div class="modal-overlay" id="modal-overlay" style="display:none;"></div>
<div class="modal" id="modal" style="display:none;">
  <button class="close-button close" id="close-button">
    <i class="fa fa-times" aria-hidden="true"></i>
  </button>
  <div class="modal-guts">
    <h3 class="guts-title">Odometer Notifications Date & Time</h3>
    <div id="modal_body"></div>
    <br>
    <br>
    <a class="btn app-btn-primary close" href="#.">CANCEL</a>
  </div>
</div>

<script>  
    $(document).on('click','#MybtnModal',function() {

        var rent_out_id= $(this).data("rent_out_id");
        $.ajax({
            url: '<?php echo base_url("admin/odometerNotification/get_odometer_notifications_date"); ?>',
            method: 'post',
            dataType: 'json',
            data: {
                rent_out_id: rent_out_id
            },
            success: function(response) {
                if (response.status) {
                    var resultHTML=`<table class="table" style="width:100%" border="1">
                                    <thead>
                                        <tr class="users-table-info">
                                            <th style="text-align:center">Sl No</th>
                                            <th style="text-align:center"> Notification Date & Time</th>
                                        </tr>  
                                    </thead>
                                    <tbody>`;
                    var i=0;
                    $.each(response.odometer_notifications_date, function(key,val) {  i ++;

                        resultHTML +='<tr><td style="text-align:center">'+i+'</td><td style="text-align:center">'+val['created_ts']+'</td></tr>';

                    });
                    resultHTML +='</tbody></table>';

                    $("#modal_body").html(resultHTML);
                }
                
            }
        });
        $(".modal,.modal-overlay").show();
    });

    $(".close").click(function() {
        $("#modal_body").html('');
        $(".modal,.modal-overlay").hide();
  });
</script>