<div class="breadcrumb">
    <h1>Clinic Rating</h1>
    <ul>
        <li><a href="<?php echo SITE_URL.ADMIN_DIR ?>">Dashboard</a></li>
        <li>Clinic Rating List</li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>

<form action="" method="post">
<div class="row">
    <div class="col-lg-12 col-md-12">
        <div class="card mb-5">
            <div class="card-body">
                <div class="row row-xs">
                    
                    <div class="col-md-2 mt-3 mt-md-0" id="div_clinic_rating">
                        <label>Rating</label>
                        <input type="text" class="form-control" id="clinic_rating" />
                    </div>

                    <!-- <div class="col-md-2 mt-3 mt-md-0"  id="div_clinic_fullname">
                        <label for="clinic_fullname">Clinic Name</label>
                        <input type="text" class="form-control" name="clinic_fullname" id="clinic_fullname"  />
                    </div> -->

                    <div class="col-md-2  mt-3 mt-md-0" id="div_clinic_id">
                        <label for="clinic_id">Clinic</label>
                        <select class="form-control" id="clinic_id" name="clinic_id">
                            <option value="">Select Clinic</option>
                            <?php
                                  $clinicobj = new clinic;
                                  $fields = array('clinic_id,clinic_name');
                                  $clinicArg = array("fields"=>$fields);
                                  $clinicdata = $clinicobj->getAllRecords($clinicArg);
                                  foreach ($clinicdata as $ckey => $clinic_value) 
                                    { ?>
                                        <option value="<?php echo $clinic_value->clinic_id; ?>"><?php echo $clinic_value->clinic_name; ?></option>
                              <?php }
                            ?>

                        </select>
                    </div>

                    <div class="col-md-2">
                        
                        <label>&nbsp;</label>
                        <button type="submit" name="submit" class="btn btn-primary btn-block">Search</button>
                    </div>
                    <div class="col-md-2 mt-2">
                        <br/>
                        <button type="reset" class="btn btn-primary btn-block" onclick="window.location.reload()">Reset</button>
                    </div>

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

<div class="row mb-4">
    <div class="col-md-12 mb-4">
        <div class="card text-left">

            <div class="card-body">
                <div class="table-responsive">
                  <form id="listFrm" name="listFrm" action="" method="post">       
                    <input type="hidden" id="action" name="action" value="">
                    <table id="list" class="display table table-striped table-bordered" style="width:100%">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Rating</th>
                            </tr>
                        </thead>
                    </table>
                  </form>
                </div>
            </div>
        </div>
    </div>
</div>

<link href="./assets/styles/css/select2.min.css" rel="stylesheet" />
<script src="./assets/js/select2.min.js"></script>

<style type="text/css">
.select2 {
  width: 160px !important;
}
</style>

<script type="application/javascript">
$(document).ready(function() {
    
    $("#clinic_id").select2({
        tags: true
     });

    $('#list').DataTable({ 
        "ajax": "clinicXcareRating.php?act=load",
        "processing": true,
        "serverSide": true,
        "pageLength": 25,
        "aaSorting": [],
        "columns": [
            { "data": 0 },
            { "data": 1 },

            {
                "data": 2,
                "render": function (data, type, row) {
                    let clinicId = row[0];
                    let rating   = row[2];
                    return `
                        <input type="text" 
                               class="form-control rating-input" 
                               data-id="${clinicId}" 
                               value="${rating}" 
                               style="width:80px; display:inline-block">

                        <button class="btn btn-sm btn-primary save-rating-btn"
                                data-id="${clinicId}"
                                style="margin-left:5px;">
                            Save
                        </button>
                    `;
                }
            }
        ],
        "language": {
            "processing" : "<div class='loader-bubble loader-bubble-primary m-5'></div>",
            "sEmptyTable" :  "No records found."
        }
    });

    $("form").on("submit", function(e) {
        e.preventDefault();

        var clinic_rating = $("#clinic_rating").val();
        var clinic_id = $("#clinic_id").val();

        $('#list').DataTable().destroy();
        $('#list').DataTable({ 
            "ajax": "clinicXcareRating.php?act=load"
                    +"&clinic_rating="+clinic_rating
                    +"&clinic_id="+clinic_id,
            "processing": true,
            "serverSide": true,
            "pageLength": 25,
            "aaSorting": [],
            "columns": [
                { "data": 0 },
                { "data": 1 },
                {
                    "data": 2,
                    "render": function (data, type, row) {
                        let clinicId = row[0];
                        let rating   = row[2];
                        return `
                            <input type="text" 
                                   class="form-control rating-input" 
                                   data-id="${clinicId}" 
                                   value="${rating}" 
                                   style="width:80px; display:inline-block">

                            <button class="btn btn-sm btn-primary save-rating-btn"
                                    data-id="${clinicId}"
                                    style="margin-left:5px;">
                                Save
                            </button>
                        `;
                    }
                }
            ],
            "language": {
                "processing" : "<div class='loader-bubble loader-bubble-primary m-5'></div>",
                "sEmptyTable" :  "No records found."
            }
        });
    });

    $(document).on("click", ".save-rating-btn", function () {

        let clinicId = $(this).data("id");
        let rating = $(this).closest("td").find(".rating-input").val();

        $.ajax({
            url: "clinicXcareRating.php",
            type: "POST",
            data: {
                act: "saveRating",
                clinic_id: clinicId,
                rating: rating
            },
            success: function (response) {
                let res = JSON.parse(response);

                if (res.status === "success") {
                    alert("Rating Saved!");
                } else {
                    alert("Error: " + res.msg);
                }

                $('#list').DataTable().ajax.reload(null, false);
            }
        });

    });

});
</script>