EVOLUTION-NINJA

Edit File: edit_existcase.php

<?php
    echo view('includes/flow-header');    
?>
<section class="spec-main last_body">
    <div class="row">
        <div class="col-sm-3 anaslefbox">
            <div class="spec-left specunderline mob_height">
                <ul>
                    <li><a href="">Edit Existing Cases</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-8 mb-5">

<div class="row mt-4">
                <div class="col-sm-9 mt-3 edit_case">
                    <h3>Edit Existing Cases</h3>
                </div>
                <div class="col-sm-2 mb-5 ml-5 back">
                    <span class="col-sm-2 col-6  mb-6 mobile-back  " id="go-back-new1">
                        <a href="<?php echo base_url('anaesthesia-logbook');?>">
                            BACK</a>
                    </span>
                </div>
                <div class="col-sm-1"></div>
            </div>

<!-- <div class="cme-right-new" style="padding: 2% 5% 0 0;">
            <div class="row mt-5">
                <div class="col-sm-12" style="margin-left: -5px;">

<div class="row date_input">
    <div class="col-sm-4">
        <label for="case_id" class="case" ><b>Case No:</b></label>
<input type="text" id="case_id" name="case_id" >
    </div>
    <div class="col-sm-8">
        <button id="apply_case_id_filter" class="apply_filter ml-2">Search by Case No</button>
    </div>
</div>
<div class="row mt-4 date_input">
    <div class="col-sm-4 st_dat">
        <label for="start_date" class="start"><b>Start Date:</b></label>
<input type="text" id="start_date" name="start_date">
    </div>
    <div class="col-sm-4">
        <label for="end_date" class="end"><b>End Date:</b></label>
        <input type="text" id="end_date" name="end_date">
    </div>
    <div class="col-sm-4">
        <button id="apply_date_filters" class="apply_filter ml-2">Search by Date</button> <span id="clear_filters" class=" ml-2"><i class="fa fa-window-close clear" aria-hidden="true"></i></span><br/>
    </div>
</div>

</div>

</table>
    <div style="display:none;">

</div>

</div>
<div id="pager3"></div>
<!-- 
<div class="row mb-4 mt-2">
    <div class="col-sm-1">
    <button class="apply_filter " id="prev_button">⏮️Previous</button>

</div>
<div class="col-sm-10">
</div>
<div class="col-sm-1">
<button class="apply_filter" id="next_button">Next⏭️</button>
</div>
</div> -->
    </div>

<div id="deleteConfirmationModal" class="modal">
    <div class="modal-content">
        <h3 class="p-2" style="background-color: #0065A3;color: white; ">Logbook</h3>
        <div class="model_con">
        <p><b>Do you want to delete this record?</b></p>
        <div class="row">
            <div class="col-sm-6">
                <button class="btn btn-light bt" onclick="closeDeleteConfirmation()"><b>No</b></button>
            </div>
            <div class="col-sm-6">
      
        <button class="btn btn-danger bt"onclick="deleteRecord()"><b>Yes</b></button>
    </div>
        </div>
    </div>
    </div>
</div>
</section>

//         $("#list3").jqGrid("setLabel", "rn", "SL");
//         // Initialize datepicker
//         $("#start_date, #end_date").datepicker({
//             dateFormat: 'yy-mm-dd',
//             changeMonth: true,
//             changeYear: true,
//         });

//         $("#apply_date_filters").click(function() {
//         var startDate = $("#start_date").val();
//         var endDate = $("#end_date").val();
//         $("#list3").jqGrid('setGridParam', {
//         postData: { start_date: startDate, end_date: endDate },
//         page: 1
//         }).trigger('reloadGrid');
//         });

//         $("#apply_case_id_filter").click(function() {
//         var caseId = $("#case_id").val();
//         $("#list3").jqGrid('setGridParam', {
//         postData: { case_id: caseId },
//         page: 1
//         }).trigger('reloadGrid');
//         });
//     });

