<style>
    #map-canvas {
        width: 100%;
        height: 400px;
        border: solid #999 1px;
    }

    select {
        width: 240px;
    }

    #kab_box,
    #kec_box,
    #kel_box,

    #lat_box,
    #lng_box {
        display: none;
    }
</style>
<div class="col-lg-6">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold"><?= $title; ?></h6>
        </div>
        <?php echo form_open_multipart('') ?>
        <div class="card-body">
            <input type="hidden" name="coverage_id" id="coverage_id" class="form-control" autocapitalize="off" value="<?= $coverage['coverage_id'] ?>">
            <div class="form-group">
                <label for="name">Nama Area / Code Area</label>
                <input type="text" name="name" id="name" class="form-control" autocapitalize="off" value="<?= $coverage['c_name'] ?>">
            </div>
            <div class="form-group">
                <label for="address">Alamat</label>
                <input type="text" name="address" id="address" class="form-control" autocapitalize="off" value="<?= $coverage['address'] ?>">
            </div>

            <div class="form-group">
                <label for="comment">Keterangan</label>
                <input type="text" name="comment" id="comment" class="form-control" autocapitalize="off" autocomplete="off" value="<?= $coverage['comment'] ?>">
            </div>
            <div class="modal-footer">
                <button type="reset" class="btn btn-secondary" data-dismiss="modal">Reset</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
            <?php echo form_close() ?>
        </div>
    </div>
</div>
<script>
    $(function() {
        //Initialize Select2 Elements
        $('.select2').select2()
    });
</script>