<style>
    #mira-region-update{
        border: 2px solid #dddddd;
    }
    #mira-region-update > thead > tr > th,
    #mira-region-update > tbody > tr > th,
    #mira-region-update > tfoot > tr > th,
    #mira-region-update > thead > tr > td,
    #mira-region-update > tbody > tr > td,
    #mira-region-update > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #mira-region-update{
        width: 100%;
        overflow-x: scroll;
    }
   
</style>
<div class="panel"> 
    <div class="panel-body">
        <hr class="colorgraph">
        <div class="row">
            <div class="col-md-6 col-md-push-3">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon"><i aria-hidden="true"></i><strong>Select Region Level</strong></span>
                        <select id="region_level" name="region_level" required class="form-control">
                            <option value="0" disabled="true" selected="true"> Select Region Level</option>
                            <?php
                            if (isset($level) and $level) {
                                for ($i = 0; $i < count($level); $i++) {
                                    ?>
                                    <option value=<?= $level[$i]['hierar_level_id'] ?>> <?= $level[$i]['hierar_level_name'] ?></option>
                                    <?php
                                }
                            }
                            ?>
                        </select>
                        <span class="input-group-addon"><i class="fa fa-level-down" aria-hidden="true"></i></span>
                    </div>                    
                </div> 
            </div>
            <div class="col-md-1 col-md-push-3 spinner" id="rgion_spinner" style="display: none;margin-top: 5px">
                <i class="fa fa-spinner fa-spin"></i>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-md-2 col-md-offset-5 col-xs-offset-3"><strong><input type="submit" value="View Detail Region" class="btn btn-primary btn-block get-region-detail"></strong></div>            
        </div>
        <hr class="colorgraph">
        <table id="mira-region-update" class="table table-bordred table-striped">
            <thead>

                <tr>
                    <th colspan="8"><h4 class="text-center"> <strong>Create Region Details By User</strong></h4></th>
            </tr>
            <tr>
                <th class="text-center">Region ID</th>
                <th class="text-center">Region Name</th>
                <th class="text-center">Create Date</th>
                <th class="text-center">App Name</th>
                <th class="text-center">Region Level</th>
                <th class="text-center">Current Status</th>
                <th class="text-center">Edit</th>
            </tr>
            </thead>
            <tbody>


            </tbody>
        </table>
    </div>
</div>


<div class="modal fade" id="editRegion" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title custom_align" id="Heading">Edit Region</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <input id="region_id" type="hidden" name="region_id" value="">
                    <div class="col-md-10 col-md-push-1">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">Please Enter Name</span>
                                <input id="region_name" name="region_name" required class="form-control" type="text" placeholder="Edit Area Name">
                            </div>                    
                        </div> 
                    </div>
                 </div>
            </div>
            <div class="modal-footer ">
                <div class="row">
                    <div class="col-md-6 col-md-push-3">
                         <button id="update" type="button" class="btn btn-warning" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
                    </div>
                    <div class="col-md-1 col-md-push-3 spinner" id="rgion_update_spinner" style="display: none;margin-top: 5px">
                        <i class="fa fa-spinner fa-spin"></i>
                    </div>
                </div>
            </div>
        </div>
        /.modal-content  
    </div>
    /.modal-dialog  
</div>



<div class="modal fade" id="success_message" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                <h4 class="modal-title custom_align text-center text-info" id="Heading">Region Update Status</h4>
            </div>
            <div class="modal-body success_message_body">
                <h5 class="text-center text-success"><strong id="alert-message"></strong></h5>

            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
            </div>
        </div>
         /.modal-content  
    </div>
     /.modal-dialog  
</div>



<script type="text/javascript">
    $(document).ready(function () {
        /********************************/
        /*This script get district.*/
        $('.get-region-detail').click(function () {
            $('#rgion_spinner').css('display', 'block');
            
            $("#mira-region-update tbody tr").remove();
            $.ajax({
                url: '<?= base_url('get_region_detail') ?>',
                data: {
                    region_level: $('#region_level').val()
                },
                type: "POST",
                success: function (json) {
                    var region = $.parseJSON(json);
                    if (region['region']) {
                        for (var i = 0; i < region['region'].length; i++) {
                            $("#mira-region-update tbody").append('<tr></tr>');
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + region['region'][i]['region_code'] + "</td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'><strong id=" + parseInt(region['region'][i]['region_code']) + ">" + region['region'][i]['region_name'] + "</strong></td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + region['region'][i]['create_date'] + "</td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + region['region'][i]['app_name'] + "</td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + region['region'][i]['region_level'] + "</td>");
                            if (parseInt(region['region'][i]['mapping_status']) == 1) {
                                $("#mira-region-update tbody tr:last").append("<td class='text-center'><span class='label label-success'>Mapped</span></td>");
                                $("#mira-region-update tbody tr:last").append('<td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Edit"><button onclick="regionEdit(this)" type="button" class="btn btn-primary btn-xs region-edit" value=' + parseInt(region['region'][i]['region_code']) + ' data-title="editApplication" data-toggle="modal" data-target="#editApplication" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>');
                            } else {
                                $("#mira-region-update tbody tr:last").append("<td class='text-center'><span class='label label-info'>Unmapped</span></td>");
                                $("#mira-region-update tbody tr:last").append('<td class="text-center"><p data-placement="top" data-toggle="tooltip" title="Edit"><button onclick="regionEdit(this)" type="button" class="btn btn-primary btn-xs region-edit" value=' + parseInt(region['region'][i]['region_code']) + ' data-title="editApplication" data-toggle="modal" data-target="#editApplication" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>');
                            }


                        }

                    }
                },
                error: function (xhr, status, errorThrown) {
                    $('#rgion_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#rgion_spinner').css('display', 'none');
                }
            });
        });
        /*******************************/
        $('#update').click(function () {
        $('#rgion_update_spinner').css('display','block');
            $.ajax({
                url: '<?= base_url('update_region') ?>',
                data: {
                    region_name: $('#region_name').val(),
                    region_id: $('#region_id').val(),
                },
                type: "POST",
                success: function (json) {
                    var region_update_status = $.parseJSON(json);
                    if (region_update_status['region_update']) {
                        $('#'+parseInt($('#region_id').val())).html($('#region_name').val());
                        $('#editRegion').modal('hide');
                        $('#alert-message').text(region_update_status['message']);
                        $('#success_message').modal('show');
                    } else {
                        $('#editRegion').modal('hide');
                        $('#alert-message').text(region_update_status['message']);
                        $('#success_message').modal('show');
                    }

                },
                error: function (xhr, status, errorThrown) {
                    
                    $('#rgion_update_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    
                    $('#rgion_update_spinner').css('display', 'none');
                }
            });

        });



    });
    /*****************************/
    function regionEdit(e) {
        $('#region_name').val(document.getElementById(e.value).textContent);
        $('#region_id').val(e.value);
        $('#editRegion').modal('show');
    }
    /*****************************/
    function updateRegion(e) {

    }

    /******************************/
</script>