$(document).ready(function() {
    var currentPage = 1; // Initialize current page to 1
    var startDate = null;
    var endDate = null;
    // Initialize jqGrid
    $("#list3").jqGrid({
        url: '<?php echo base_url('logbook-data'); ?>',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Case No', 'Date', 'Action'],
        colModel: [
            { name: 'case_num', index: 'case_num', width: 140, editable: false, sortable: true },
            {
    name: 'date_of_operate',
    index: 'date_of_operate',
    width: 130,
    editable: false,
    sortable: true,
    formatter: 'date', // Use the 'date' formatter
    formatoptions: { srcformat: 'Y-m-d', newformat: 'd-m-Y' } // Specify the source and target date formats
},
                {
                    label: 'Action',
                    name: 'edit',
                    width: 75,
                    formatter: function (cellValue, options, rowObject) {
                        return `<div class="fd mt-1 pb-1">
                                <a href="<?= site_url('logbook-edit-form') ?>?id=${options.rowId}"><img src="public/assets/logimages/file.jpg" class="folder"></a>
                                <a href="#" onclick="deleteRecord(${options.rowId})"><i class="fa fa-trash fa-trash_del" aria-hidden="true"></i></a>
                                </div>`;
                    }
                }
        ],
        pager: '#pager3',
        rownumbers: true,
        rowNum: 20,
        rowList: [20, 30, 50, 100, 200, 300],
        viewrecords: true,
        gridview: true,
        height: 'auto',
        shrinkToFit: true,
        autowidth: true,
        caption: 'Logbook',
        postData: {
            page: function() { return currentPage; }, // Send current page to the server
            start_date: function() { return $("#start_date").val(); },
            end_date: function() { return $("#end_date").val(); },
            case_id: function() { return $("#case_id").val(); }
        },
        loadComplete: function() {
            if (!startDate) {
                startDate = $("#start_date").val();
            }
            if (!endDate) {
                endDate = $("#end_date").val();
            }
        }
    });

$("#start_date, #end_date").datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
    });

$("#apply_date_filters").click(function() {
        currentPage = 1; 
        startDate = $("#start_date").val(); // Store the start date value
        endDate = $("#end_date").val(); // Store the end date value
        $("#list3").jqGrid('setGridParam', { page: currentPage }).trigger('reloadGrid');
    });

$("#apply_case_id_filter").click(function() {
        currentPage = 1;
        $("#list3").jqGrid('setGridParam', { page: currentPage }).trigger('reloadGrid');
    });

$("#next_button").click(function() {
        var totalPages = $("#list3").getGridParam('lastpage');
        if (currentPage < totalPages) {
            currentPage++;
            $("#list3").jqGrid('setGridParam', { page: currentPage }).trigger('reloadGrid');
        }
    });

$("#prev_button").click(function() {
        if (currentPage > 1) {
            currentPage--;
            $("#list3").jqGrid('setGridParam', { page: currentPage }).trigger('reloadGrid');
        }
    });
    
    $("#clear_filters").click(function() {
        $("#start_date").val('');
        $("#end_date").val('');
        $("#case_id").val('');
    });

});

.modal-content {
    background-color: #fff;
    margin: 20% auto;
    /* padding: 20px; */
    width: 30%;
    /* text-align: center; */
}
.model_con{
    padding: 20px;
}

.bt{
    width: 100%;
}
.rearrange-add-activity{
    margin-left: 0px;
    margin-top: -60px !important;
}
.cpd-ex-excel{
    margin-top: -32px;
    position: relative;
    left: 670px;
}
#list2{

}
@media only screen and (max-width:600px){
    .rearrange-add-activity{
    margin-left: -167px;
    margin-top: 9px !important;
}
.cpd-ex-excel{
    margin-top: opx;
    position: relative;
    left: -205px;
    top: 50px;
}
.cme-right-new{
    margin-left:10px;
    padding-left:10px
}
.apply_filter{
    margin-left:200px !important;
}
.case{
    /* margin-left:21px !important; */
}
.date_input{
    margin-left: 10px;
}
#end_date{
    margin-left: 10px !important;
}
#case_id{
    margin-left: 10px;
}

}
#case_id{
    margin-left: 14px;
}
.ui-jqgrid{
     z-index: 0 !important;
}
.apply_filter {
    background-color: #0065A3;
    cursor: pointer;
    color: #fff;
    border: 0;
    padding: 5px 12px;
    border-radius: 8px;
    /* float: right; */
}
#list2 {
    margin-top: -49px;
}
.clear {
  color: red;
  border: none;
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.clear:hover {
  /* background-color: #f44336; */
  box-shadow: 0px 0px 5px black;
  /* font-size:110%; */
}
.st_dat{
    padding-right: 0px !important;
    
}
    </style>